HTML and CSS —

Combining colspan and rowspan

Of course, you can mix colspan and rowspan to get a range of various tables. Example 4-13 demonstrates a mix of column and row spanning.

Example 4-13. Combining colspan and rowspan
<table width="90%" border="1" cellspacing="5" cellpadding="5" summary="This table combines
 colspan and rowspan">
<caption>Combining colspan and rowspan</caption>
<tr>
<th colspan=2" rowspan="2">Header (spans 2 columns and 2 rows)</th>
<td>data</td>
</tr>
<tr>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>

Figure 4-14 shows the results.

Figure 4-14. Combining colspan and rowspan.

NOTE

You can mix and match colspan and rowspan into as wide a range of mixes as imaginable. Two caveats remain: Be sure to get rid of any cells or headers that will be overlapped by your spanning, and know that the more complex your table becomes, the less accessible it will be for the majority of screen reader software used by blind and visually impaired users.