HTML的th标签


HTML th标签

<th> (Table Header,表头)标签定义HTML中表格中的表头单元格。表头通常显示在表格中第一行或第一列。

语法

<table>
  <tr>
    <th>表头单元格</th>
    <th>表头单元格</th>
  </tr>
  <tr>
    <td>数据单元格</td>
    <td>数据单元格</td>
  </tr>
</table>

属性

<th> 元素支持以下标准属性:accesskeyclassheadersscopestyletitle

accesskey

accesskey属性定义快捷键,以激活元素。具有相同accesskey的元素将根据流程顺序激活。

<th accesskey="2">Apple</th>

class

class属性定义元素的类名(classname)。

<th class="header">Apple</th>

headers

headers属性标识与此单元格相关的任意标题元素。如果元素通过此属性与其它元素关联,那么aria-describedby属性应向用户传达此信息。

<table>
  <thead>
    <tr>
      <th id="Name">Name</th>
      <th id="Position">Position</th>
      <th id="Office" headers="Location">Office</th>
      <th id="Location">Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="Name">Thomas</td>
      <td headers="Position">Developer</td>
      <td headers="Office">New York</td>
      <td headers="Location">USA</td>
    </tr>
    <tr>
      <td headers="Name">Emily</td>
      <td headers="Position">Designer</td>
      <td headers="Office">Berlin</td>
      <td headers="Location">Germany</td>
    </tr>
  </tbody>
</table>

scope

scope属性定义单元格的范围。

row: 允许列处理程序忽略只有在单独的行中才有意义的元素,可以帮助屏幕阅读器用户理解表格的结构。

col: 允许行处理程序忽略只有在单独列中才有意义的元素,可以帮助屏幕阅读器用户理解表格的结构。

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Position</th>
      <th scope="col">Office</th>
      <th scope="col">Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Thomas</th>
      <td>Developer</td>
      <td>New York</td>
      <td>USA</td>
    </tr>
    <tr>
      <th scope="row">Emily</th>
      <td>Designer</td>
      <td>Berlin</td>
      <td>Germany</td>
    </tr>
  </tbody>
</table>

style

style属性定义元素的行内样式(inline style)。

<th style="background-color: #4CAF50;">Apple</th>

title

title属性定义有关元素的额外信息(可查看提示信息)。

<th title="A type of fruit.">Apple</th>

示例

<table>
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </tbody>
</table>

总结

HTML <th> 标签定义表格的表头单元格。可以使用其中的属性和元素来设置表头的样式和行为。在使用<th> 标签的时候,我们通常会搭配使用 <thead><tbody><tfoot> 标签来分组数据。这些标签的加入可以增加表格的可读性,提高用户体验。