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

列印頁面