HTML表格概述

表格的基本结构

表格的基本标签有标签<table>（表格），<tr>标签（表格行）,<td>标签（表格单元格）。

<tr>标签和<td>标签必须在标签<table>与</table>标签之间才有效。

除了基本标签外还有表格标题<caption>标签、表头<th>标签。

浏览器会将<caption>标签中的内容在表格正上方居中显示。一个表格只能有一个标题标签。

浏览器会以粗体和居中的样式显示<th>元素中的内容。

代码示例与效果显示

表格语义化：

为了更深一层对表格进行语义化，HTML引入了thead、tbody和tfoot这三个标签。这三个标签把表格分为三部分：表头、表身、表脚。有了这三个标签，表格HTML代码语义更加良好，结构更加清晰。

语法：

<caption>表格标题</caption>

<table>

<thead>

<tr>

<th>表头单元格1</th>

<th>表头单元格2</th>

<th>表头单元格3</th>

</tr>

</thead>

<tbody>

<tr>

<td>标准单元格1</td>

<td>标准单元格2</td>

<td>标砖单元格3</td>

</tr>

<tr>

<td>标准单元格1</td>

<td>标准单元格2</td>

<td>标准单元格3</td>

</tr>

<tfoot>

<tr>

<td>标准单元格1</td>

<td>标准单元格2</td>

<td>标准单元格3</td>

</tr>

</tfoot>

</table>

<thead>、<tbody>、<tfoot>这三个标签很重要，虽然加了跟没加显示效果一样，但它从语义上区分了表头，表身和表脚，使结构更加清晰。

---

合并行rowspan属性

rowspan是<td>的一个属性。

<td rowspan="跨度的行数">

测试代码和显示效果 不加rowspan属性显示效果展示

合并列colspan属性

  colspan是<td>的一个属性。

<td colspan="跨度的列数">，用法跟rowspan属性差不多

代码测试与显示效果 不加colspn属性效果展示

仔细看，<td>跨两列</td>不加colspan属性的话，显示效果与加了的差别。

【小技巧】:表格合并行属性和表格合并列属性在内容不能完全放于一个单元格内时非常有用。通过跨越许多单元格，不需要改变表格就能将更多的文字放入单元格。