表格：rowspan 和 colspan

以下代码与《HTML 入门教程》的表格页面中的代码相似。

<table>
    <tr>
        <th>Column 1 heading</th>
        <th>Column 2 heading</th>
        <th>Column 3 heading</th>
    </tr>
    <tr>
        <td>Row 2, cell 1</td>
        <td colspan="2">Row 2, cell 2, also spanning Row 2, cell 3</td>
    </tr>
    <tr>
        <td rowspan="2">Row 3, cell 1, also spanning Row 4, cell 1</td>
        <td>Row 3, cell 2</td>
        <td>Row 3, cell 3</td>
    </tr>
    <tr>
        <td>Row 4, cell 2</td>
        <td>Row 4, cell 3</td>
    </tr>
</table>

表头单元格

第一个区别是第一行的 td 标签已被 th 标签替换。td 是标准的数据单元格，而 th 是表头单元格。与 td 元素一样，它们必须包含在 tr 元素内。

跨越列和行

colspan 和 rowspan 属性也已在一些 td 标签中使用。如果您在浏览器中查看此代码，您会发现第二行现在有两个单元格而不是三个，第二个单元格跨越第二列和第三列。colspan 属性，意思是“列跨度”，会将单元格跨越指定的单元格数量。这意味着，在此示例中，不需要第三个 td 元素——两个单元格被合并成一个。

rowspan 属性类似于 colspan，只是它会跨越行而不是列。同样，它跨越的单元格应该被移除。在此示例中，因为它跨越了第四行，所以该行只有两个单元格。

与更简单的 3x4，12 个单元格的表格一样，具有合并单元格的这些表格中的数字也应该加起来。尽管此示例中只有 10 个单元格，但有 2 个跨度。