HTML - <th> 标签

HTML <th> 标签用于指定 HTML 表格的表头单元格。它需要用作 <tr> 的子元素，而 <tr> 本身则位于 <table> 标签中。

<td> 标签用于定义标准数据单元格。虽然浏览器默认会将表头单元格显示为粗体并居中，但您可以使用 CSS 属性修改此行为。<th> 标签可以包含 HTML 文档正文中可以使用的任何 HTML 元素，包括文本、图像、表单、链接等等。表格的大小会根据其内容的大小自动调整。

语法

<th>
   ....
</th>

属性

HTML th 标签支持 HTML 的全局和事件属性。也接受一些特定的属性，如下所列。

属性	值	描述
abbr	文本	指定表头单元格中内容的缩写
colspan	数字	指定列数。
headers	表头 ID	指定一个或多个与单元格相关的表头单元格。
rowspan	数字	指定单元格应占据的行数。
scope	col colgroup row rowgroup	指定表头单元格是列、行或列或行组的表头。

HTML th 标签示例

下面的示例将说明 th 标签的使用。在哪里、何时以及如何使用 th 标签。

创建两个表头单元格

让我们考虑以下示例，我们将使用两个表头单元格创建表格。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 2px solid #D2B4DE;
      }
   </style>
<body>
   <table>
      <tr>
         <th>Name</th>
         <th>Age</th>
      </tr>
      <tr>
         <td>Maya</td>
         <td>23</td>
      </tr>
      <tr>
         <td>Ravi</td>
         <td>22</td>
      </tr>
      <tr>
         <td>Ram</td>
         <td>21</td>
      </tr>
   </table>
</body>
</html>

在表头单元格上添加背景颜色

考虑另一种情况，我们将向表头单元格应用背景颜色。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 2px solid #5B2C6F;
      }
   </style>
<body>
   <table>
      <tr>
         <th style="background-color:#D6EAF8 ">Students</th>
         <th style="background-color:#D5F5E3">Marks</th>
      </tr>
      <tr>
         <td>Akhil</td>
         <td>95</td>
      </tr>
      <tr>
         <td>Ravi</td>
         <td>96</td>
      </tr>
      <tr>
         <td>Raju</td>
         <td>99</td>
      </tr>
   </table>
</body>
</html>

对齐表头单元格内容

在以下示例中，我们将使用 CSS 将 <th> 对齐到右侧。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.5px solid #DE3163;
      }
   </style>
<body>
   <table style="width:100%">
      <tr>
         <th style="text-align:right">Car</th>
         <th style="text-align:right">Model</th>
      </tr>
      <tr>
         <td>RS7</td>
         <td>2023</td>
      </tr>
      <tr>
         <td>AUDI</td>
         <td>2017</td>
      </tr>
      <tr>
         <td>BENZ</td>
         <td>2014</td>
      </tr>
   </table>
</body>
</html>

设置表头单元格宽度

以下是一个示例，我们将使用 CSS 设置 <th> 标签的宽度。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 2px solid #BB8FCE;
      }
   </style>
<body>
   <table style="width:50%">
      <tr>
         <th style="width:25%">Name</th>
         <th style="width:25%">Countrty</th>
      </tr>
      <tr>
         <td>Ram</td>
         <td>India</td>
      </tr>
      <tr>
         <td>Maya</td>
         <td>Greece</td>
      </tr>
      <tr>
         <td>Mamboo</td>
         <td>Nigeria</td>
      </tr>
   </table>
</body>
</html>

支持的浏览器

标签
th	是	是	是	是	是

html_tags_reference.htm

打印页面