Colgroup標籤詳解

一、hgroup標籤

HTML5引入了hgroup標籤，它可以將一組標題（比如h1~h6）組織在一起，並用作文檔或者區域級別的標題。hgroup標籤可以嵌套，第一個h1~h6標籤表示最高層級標題，其餘的則作為次級標題。

代碼示例：

<hgroup>
  <h1>This is the main heading</h1>
  <h2>This is a subheading</h2>
</hgroup>

二、colgroup用法

colgroup標籤定義表格列的組合，並且用於向表格中應用一系列屬性。colgroup標籤的應用增強了可訪問性和可維護性。在使用colgroup標籤時，需要有一個父標籤`table`，以及一個或多個子標籤`col`。

代碼示例：

<table>
  <colgroup>
    <col span="2" style="background-color:yellow">
    <col style="background-color:red">
  </colgroup>
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Money spent</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
    <td>$50</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
    <td>$90</td>
  </tr>
</table>

三、col元素詳解

col元素為表格列定義樣式信息，比如對背景色、表格寬度、列寬進行定義。在定義表格列的時候可以使用如下的屬性：

• span：列組合計數。
• width：定義列寬。
• align：定義列中數據的對齊方式。
• bgcolor：定義列背景色。

代碼示例：

<table>
  <colgroup>
    <col span="2" style="background-color:yellow">
    <col style="background-color:red">
  </colgroup>
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Money spent</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
    <td>$50</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
    <td>$90</td>
  </tr>
</table>

四、colgroup標籤的應用案例

下面是一個表格的代碼，在沒有使用colgroup標籤的情況下，對表格各列的樣式定義散落在各處，代碼難以維護，且存在代碼冗餘的問題。在使用colgroup標籤後，代碼得以簡化，樣式定義規整，提高了可維護性和可讀性。

沒有使用colgroup標籤的代碼：

<table border="1" cellpadding="2" cellspacing="0" width="800">
  <thead>
    <tr height="40">
      <th colspan="2">常用篩選規則名錄</th>
    </tr>
  </thead>
  <tbody>
    <tr height="30">
      <th align="center">篩選步驟</th>
      <th align="center">篩選規則</th>
    </tr>
    <tr height="30">
      <td align="center">第1步</td>
      <td align="center">內容1</td>
    </tr>
    <tr height="30">
      <td align="center">第2步</td>
      <td align="center">內容2</td>
    </tr>
    <tr height="30">
      <td align="center">第3步</td>
      <td align="center">內容3</td>
    </tr>
  </tbody>
</table>

使用colgroup標籤的代碼：

<table border="1" cellpadding="2" cellspacing="0" width="800">
  <colgroup>
    <col width="20%">
    <col width="80%">
  </colgroup>
  <thead>
    <tr height="40">
      <th colspan="2">常用篩選規則名錄</th>
    </tr>
  </thead>
  <tbody>
    <tr height="30">
      <td align="center">第1步</td>
      <td align="center">內容1</td>
    </tr>
    <tr height="30">
      <td align="center">第2步</td>
      <td align="center">內容2</td>
    </tr>
    <tr height="30">
      <td align="center">第3步</td>
      <td align="center">內容3</td>
    </tr>
  </tbody>
</table>