Table Rowspan

You should have a good basic understaning of Tables before attemping this lesson.

Rowspan for tables can sometimes seem tricky, but it isn't if you visualize the table in advance.

Here is a sample table cell line of code with the "rowspan" attribute added to it.

<td align="center" valign="middle" rowspan="2">

In the sample table below we want the table cell on the right to span the three cells on the left.

So the second table cell in the first table row must expand down along the three table cells on the left. This is the table cell you would use the "rowspan" attribute in.

Sample Table Using Rowspan

Sample Table Code Table Using Rowspan

<table width="400" cellpadding="10" cellspacing="0" border="1">
<tr><td bgcolor="#fa8072" align="center" valign="middle">
<font size="2" color="#000000" face="verdana">
<b>Cell One</b></font>
</td><td bgcolor="#d3d3d3" align="center" valign="middle" rowspan="3">
<font size="2" color="#000000" face="verdana">
<b>Cell Two</b></font>
</td></tr>
<tr><td bgcolor="#f0f8ff" align="center" valign="middle">
<font size="2" color="#000000" face="verdana">
<b>Cell Three</b></font>
</td></tr>
<tr><td bgcolor="#90ee90" align="center" valign="middle">
<font size="2" color="#000000" face="verdana">
<b>Cell Four</b></font>
</td></tr></table>

Let's add another table cell at the bottom of our sample table using the "colspan" attribute. This will allow the cell to span across the bottom or in other words span across the two columns that makes up our table.

Sample Table Using Rowspan & Colspan

Sample Table Code Using Rowspan & Colspan

<table width="400" cellpadding="10" cellspacing="0" border="1">
<tr><td bgcolor="#fa8072" align="center" valign="middle">
<font size="2" color="#000000" face="verdana">
<b>Cell One</b></font>
</td><td bgcolor="#d3d3d3" align="center" valign="middle" rowspan="3">
<font size="2" color="#000000" face="verdana">
<b>Cell Two</b></font>
</td></tr>
<tr><td bgcolor="#f0f8ff" align="center" valign="middle">
<font size="2" color="#000000" face="verdana">
<b>Cell Three</b></font>
</td></tr>
<tr><td bgcolor="#90ee90" align="center" valign="middle">
<font size="2" color="#000000" face="verdana">
<b>Cell Four</b></font>
</td></tr>
<tr><td bgcolor="#ffe4b5" align="center" valign="middle" colspan="2">
<font size="2" color="#000000" face="verdana">
<b>Cell Five</b></font>
</td></tr></table>

Here is another example of using rowspan. This shows multiple table cells on both sides of a single table cell.

Sample Table Using Rowspan With Table Cells On Both Sides

Sample Table Code Using Rowspan With Cells On Both Sides

<table width="400" cellpadding="10" cellspacing="0" border="1">
<tr><td bgcolor="#fa8072" align="center" valign="middle">
<font size="2" color="#000000" face="verdana">
<b>Cell One</b></font>
</td><td bgcolor="#d3d3d3" align="center" valign="middle" rowspan="2">
<font size="2" color="#000000" face="verdana">
<b>Cell Two</b></font>
</td>
<td bgcolor="#fa8072" align="center" valign="middle">
<font size="2" color="#000000" face="verdana">
<b>Cell Three</b></font>
</td></tr>
<tr><td bgcolor="#90ee90" align="center" valign="middle">
<font size="2" color="#000000" face="verdana">
<b>Cell Four</b></font>
</td>
<td bgcolor="#90ee90" align="center" valign="middle">
<font size="2" color="#000000" face="verdana">
<b>Cell Five</b></font>
</td></tr></table>