HTML - <thead> 標籤

HTML <thead> 標籤用於對 HTML 表格的表頭內容進行分組。它與<tbody> 和 <tfoot> 元素一起使用，以指定表格的各個部分。

<thead> 標籤應作為 <table> 元素的子元素使用，位於任何 <tbody>、<tfoot> 和 <tr> 元素之前，以及任何 <caption> 和 <colgroup> 元素之後。瀏覽器可以使用這些元素來實現表格主體獨立於表頭和表尾進行滾動。

語法

<thead>
   ...
</thead>

屬性

HTML tfoot 標籤支援 HTML 的全域性和事件屬性。以下屬性已棄用，應使用 CSS 屬性代替。

屬性	值	描述
align	left right center justify	指定文字內容的對齊方式（已棄用）。
bgcolor	color	指定每列單元格的背景顏色（已棄用）。
char	character	指定每列單元格內容相對於某個字元的對齊方式（已棄用）。
charoff	number	指定每列單元格內容相對於由 char 屬性指定的對齊字元的偏移字元數（已棄用）。
valign	baseline bottom middle top	指定每列單元格的垂直對齊方式（已棄用）。

HTML thead 標籤示例

以下示例將演示 thead 標籤的用法，包括何時何地以及如何使用 thead 標籤在 HTML 中建立表頭。

在表格中建立表頭

讓我們來看下面的示例，我們將使用 <thead> 標籤。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.5px solid #DE3163;
      }
   </style>
<body>
   <table>
      <thead>
         <tr>
            <th>Subjects</th>
            <th>Marks</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>1A</td>
            <td>72</td>
         </tr>
         <tr>
            <td>1B</td>
            <td>74</td>
         </tr>
         <tr>
            <td>2B</td>
            <td>73</td>
         </tr>
      </tbody>
      <tfoot>
         <tr>
            <td>Total</td>
            <td>219</td>
         </tr>
      </tfoot>
   </table>
</body>
</html>

表格樣式

考慮另一種情況，我們將使用 CSS 對 <thead>、<tbody> 和 <tfoot> 進行樣式設定。

<!DOCTYPE html>
<html>
   <style>
      thead {
         color: #6C3483;
      }
      tbody {
         color: #196F3D;
      }
      tfoot {
         color: #DE3163;
      }
      table,
      th,
      td {
         border: 1.5px solid #5DADE2;
      }
   </style>
<body>
   <table>
      <thead>
         <tr>
            <th>Items</th>
            <th>Price</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>5Star</td>
            <td>$20</td>
         </tr>
         <tr>
            <td>KitKat</td>
            <td>$25</td>
         </tr>
         <tr>
            <td>MilkyBar</td>
            <td>$10</td>
         </tr>
      </tbody>
      <tfoot>
         <tr>
            <td>Total Bill</td>
            <td>$55</td>
         </tr>
      </tfoot>
   </table>
</body>
</html>

對齊表頭內容

以下示例將使用 CSS 將 <thead> 標籤內的內容右對齊。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.5px solid #DE3163;
      }
   </style>
<body>
   <table style="width:100%">
      <thead style="text-align:right">
         <tr>
            <th>Employees</th>
            <th>Age</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Ram</td>
            <td>23</td>
         </tr>
         <tr>
            <td>Raju</td>
            <td>22</td>
         </tr>
         <tr>
            <td>Maya</td>
            <td>24</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

表頭內容的垂直對齊

在下面的示例中，我們將使用 CSS vertical-align 屬性來對齊 <thead> 標籤內的內容。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.5px solid #A569BD;
      }
   </style>
<body>
   <table style="width:50%">
      <thead style="vertical-align:middle">
         <tr style="height:50px">
            <th>Cars</th>
            <th>Countries</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Maserati</td>
            <td>Italy</td>
         </tr>
         <tr>
            <td>Porsche</td>
            <td>Germany</td>
         </tr>
         <tr>
            <td>Dodge</td>
            <td>US</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

支援的瀏覽器

標籤
thead	是	是	是	是	是

html_tags_reference.htm

列印頁面