12
2011
Lesson 12 – Advanced Tables
An article by 
Spanning Rows and Columns
Tables take a little while getting used to. They become even more complicated when combining rows and columns and adding a header row to the table.
Let’s start with an example:
<html>
<head>
<title>Advanced Tables</title>
</head>
<body>
<table width="100%" border="0" cellpadding="5" cellspacing="0">
<tr>
<td>Row 1 Col 1 </td>
<td colspan="2">Row 1 Col 2 </td>
</tr>
<tr>
<td rowspan="2">Row 2 Col 1 </td>
<td>Row 2 Col 2 </td>
<td>Row 2 Col 3 </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
The attributes colspan and rowspan on table cells are used to merge columns and rows together repectively. For each, you provide the number of columns or rows you want merged together.
In the example, there is a 3×3 table. In the first row, cells 2 and 3 are merged together. In the second row, the first cell is merged with the cell right below it. In third row, there are only two cells because the first cell is merged with the first cell of the second row. I know..it’s a little tricky but after playing with rowspan and colspan, you’ll get the hang of it.
Header Rows
In addition to rowspan and colspan, you can define the cells in the first row in the table as the header row. The is done by changing the <td> tag to a <th> or table header tag.
<html>
<head>
<title>Table Headers</title>
</head>
<body>
<table width="100%" border="0" cellpadding="5" cellspacing="0">
<tr>
<th>Row 1 Col 1 </th>
<th>Row 1 Col 2 </th>
<th>Row 1 Col 3 </th>
</tr>
<tr>
<td>Row 2 Col 1 </td>
<td>Row 2 Col 2 </td>
<td>Row 2 Col 3 </td>
</tr>
<tr>
<td>Row 3 Col 1 </td>
<td>Row 3 Col 2 </td>
<td>Row 3 Col 3 </td>
</tr>
</table>
</body>
</html>
The <th> tags makes the text bold and centered.
