Complex HTML Tables

We can combine basic table layout with the colspan and rowspan attributes to produce some very complex table layouts. This is essentially a very simple process, but it can become quite confusing at times, because you have to be very careful to keep a track of what cells you need to specify in what rows. To help you clarify this in your mind I suggest you begin by making a sketch of the basic table, as you want it to appear, using good old pencil and paper:

Next, count how many rows and columns your table needs. This is determined by counting the number of cell split lines in either the horizontal or vertical direction. In this case, there are four columns and four rows. It is worth lightly sketching in the row and column split lines; that way we can easily see which cells will need to span more than one row or column. Next, number every one of your cells, even if it is merged with another. This will be useful in the next step.

Now we have the layout planned, we can run through each cell to see how we define it in our table:

Cell 1 - define as normal using a <td> tag.
Cell 2 - use colspan="2" to merge with cell 3.
Cell 3 - has already been defined along with cell 2, so skip this one.
Cell 4 - define as normal.

Cell 5 - use rowspan="3" to merge with cells 9 and 13.
Cell 6 - define as normal.
Cell 7 - define as normal.
Cell 8 - define as normal.

Cell 9 - has already been defined along with cell 5, so skip.
Cell 10 - define as normal.
Cell 11 - define as normal.
Cell 12 - define as normal.

Cell 13 - has already been defined along with cell 5, so skip.
Cell 14 - use colspan="3" to merge with cells 15 and 16.
Cell 15 - has already been defined along with cell 14.
Cell 16 - has already been defined along with cell 14.

This may seem like a laborious process, but it can really help to clarify things in your mind, which will make it much easier for you when you come to actually writing the HTML code. Let's give it a shot. You'll notice that I've used comments to add further clarification to the HTML; this is a very good habit to get into.

<table border="1">

<!-- First row -->

<tr>
<td>1</td>
<td colspan="2">2 and 3</td>
<td>4</td>
</tr>

<!-- Second row -->

<tr>
<td rowspan="3">5, 9 and 13</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>

<!-- Third row -->

<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>

<!-- Fourth row -->

<tr>
<td colspan="3">14, 15 and 16</td>
</tr>

</table>

Ok, that wasn't so bad was it? By carefully working through the notes we made we can build up our complex table layout with a minimum of hassle. If done correctly it should look something like this:

1 2 and 3 4
5, 9 and 13 6 7 8
10 11 12
14, 15 and 16

HTML tables can seem quite daunting, but they are really very simple to use; they just require you to use some careful planning and be methodical when constructing them. I would strongly recommend using the technique above to make sure you get your tables right first time, and to avoid any headaches further down the line!