Cell spanning is a mechanism through which an author con combine or fusion two or more adjacent cells (
th) in a table. This effect can be achieved using the cell's attributes
colspan, for horizontal spanning, and
rowspan, for vertical spanning. These attributes can take an integer greater than zero, representing the number of cells to be spanned by the current cell.
The idea behind this mechanism is almost self explanatory: when the attribute
colspan is set in a cell, it indicates interpreters that the cell should span, not only its own space, but the cell space of a number of adjacent cells to the right. The same goes for
rowspan but downwards. Because of the structure of tables in HTML, spanning can only be done to the right or downwards. Doing it upwards or to the left would be an attempt to span cell-space already occupied.
In the following example, a cell in the table is spanning three cell spaces, as indicated by the
colspan attribute. Note how the declaration for the two cells to the right of this particular cell have been ommited in the code. This is appropriate, as the space of these cells has been taken by the previous.
<table class="egt"> <tr> <th></th> <th>Day 1</th> <th>Day 2</th> <th>Day 3</th> <th>Day 4</th> </tr> <tr> <th>Mike (injured)</th> <td colspan="3">0 km</td> <td>4 km</td> </tr> <tr> <th>Susan</th> <td>23 km</td> <td>18 km</td> <td>19 km</td> <td>15 km</td> </tr> </table>
|Day 1||Day 2||Day 3||Day 4|
|Mike (injured)||0 km||4 km|
|Susan||23 km||18 km||19 km||15 km|
Now we'll try the
rowspan attribute. Although the idea of spanning here is the same (except for the direction), the structure of HTML tables makes vertical spanning a little different. In horizontal spanning everything happened in the same row (the declaration of the
colspan attribute and the omission of contiguous cells). With vertical spanning, the
rowspan attribute is set in the cell of one particular row and the omission of spanned cells is made in the subsequent rows, one by one. This means that if a cell in the first row spans the space of three cells vertically, the rows two and three will have one missing cell each. Let's see this with an example.
<table class="egt"> <tr> <th></th> <th>Basic</th> <th>Full</th> </tr> <tr> <th>Setup</th> <td rowspan="2">Free!</td> <td>$49.99</td> </tr> <tr> <th>First year</th> <td>$19.99</td> </tr> <tr> <th>Second year</th> <td>$9.99</td> <td>$29.99</td> </tr> </table>
If you pay attention, the second row of the previous example, has a cell that's spanning two spaces. Therefore, the third row has a missing cell in the code, namely, its second. This means that the second cell declared (in the code) in the third row ("$19.99") represents the third cell in that row and not the second.
When used together in the same
table, the attributes
rowspan must be carefully declared in a way that doesn't produce overlaping cells.