表格結構化

開放

7.1 標籤 <caption>

標籤 <caption><thead><tbody><tfoot> 用來改善 HTML 表格的結構化和語意標籤。它們幫助組織數據,使得表格對使用者和搜索引擎來說更容易理解和取得。

標籤 <caption>

標籤 <caption> 用來添加表格標題。它幫助描述表格的內容,讓使用者和搜索引擎更容易理解。

語法:

HTML
<table>
  <caption>表格標題</caption>
  <!-- 表格內容 -->
</table>

範例:

HTML
<table>
  <caption>表格標題</caption>
  <tr>
    <th>名稱</th>
    <th>成績</th>
  </tr>
  <tr>
    <td>Ivan</td>
    <td>90</td>
  </tr>
  <tr>
    <td>Maria</td>
    <td>85</td>
  </tr>
</table>

7.2 標籤 <thead>

標籤 <thead> 用來分組表格的標題行。它幫助將表格的標題與其主要內容邏輯上分開。

語法:

HTML
<table>
  <thead>
    <tr>
      <th>標題 1</th>
      <th>標題 2</th>
    </tr>
  </thead>
  <!-- 表格內容 -->
</table>

範例:

HTML
<table>
  <thead>
    <tr>
      <th>名稱</th>
      <th>成績</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ivan</td>
      <td>90</td>
    </tr>
    <tr>
      <td>Maria</td>
      <td>85</td>
    </tr>
  </tbody>
</table>

7.3 標籤 <tbody>

標籤 <tbody> 用來分組表格的主要內容。它幫助將主要內容與表格的標題和「底部」分開。

語法:

HTML
<table>
  <thead>
    <tr>
      <th>標題 1</th>
      <th>標題 2</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格內容 -->
  </tbody>
</table>

範例:

HTML
<table>
  <thead>
    <tr>
      <th>名稱</th>
      <th>成績</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ivan</td>
      <td>90</td>
    </tr>
    <tr>
      <td>Maria</td>
      <td>85</td>
    </tr>
  </tbody>
</table>

7.4 標籤 <tfoot>

標籤 <tfoot> 用來分組表格的「底部」行。它通常包含總結或彙總信息。

語法:

HTML
<table>
  <thead>
    <tr>
      <th>標題 1</th>
      <th>標題 2</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格內容 -->
  </tbody>
  <tfoot>
    <tr>
      <td>總結 1</td>
      <td>總結 2</td>
    </tr>
  </tfoot>
</table>

完整範例:

HTML
<table>
  <thead>
    <tr>
      <th>名稱</th>
      <th>成績</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ivan</td>
      <td>90</td>
    </tr>
    <tr>
      <td>Maria</td>
      <td>85</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>平均成績</td>
      <td>87.5</td>
    </tr>
  </tfoot>
</table>

記住這些其實非常簡單:

表格結構解釋

  • <table>: 整個表格的外部容器
  • <caption>: 表格標題,用來描述內容
  • <thead>: 分組表格的標題行
  • <tbody>: 分組表格的主要內容
  • <tfoot>: 分組表格的底部行

鞏固內容

讓我們創建一個包含所有學過標籤的表格並進行樣式設計。

HTML
<table>
  <caption>考試結果</caption>
  <thead>
    <tr>
      <th>名稱</th>
      <th>成績</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ivan</td>
      <td>91</td>
    </tr>
    <tr>
      <td>Maria</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Nina</td>
      <td>89</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>平均成績</td >
      <td>91.33</td>
    </tr>
  </tfoot>
</table>
CSS
table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 18px;
  text-align: left;
}

caption {
  caption-side: top;
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 10px;
}

th, td {
  padding: 12px 15px;
  border: 1px solid #ddd;
}

thead th {
  background-color: #f2f2f2;
}

tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

tfoot td {
  font-weight: bold;
  background-color: #f2f2f2;
}
1
任務
Frontend SELF TW,  等級 5課堂 2
上鎖
含有 <caption> 的標題
含有 <caption> 的標題
1
任務
Frontend SELF TW,  等級 5課堂 2
上鎖
表格結構
表格結構
留言
  • 受歡迎
你必須登入才能留言
此頁面尚無留言