<colgroup>: 表格列組元素

<colgroup> HTML 元素定義表格中的列組。

此元素包含 全域性屬性。

span

指定 <colgroup> 元素所跨越的連續列數。該值必須是大於零的正整數。如果不存在，其預設值為 1。

以下屬性已棄用，不應再使用。為了更新現有程式碼和歷史記錄，我們在下面記錄了這些屬性。

align 已棄用

指定每個列組單元格的水平對齊方式。可能的列舉值是left、center、right、justify和char。當支援時，char值將文字內容對齊到char屬性中定義的字元和charoff屬性中定義的偏移量。請注意，後代<col>元素可以使用自己的align屬性覆蓋此值。請改用text-align CSS 屬性作用於<td>和<th>元素，因為此屬性已棄用。

注意：在<colgroup>元素上設定text-align無效，因為<td>和<th>元素不是<colgroup>元素的後代，因此它們不會從它繼承。

如果表格不使用colspan屬性，請對每列使用td:nth-of-type(an+b) CSS 選擇器，其中a是表格中列的總數，b是表格中列的序號位置，例如：td:nth-of-type(7n+2) { text-align: right; }將第二列單元格右對齊。

如果表格使用colspan屬性，則可以透過組合適當的 CSS 屬性選擇器（如[colspan=n]）來實現效果，但這並不簡單。

bgcolor 已棄用

定義每個列組單元格的背景顏色。該值是一個 HTML 顏色；可以是6 位十六進位制 RGB 程式碼（以 '#' 為字首），也可以是顏色關鍵字。不支援其他 CSS <color>值。請改用background-color CSS 屬性，因為此屬性已棄用。

char 已棄用

什麼也不做。它最初旨在指定內容相對於每個列組單元格的字元的對齊方式。此屬性的典型值包括嘗試對齊數字或貨幣值的句號（.）。如果align未設定為char，則忽略此屬性，但它仍將用作align的預設值<col>屬於此列組的元素。

charoff 已棄用

什麼也不做。它最初旨在指定列組單元格內容相對於由char屬性指定的對齊字元的偏移字元數。

valign 已棄用

指定每個列組單元格的垂直對齊方式。可能的列舉值是baseline、bottom、middle和top。請注意，後代<col>元素可以使用自己的valign屬性覆蓋此值。請改用vertical-align CSS 屬性作用於<td>和<th>元素，因為此屬性已棄用。

注意：在<colgroup>元素上設定vertical-align無效，因為<td>和<th>元素不是<colgroup>元素的後代，因此它們不會從它繼承。

如果表格不使用colspan屬性，請對每列使用td:nth-of-type() CSS 選擇器，例如：td:nth-of-type(2) { vertical-align: middle; }將第二列單元格垂直居中。

如果表格使用colspan屬性，則可以透過組合適當的 CSS 屬性選擇器（如[colspan=n]）來實現效果，但這並不簡單。

width 已棄用

為當前列組中的每列指定預設寬度。除了標準的畫素和百分比值外，此屬性還可以採用特殊的0*形式，這意味著應跨越的每一列的寬度都應是容納列內容所需的最小寬度。也可以使用諸如5*之類的相對寬度。請注意，後代<col>元素可以使用自己的width屬性覆蓋此值。請改用width CSS 屬性，因為此屬性已棄用。

• <colgroup>應出現在<table>中，在任何<caption>元素（如果使用）之後，但在任何<thead>、<tbody>、<tfoot>和<tr>元素之前。
• 只有有限的 CSS 屬性會影響<colgroup>
  • background ：各種background屬性將設定列組內單元格的背景。由於列組背景色繪製在表格之上，但在應用於列的背景色（<col>）、行組（<thead>、<tbody>和<tfoot>）、行（<tr>）和單個單元格（<th>和<td>）之後，應用於表格列組的背景只有在繪製在它們上面的每一層都具有透明背景時才可見。
  • border：各種border屬性都適用，但僅當<table>設定為border-collapse: collapse時適用。
  • visibility：列組的collapse值導致該列組中所有列的單元格不渲染，並且跨越到其他列的單元格被剪下。這些列組中這些列本來佔用的空間被刪除。但是，其他列的大小仍按列組中已摺疊的列的單元格存在進行計算。visibility的其他值無效。
  • width：width屬性定義列組內列的最小寬度，如同設定了min-width一樣。

請參閱<table>以獲取完整的表格示例，其中介紹了常見的標準和最佳實踐。

此示例演示了七列表格，分為兩個跨越多個列的<colgroup>元素。

使用兩個<colgroup>元素透過建立列組來構建基本表格。每個列組中的列數由span屬性指定。

<table>
  <caption>
    Personal weekly activities
  </caption>
  <colgroup span="5" class="weekdays"></colgroup>
  <colgroup span="2" class="weekend"></colgroup>
  <tr>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
    <th>Thu</th>
    <th>Fri</th>
    <th>Sat</th>
    <th>Sun</th>
  </tr>
  <tr>
    <td>Clean room</td>
    <td>Football training</td>
    <td>Dance Course</td>
    <td>History Class</td>
    <td>Buy drinks</td>
    <td>Study hour</td>
    <td>Free time</td>
  </tr>
  <tr>
    <td>Yoga</td>
    <td>Chess Club</td>
    <td>Meet friends</td>
    <td>Gymnastics</td>
    <td>Birthday party</td>
    <td>Fishing trip</td>
    <td>Free time</td>
  </tr>
</table>

可以使用分組的列來使用 CSS 視覺突出顯示結構

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 6px;
  text-align: center;
}

.weekdays {
  background-color: #d7d9f2;
}

.weekend {
  background-color: #ffe8d4;
}

table {
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

結果

• 瞭解：HTML 表格
• <caption>、<col>、<table>、<tbody>、<td>、<tfoot>、<th>、<thead>、<tr>：其他與表格相關的元素
• background-color：CSS 屬性，用於設定每個列組單元格的背景顏色
• border：CSS 屬性，用於控制列組單元格的邊框
• text-align：CSS 屬性，用於水平對齊每個列組單元格內容
• vertical-align：CSS 屬性，用於垂直對齊每個列組單元格內容
• visibility：CSS 屬性，用於隱藏（或顯示）列組的單元格
• width：CSS 屬性，用於控制列組中每列的預設寬度
• :nth-of-type、:first-of-type、:last-of-type：CSS 偽類，用於選擇所需的列單元格