Week Five | Part Two

Table Row Spans

What you did for table columns you can also do with table rows by using the rowspan attribute.

The difference (and this is where they seem a bit more complicated) is you will be combining the adjacent rows directly underneath the <td> where you first apply the rowspan attribute.

The newly combined row becomes one very large cell, but the rest of the cells in that row remain the same.

Let's start with this example:

Let's say I want to create a table with a larger text area on the left and right sides, but keep the two cells in the middle for a description. I would alter the mark-up code to this:

<table border="1" width="50%">
<tr>
<td rowspan="3">Cell 1<br />Cell 4<br />Cell 7</td>
<td>Cell 2</td>
<td rowspan="3">Cell 3<br />Cell 6<br />Cell 9</td> 
<tr>
<td>Cell 5</td>
</tr>
<tr>
<td>Cell 8</td>
</tr>
</table>

My new table now looks like this:

Please go to Week Five Part 3 ».