HTML的th标签
HTML th标签
<th>
(Table Header,表头)标签定义HTML中表格中的表头单元格。表头通常显示在表格中第一行或第一列。
语法
<table>
<tr>
<th>表头单元格</th>
<th>表头单元格</th>
</tr>
<tr>
<td>数据单元格</td>
<td>数据单元格</td>
</tr>
</table>
属性
<th>
元素支持以下标准属性:accesskey
、class
、headers
、scope
、style
和 title
。
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>
标签来分组数据。这些标签的加入可以增加表格的可读性,提高用户体验。