📜  HTML thead标签(1)

📅  最后修改于: 2023-12-03 15:15:34.551000             🧑  作者: Mango

HTML thead标签

HTML thead标签用于定义 HTML 表格的表头,通常与 HTML tbody 和 HTML tfoot 标签一起使用。

语法
<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>
  <tfoot>
    <tr>
      <td>表尾单元格1</td>
      <td>表尾单元格2</td>
      <td>表尾单元格3</td>
    </tr>
  </tfoot>
</table>
示例

使用 HTML thead 标签来定义 HTML 表格的表头,如下所示:

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>产品名称</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>苹果</td>
      <td>10 元</td>
    </tr>
    <tr>
      <td>2</td>
      <td>香蕉</td>
      <td>5 元</td>
    </tr>
    <tr>
      <td>3</td>
      <td>橙子</td>
      <td>8 元</td>
    </tr>
  </tbody>
</table>

效果如下:

| ID | 产品名称 | 价格 | | --- | --- | --- | | 1 | 苹果 | 10 元 | | 2 | 香蕉 | 5 元 | | 3 | 橙子 | 8 元 |

注意点
  • &lt;thead&gt; 标签定义表头的内容。通常情况下,表头中的内容是用 <th> 标签来定义的。
  • <thead>标签必须与<tbody> 和 <tfoot> 一同使用,它们都必须出现在 <table> 元素中。
  • <thead> 标签只有在表格中包含了 <tbody> 元素时才需要使用。