HTML 表格

HTML 表格是用于在网页上呈现表格数据的标准方式。表格可以用于显示价格清单、比较数据或者呈现任何包含数值的数据。表格通常由 表格行(tr) 和表格列(td) 组成。

创建表格

要创建一个表格，需要使用以下标签：

<table>
  <tr>
    <td>单元格 1</td>
    <td>单元格 2</td>
  </tr>
  <tr>
    <td>单元格 3</td>
    <td>单元格 4</td>
  </tr>
</table>

这将创建一个简单的 2x2 表格。

表格行和单元格

在表格中，数据是以 表格行 和 表格单元格 的形式呈现的。

表格行

表格行是在 标签中定义的，如下所示：

<table>
  <tr>
    <td>单元格 1</td>
    <td>单元格 2</td>
  </tr>
  <tr>
    <td>单元格 3</td>
    <td>单元格 4</td>
  </tr>
</table>

表格单元格

表格的每个数据单元格都在一个 标签中定义。如下面的例子所示：

<table>
  <tr>
    <td>单元格 1</td>
    <td>单元格 2</td>
  </tr>
  <tr>
    <td>单元格 3</td>
    <td>单元格 4</td>
  </tr>
</table>

表格标题

表格标题是用于为表格标题提供描述性文字的标签。标题可以用 标签来定义：

<table>
  <caption>这是表格标题</caption>
  <tr>
    <td>单元格 1</td>
    <td>单元格 2</td>
  </tr>
  <tr>
    <td>单元格 3</td>
    <td>单元格 4</td>
  </tr>
</table>

表格表头

表格表头包含了表格中的标题信息，可以是表格中某些单元格设置的表头信息，也可以是表格中第一行、第一列设置的表头信息。

列表头

用 标签来定义表格的表头单元格。在表格中，表头单元格通常会加粗并居中，如下所示：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>31</td>
    <td>上海</td>
  </tr>
</table>

行表头

要在表格中定义行表头，使用 标签并将其放置在表格的 标签内：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>31</td>
      <td>上海</td>
    </tr>
  </tbody>
</table>

表格边框

表格边框可以控制表格的展示外观，可以使用

<table border="1">
  <tr>
    <td>单元格 1</td>
    <td>单元格 2</td>
  </tr>
  <tr>
    <td>单元格 3</td>
    <td>单元格 4</td>
  </tr>
</table>

表格间距和边框折叠

通过 cellpadding 和 cellspacing 属性可以设置单元格之间的距离和边框之间的距离。例如：

<table cellspacing="0" cellpadding="0">
  <tr>
    <td>单元格 1</td>
    <td>单元格 2</td>
  </tr>
  <tr>
    <td>单元格 3</td>
    <td>单元格 4</td>
  </tr>
</table>

同时，可以通过设置 table 标签的 border-collapse 属性来控制边框的折叠：

<table border="1" style="border-collapse: collapse;">
  <tr>
    <td>单元格 1</td>
    <td>单元格 2</td>
  </tr>
  <tr>
    <td>单元格 3</td>
    <td>单元格 4</td>
  </tr>
</table>