Tables HTML
Tables HTML
The table is a element that consists of rows and columns. It is useful for displaying data
in tabular form, however it is used as the foundation of complex of layouts with multiple
columns, sidebars and many other features. One of the beautiful thing about tables is that
they can be used to create liquid design that can contract and expand proportionally to
the visitor's browser. There three set of tags required to build any table i.e <table>
(table), <tr> (row), <td> (cell). The general syntax for creating table is as :
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<html>
<head>
<title>Tables</title>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<html>
<head>
<title>Tables</title>
</head>
<body>
<table border="2>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
The thickness of internal borders between the cells is controlled by cellspacing attribute
as :
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
The empty spaces between the cell borders and content inside it is controlled by
cellpadding attribute as :
<html>
<head>
<title>Tables</title>
</head>
<body>
<table border="2" cellspacing="10" cellpadding="10">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
The color of the border of the table can be specified with bordercolor attribute. Let us
see as :
<html>
<head>
<title>Tables</title>
</head>
<body>
<table border="2" cellspacing="10" cellpadding="10" bordercolor="#ff0099">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<html>
<head>
<title>Tables</title>
</head>
<body>
<table border="2" width="70%" height="200">
<tr height="70">
<td width="30%">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
Table alignment
<html>
<head>
<title>Tables</title>
</head>
<body>
<table border="2" width="70%" height="200" align="right">
<tr height="70">
<td width="30%" align="left" valign="bottom">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
Cell spanning
A single cell can span across multiple rows or columns. The number of rows or columns
a cell spans is specified using the rowspan and colspan attribute. Let us demonstrate it
:
<html>
<head>
<tr>
<td>2</td>
<td>3</td>
<td rowspan="2">4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<table border="2" width="70%" height="200" align="right" bgcolor="#FF6688">
<tr height="70">
<td>1</td>
<td bgcolor="#0099FF">2</td>
</tr>
<tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>