Spanning rows and cells

It’s sometimes necessary for data to span multiple rows or columns. This is achieved via
the rowspan and colspan attributes, respectively. In the following table, the first row has
three cells. However, in the second row, the first cell spans two rows and the second cell
spans two columns. This means the second row lacks a third cell, and the third row also
only has two cells (whose contents align with the second and third cells of the top row).
See the following screenshot of the table to help make sense of this.
<table border="1" cellpadding="2">
<tr>
<td>A cell</td>
<td>Another cell</td>
<td>Yet another cell!</td>
</tr>
<tr>
<td rowspan="2">A cell that spans two rows</td>
<td colspan="2">A cell that spans two columns</td>
</tr>
<tr>

<td>Another cell</td>
<td>The last cell</td>
</tr>
</table>
Take care when spanning rows or columns with a cell, because it’s easy to add extra cells
accidentally. For instance, in the preceding example, it would be easy to absentmindedly
add a third cell to both the second and third rows—however, doing so appends the extra
cells to the end of the table (see the following example), which looks bad, and—more
important—makes little structural sense. Also, some screen readers have difficulty handling
such data, often assigning the wrong headers to various pieces of data (see the
“Creating accessible tables” section later in the chapter for information on table headers).