HTML 表格標題和說明

上一頁
下一頁

表格標題和說明

標題和說明用於表格內部，以結構化的格式組織和呈現資料。

表格標題是表格的重要組成部分，它為列提供標籤。 <th> (表格標題) 元素用於定義表格標題。

說明用於表格中，為表格提供標題或解釋。 <caption> 元素放置在開啟的表格標籤之後。

HTML Table Headers and Captions

<caption> 標籤在 HTML5 和 XHTML 中已棄用。這意味著它仍然被大多數網路瀏覽器支援，但不建議在新網頁中使用。如果您正在編寫新程式碼，則應改用 figure 和 figcaption 元素。figure 元素用於組合相關內容，figcaption 元素用於為內容提供說明。

<caption> 標籤在 HTML5 和 XHTML 中已棄用。這意味著它仍然被大多數網路瀏覽器支援，但不建議在新網頁中使用。如果您正在編寫新程式碼，則應改用 figure 和 figcaption 元素。figure 元素用於組合相關內容，figcaption 元素用於為內容提供說明。

建立表格標題和說明的語法

以下是為 HTML 表格建立標題和說明的語法

<table>
<caption>Description of table</caption>
<tr>
   <th>heading 1</th>
   <th>heading 2</th>
   <th>heading 3</th>
</tr>
</table>

為表格定義標題行

<th> 標籤用於表示表格標題，通常用於 <tr> (表格行) 元素內。與用於普通單元格的 <td> (表格資料) 標籤不同，<th> 保留用於標題。在大多數情況下，表格的第一行被指定為標題行。

示例

考慮一個簡單的 HTML 表格，其中包含“姓名”和“薪水”的標題

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML Table Header</title>
</head>

<body>
   <table border="1">
   <tr>
      <th>Name</th>
      <th>Salary</th>
   </tr>
   <tr>
      <td>Ramesh Raman</td>
      <td>5000</td>
   </tr>
   <tr>
      <td>Shabbir Hussein</td>
      <td>7000</td>
   </tr>
   </table>
</body>

</html>

表格標題樣式

表格標題樣式可以增強表格的視覺吸引力。CSS 可以應用於 <th> 元素以自定義其外觀。在下面的示例中，一個簡單的 CSS 樣式新增到 <style> 標籤（位於 <head> 部分）中，以修改表格標題的背景顏色和文字對齊方式。

示例

此示例演示如何使用 CSS 設定表格標題樣式

<!DOCTYPE html>
<html lang="en">

<head>
   <title>Styled HTML Table Header</title>
   <style>
   th {
      background-color: #4CAF50;
      color: white;
      text-align: left;
      padding: 8px;
   }
   </style>
</head>

<body>
   <table border="1">
   <tr>
      <th>Name</th>
      <th>Salary</th>
   </tr>
   <tr>
      <td>Ramesh Raman</td>
      <td>5000</td>
   </tr>
   <tr>
      <td>Shabbir Hussein</td>
      <td>7000</td>
   </tr>
   </table>
</body>

</html>

在任何行中使用標題單元格

雖然通常在表格的第一行使用 <th>，但您可以根據需要在任何行中使用它。這種靈活性允許建立具有多個標題行或在表格中穿插標題的複雜表格。

示例

在此示例中，我們正在建立第一行中的表格標題

<!DOCTYPE html>
<html lang="en">

<head>
   <title>Styled HTML Table Header</title>
   <style>
      th {
         background-color: #4CAF50;
         color: white;
         text-align: left;
         padding: 8px;
      }
   </style>
</head>

<body>
   <table border="1">
   <tr>
      <th>Name</th>
      <th>Salary</th>
   </tr>
   <tr>
      <td>Ramesh Raman</td>
      <td>5000</td>
   </tr>
   <tr>
      <th>Additional Details</th>
      <th>Specialization</th>
   </tr>
   <tr>
      <td>Technical Lead</td>
      <td>Web Development</td>
   </tr>
   </table>
</body>

</html>

使用 <thead> 元素的表格標題

<thead> 標籤用於對錶格標題單元格進行分組，以便可以將組合的 CSS 樣式應用於標題單元格。

<thead> 標籤通常放置在 <table> 元素內，幷包含一個或多個 <tr> 元素，每個元素又包含表示列標題的 <th> 元素。

示例

在此示例中，我們正在使用 thead 標籤建立表格標題

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML Table Header</title>
</head>

<body>
   <table border=1>
      <thead>
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
      </thead>
      <!-- Table body goes here -->
   </table>
</body>

</html>

定義多個標題行

您可以在 <thead> 中包含多個 <tr> 元素以建立多個標題行。當您的表格結構需要更復雜的標題層次結構時，這很有用。

示例

在此示例中，我們將兩行定義為表格標題

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML Table Header</title>
</head>

<body>
<table border=1>
   <thead>
      <tr>
         <th colspan=2>Tutorialspoint</th>
      </tr>
      <tr>
         <th>Role</th>
         <th>Experience</th>
      </tr>
   </thead>
   <tr>
      <td>Technical Lead</td>
      <td>5 Years</td>
   </tr>
   <tr>
      <td>Web Developer</td>
      <td>2 Years</td>
   </tr>
</table>
</body>

</html>

在 <thead> 內使用 '<colgroup>'

<colgroup> 標籤可用於 <thead> 中，以將一組列組合在一起，並將 CSS 樣式或屬性應用於整列。

示例

在此示例中，我們透過在 colgroup 標籤中對這兩列進行分組，將樣式應用於表格的前兩列。

<!DOCTYPE html>
<html lang="en">

<head>
   <style>
      .col1 {
         background-color: #f2f2f2;
      }
   </style>
</head>

<body>
   <h1>Table with colgroup</h1>
   <table border="1">
      <colgroup class="col1">
         <col  style="width: 150px;">
         <col  style="width: 200px;">
      </colgroup>
         <col  style="width: 150px;">
         <col  style="width: 100px;">
      <thead>
         <tr>
               <th>Product ID</th>
               <th>Product Name</th>
               <th>Category</th>
               <th>Price</th>
         </tr>
      </thead>
      <tbody>
         <tr>
               <td>1</td>
               <td>Smartphone</td>
               <td>Electronics</td>
               <td>$299.00</td>
         </tr>
         <tr>
               <td>2</td>
               <td>Office Chair</td>
               <td>Furniture</td>
               <td>$89.00</td>
         </tr>
         <tr>
               <td>3</td>
               <td>Laptop</td>
               <td>Electronics</td>
               <td>$999.00</td>
         </tr>
      </tbody>
   </table>
</body>

</html>

與 '<tfoot>' 和 '<tbody>' 組合

<thead> 標籤通常與 <tfoot> (表格腳註) 和 <tbody> (表格主體) 組合使用，以建立全面的表格結構。

示例

在以下程式碼中，表格結構將表頭、主體和腳註內容分開，以實現更好的組織。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML Table</title>
</head>

<body>
   <table border>
      <thead>
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
      </thead>

      <tbody>
         <tr>
            <td>value 1</td>
            <td>value 2</td>
            <td>value 3</td>
         </tr>
      </tbody>

      <tfoot>
         <tr>
            <td>Total</td>
            <td></td>
            <td></td>
         </tr>
      </tfoot>
   </table>
   <p>
      Footers are generally used to enter 
      sum of values of each column.
   </p>
</body>

</html>

<thead> 和 <th> 的區別

以下是突出顯示 <thead> 和 <th> 之間區別的幾點：

  • <thead> 標籤是用於分組標題內容的結構元素，而 <th> 是定義標題單元格的單元格級元素。
  • 通常在 <thead> 中使用 <th>，但 <th> 也可以在 <thead> 外使用，以在普通行中定義標題。
  • 包含 <thead> 是可選的；但是，使用它可以改善表格的語義結構。

向 HTML 表格新增說明

caption 標籤 將用作表格的標題或解釋，它顯示在表格頂部。

示例

在以下程式碼中，我們將在 HTML 表格頂部顯示一個說明

<!DOCTYPE html>

<html>
<head>
   <title>HTML Table Caption</title>
</head>

<body>
   <table border="1">
      <caption>This is the caption</caption>
      <tr>
         <td>row 1, column 1</td>
         <td>row 1, column 2</td>
      </tr>
      <tr>
         <td>row 2, column 1</td>
         <td>row 2, column 2</td>
      </tr>
   </table>
</body>

</html>

表格標題、主體和腳註

表格可以分為三個部分：標題、主體和腳註。標題和腳註類似於文字處理文件中的頁首和頁尾，每個頁面都保持不變，而主體是表格的主要內容持有者。

用於分隔表格標題、主體和腳註的三個元素是：

  • <thead> 標籤用於建立單獨的表格標題。
  • <tbody> 標籤用於指示表格的主體。
  • <tfoot> 標籤用於建立單獨的表格腳註。

表格可能包含多個 <tbody> 元素以指示不同的頁面或資料組。但值得注意的是，<thead> 和 <tfoot> 標籤應該出現在 <tbody> 之前

示例

在此示例中，我們正在建立一個包含表格標題、主體和腳註的 HTML 表格

<!DOCTYPE html>
<html>

<head>
   <title>HTML Table</title>
</head>

<body>
   <table border="1" width="100%">
      <thead>
         <tr>
            <th colspan="4">
               This is the head of the table
            </th>
         </tr>
      </thead>
      <tfoot>
         <tr>
            <td colspan="4">
               This is the foot of the table
            </td>
         </tr>
      </tfoot>
      <tbody>
         <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
         </tr>
         <tr>
            <td>Cell 5</td>
            <td>Cell 6</td>
            <td>Cell 7</td>
            <td>Cell 8</td>
         </tr>
      </tbody>
   </table>
</body>

</html>
列印頁面
上一頁
下一頁
廣告