HTML的标签

前言

      <thead></thead>是HTML中用于定义表格头部的标签。表格头部指的是表格中所有行的第一行。<thead> 标签必须和 <tbody> 以及 <tfoot> 标签一起配合使用，让表格的DOM结构更加明确和合理。表格的头部一些文字和样式信息，可以直接放置在 <thead> 标签内。
    

第一段

      <table>
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>籍贯</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>张三</td>
            <td>20</td>
            <td>河南</td>
          </tr>
          <tr>
            <td>李四</td>
            <td>30</td>
            <td>山西</td>
          </tr>
        </tbody>
      </table>
    

在这个例子中，我们使用了 <thead> 标签，标记了表格的头部。<thead> 标签包含了表格的标题行 (Name, Age,Location)。<thead> 标签并不会实现某种特殊效果，同时在表格样式上也没有特别的限制。

第二段

      <table class="styled-table">
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>籍贯</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>张三</td>
            <td>20</td>
            <td>河南</td>
          </tr>
          <tr>
            <td>李四</td>
            <td>30</td>
            <td>山西</td>
          </tr>
        </tbody>
      </table>
    

在这个例子中，我们在 <thead> 标签前增加了一个class为 "styled-table" 的class属性，它可以为表格增加一些附加样式。

第三段

      <table>
        <thead>
          <tr>
            <th rowspan="2">姓名</th>
            <th colspan="2">家庭情况</th>
          </tr>
          <tr>
            <th>妻子</th>
            <th>儿子</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>张三</td>
            <td>小红</td>
            <td>小明</td>
          </tr>
          <tr>
            <td>李四</td>
            <td>小花</td>
            <td>小小</td>
          </tr>
        </tbody>
      </table>
    

在这个例子中，姓名单元格使用了rowspan属性并占了2行，列标题单元格使用了colspan属性并在内部定义了子表头妻子和儿子。

第四段

      <table>
        <thead>
          <tr>
            <th>产品名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>总价</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>产品1</td>
            <td>100</td>
            <td>2</td>
            <td>200</td>
          </tr>
          <tr>
            <td>产品2</td>
            <td>200</td>
            <td>3</td>
            <td>600</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="3">合计</td>
            <td>800</td>
          </tr>
        </tfoot>
      </table>
    

在这个例子中，表格底部使用 <tfoot> 标记展示合计行，“合计” 单元格使用了colspan属性以占据3列。这是 <thead> 、<tbody> 和 <tfoot> 配合使用的一个很好的例子。

总结

      <thead></thead> 标签是HTML中用于定义数据表格头部的标签。表格头部指的是表格中所有行的第一行。<thead> 标签可以和 <tbody> 以及 <tfoot> 标签一起配合使用，让表格的DOM结构更加明确和合理。<thead> 标签并不会实现某种特殊效果，同时在表格样式上也没有特别的限制。<thead> 标签可以通过设置class属性和其他的HTML标签一起使用，以添加新的样式信息或者将多个表格拼接为一个更大的表格。在表格头部，通过设置rowspan属性和colspan属性，可以创建跨越多行或多列的表格单元格。