Table cells can span multiple columns or rows using the colspan
and rowspan
attributes. These attributes can be applied to <th>
and <td>
elements.
<table>
<tr>
<td>row 1 col 1</td>
<td>row 1 col 2</td>
<td>row 1 col 3</td>
</tr>
<tr>
<td colspan="3">This second row spans all three columns</td>
</tr>
<tr>
<td rowspan="2">This cell spans two rows</td>
<td>row 3 col 2</td>
<td>row 3 col 3</td>
</tr>
<tr>
<td>row 4 col 2</td>
<td>row 4 col 3</td>
</tr>
</table>
Note that you should not design a table where both rows and columns overlap as this is invalid HTML and the result is handled differently by different web browsers.
rowspan
= A non-negative integer that specifies the number of rows spanned by a cell. The default value of this attribute is one (1
). A value of zero (0
) means that the cell will extend from the current row until the last row of the table (<thead>
, <tbody>
, or <tfoot>
).
colspan
= A non-negative integer that specifies the number of columns spanned by the current cell. The default value of this attribute is one (1
). A value of zero (0
) means that the cell will extend from the current to the last column of the column group <colgroup>
in which the cell is defined.