Spanning rows: rowspan

To span cells vertically down, use the rowspan attribute with the <td> or <th> tag. The rowspan attribute expects a number equal to the number of cells you want to combine vertically into one column. Note that when you combines rows, rowspan includes the current cell. The easiest way to learn how to write the HTML code to create a rowspan is to first create the table with all cells. Of course, to keep your code simple to work with, you should not completely fill your table with data. Assume we want to create, the following table:

Span several cells Rowspan Combining at least two cells vertically.
Colspan Combining at least two cells horizontally.

Notice the first column combines two cells. To create the above table, first create the complete table structure with the <table> tag, <tr> tag, and <td> tag:

<table width="520" border="1" cellpadding="2">
<tr>
<th></th>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Remember you have to fill the cells with some data before you can see the structure of the table on a web page. To create the rowspan in the first column, use the rowspan attribute in the <th> tag:

<th rowspan="2">

So by setting the rowspan to 2, we are extending down the first cell in the first column to the second cell in the second row. Because the first cell now will extend down to the second row, we need to adjust our cell tags in the second row. Specifically, we need to delete one of the <td> tags in the second row. So, now our code will look like:

<table width="520" border="1" cellpadding="2">
<tr>
<th rowspan="2"></th>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

Again, notice above the first row contains three cells while the second row contains only two. The second row needs only two <td> tags because one of the cells from the first row is occupying the first cell in the second row. Because now we have the appropriate table structure, we can fill our table with data:

<table width="520" border="1" cellpadding="2">
<tr>
<th rowspan="2">Span several cells</th>
<td>Rowspan</td>
<td>Combining at least two cells vertically.</td>
</tr>
<tr>
<td>Colspan</td>
<td>Combining at least two cells horizontally.</td>
</tr>
</table>