Using rowspan and colspan in a single cell

Some tables requires use of rowspan and colspan in a single cell. The following table shows an example:

1 2 3
A B
C

In the second cell in the second row above, we are using colspan and rowspan. To create such table, simply first create the table structure:

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

Next, we need to determine where we place our colspan and rowspan attributes. If you look carefully at the above table, you will notice that the second cell in the second row expands horizontally to the third column and vertically to the third row. So that means we need to use colspan to expand the cell horizontally and rowspan to expand the cell vertically down. Thus our <td> tag will consist of:

<td colspan="2" rowspan="2"></td>

Recall that anytime we expand cells, we have to adjust the cells in our table. Because we are expanding our cell in the second cell and third row, we need to adjust the cells in the second and third row. Specifically, we have to take out one <td> tag from second row and two <td> tags from the third row:

<table width="200" border="1" cellpadding="2">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2" rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</table>