所有表格的 HTML 标头 - HTML

在 HTML 中，表格是一种常用的显示数据的形式，可以通过一些标签和属性创建表格，并添加表头（th）和表格单元格（td）等元素来定义表格的结构和内容。

HTML 表格基础结构

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

<table>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1列1</td>
      <td>行1列2</td>
      <td>行1列3</td>
    </tr>
    <tr>
      <td>行2列1</td>
      <td>行2列2</td>
      <td>行2列3</td>
    </tr>
  </tbody>
</table>

以上代码将创建一个包含两行三列的表格，其中第一行为表头，分别为“表头1”、“表头2”和“表头3”，第二行为数据行，分别为“行1列1”、“行1列2”和“行1列3”以及“行2列1”、“行2列2”和“行2列3”。

HTML 表格标头的使用

在 HTML 表格中，表头是一种特殊的单元格，通常用于在表格中标识数据列的名称或属性。在 HTML 中，可以使用 th 标签来创建表头单元格。

以下是一个例子：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

以上代码包含一个简单的表格，其中第一行为表头，每列的名称为“姓名”、“年龄”和“性别”，第二行是数据行，包含两个人的信息。

HTML 表格属性

在 HTML 中，可以使用各种属性来控制表格的表现和行为，以下是一些常用的属性：

• width：表格的宽度（像素或百分比），可以使用“auto”表示自适应宽度。
• cellspacing：单元格之间的间距（像素）。
• cellpadding：单元格内边距（像素）。
• border：表格边框的宽度（像素），可以使用“0”表示没有边框。
• align：表格的水平对齐方式，可以是“left”、“right”或“center”等。
• valign：表格的垂直对齐方式，可以是“top”、“bottom”或“middle”等。

以下是一个演示如何使用这些属性来掌控表格外观和行为的例子：

<table width="80%" cellspacing="0" cellpadding="5" border="1" align="center" valign="middle">
  <thead>
    <tr>
      <th>商品名称</th>
      <th>单价（元）</th>
      <th>库存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>苹果</td>
      <td align="center">5.00</td>
      <td>1000</td>
    </tr>
    <tr>
      <td>香蕉</td>
      <td align="center">3.50</td>
      <td>800</td>
    </tr>
  </tbody>
</table>

以上代码将创建一个包含两行三列的表格，其中第一行为表头，每列的名称为“商品名称”、“单价（元）”和“库存”，第二行是数据行，包含两个商品的信息。此表格的宽度为 80%，单元格之间的间距为 0，单元格内边距为 5 像素，表格边框为 1 像素，居中对齐并垂直居中。