html th标签怎么用

1.什么是th标签

在网页开发中，表格是我们经常使用的一种元素。HTML表格是由（行）和（数据单元格）标签组成。但表格除了数据单元格之外，我们还需要一个用于定义表格头部的标签，这个标签就是标签。

th标签的作用：用于定义表格的表头单元格，表头单元格内容会自动居中，且加粗。实例代码如下：

<table>
  <tr>
    <th>Name</th>
    <th>Sex</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Tom</td>
    <td>Male</td>
    <td>25</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Lucy</td>
    <td>Female</td>
    <td>22</td>
    <td>London</td>
  </tr>
</table>

以上代码表示了一个简单的表格，第一行的每个单元格都用了标签，并且内容都被加粗了。

2.th标签的属性

th标签的属性：

colspan：合并列，表示单元格占据多少列；

rowspan：合并行，表示单元格占据多少行；

scope：当前单元格的行或列的作用范围（只能在表头标签中使用）。

2.1 colspan属性

colspan属性用于定义单元格跨列的数量，例如：

<table>
  <tr>
    <th>Name</th>
    <th colspan="2">Information</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Tom</td>
    <td>Male</td>
    <td>25</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Lucy</td>
    <td>Female</td>
    <td>22</td>
    <td>London</td>
  </tr>
</table>

以上代码表示了一个表格，第一行的第二个单元格使用了colspan="2"，表示这个单元格需要占据两列。这样，第二行中的信息单元格就可以分为两个单元格了。其效果如下：

2.2 rowspan属性

rowspan属性用于定义单元格跨行的数量，例如：

<table>
  <tr>
    <th>Name</th>
    <th>Sex</th>
    <th>Age</th>
    <th rowspan="2">City</th>
  </tr>
  <tr>
    <td>Tom</td>
    <td>Male</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Lucy</td>
    <td>Female</td>
    <td>22</td>
    <td>London</td>
  </tr>
</table>

以上代码表示了一个表格，第一行包含了4个单元格，其中第四个单元格使用了rowspan="2"，表示这个单元格需要跨2行。这样，第二行中的信息单元格就可以合并到第三行了。其效果如下：

2.3 scope属性

scope属性用于定义标签的作用范围。常用的取值有："row"（表示当前单元格是一行的表头）和"col"（表示当前单元格是一列的表头），如下所示：

<table>
  <tr>
    <th scope="row">Name</th>
    <td>Tom</td>
  </tr>
  <tr>
    <th scope="row">Sex</th>
    <td>Male</td>
  </tr>
  <tr>
    <th scope="row">Age</th>
    <td>25</td>
  </tr>
  <tr>
    <th scope="col">Information</th>
    <td>New York</td>
  </tr>
</table>

以上代码表示了一个表格，第一列中的每个单元格都使用了scope="row"，表示这个单元格的作用范围是一整行；第二列中的第一个单元格使用了scope="col"，表示这个单元格的作用范围是一整列。其效果如下：

3.th标签和CSS

th标签可以和CSS结合使用，改变表格头部的样式。例如：

<style>
  th {
    background-color: #dddddd;
    color: #333333;
    font-weight: bold;
    text-align: center;
  }
</style>
<table>
  <tr>
    <th>Name</th>
    <th>Sex</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Tom</td>
    <td>Male</td>
    <td>25</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Lucy</td>
    <td>Female</td>
    <td>22</td>
    <td>London</td>
  </tr>
</table>

以上代码表示了一个表格，将th标签的背景色改为了淡灰色，文字颜色改为了黑色，字体加粗，并居中对齐。其效果如下：

4.th标签的注意事项

th标签只能用在表格的标签中；

th标签是必须指定scope属性，因为它可能无法确定表头应用于每行还是每列。

5.结语

在表格中，th标签是一个非常重要的元素，用于定义表头单元格。除了用于普通的数据表格外，还可以用来制作日历等复杂的表格。掌握th标签的使用方法，对于网站开发是非常有帮助的。