HTML and CSS —

Combining colspan and rowspan

Of course, you can mix colspan and rowspan to get a range of various tables. Combining colspan and rowspan in an HTML table allows you to merge cells both horizontally and vertically to create complex table structures. Following exmaple demonstrates a mix of column and row spanning.

Combining colspan and rowspan:

<table>
<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>

Result - Combining colspan and rowspan.

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.