<colgroup>：表格欄群組元素

<colgroup> HTML 中定義表格內的一組欄的元素。

嘗試一下

屬性

此元素包含全域屬性 (en-US)。

span

指定<colgroup>元素跨越的連續欄數。該值必須是大於零的正整數。如果沒有指定，預設值為 1。

備註： 如果在 <colgroup> 內有一個或多個 <col> 元素，則不允許使用 span 屬性。

已棄用屬性

以下屬性已棄用，不應使用。此處僅將其記錄，以供更新現有代碼和僅供歷史興趣時參考。

align

指定每個欄群組儲存格的水平對齊方式。可能的 enumerated (en-US) 值包括 left、center、right、justify 和 char。當支援時，char 值將文字內容對齊到 char 屬性中定義的字元和 charoff 屬性中定義的偏移。請注意，後代<col>元素可能會使用其自己的 align 屬性覆蓋此值。請改用 text-align (en-US) CSS 屬性應用於 <td> (en-US) 和 <th> (en-US) 元素，因為此屬性已棄用。

備註： 在 <colgroup> 元素上設置 text-align 沒有效果，因為 <td> (en-US) 和 <th> (en-US) 元素不是 <colgroup> 元素的後代，因此不會繼承該屬性。

如果表格不使用 colspan (en-US) 屬性，可以使用 td:nth-of-type(an+b) CSS 選擇器進行每欄的對齊，其中 a 是表格中欄的總數，b 是欄在表格中的序位位置，例如 td:nth-of-type(7n+2) { text-align: right; } 以使第二欄儲存格向右對齊。

如果表格使用了 colspan (en-US) 屬性，可以通過組合適當的 CSS 屬性選擇器來達到效果，例如像 [colspan=n]，儘管這並不簡單。

bgcolor

定義每個欄群組儲存格的背景顏色。該值是一個 HTML 顏色；可以是 6 位十六進制 RGB 碼 (en-US)，前綴為「#」，或者是一個顏色關鍵字 (en-US)。不支援其他 CSS <color> (en-US) 值。請改用 background-color CSS 屬性，因為此屬性已棄用。

char

指定每個欄群組儲存格內容與字符的對齊方式。這個屬性的典型值包括當試圖對齊數字或貨幣值時使用的句點（.）。如果 align 未設置為 char，則忽略此屬性，但它仍將作為屬於此欄群組的 <col> 元素的 align 的默認值使用。

charoff

指定要從 char 屬性指定的對齊字符偏移的字符數。

valign

指定每個欄群組儲存格的垂直對齊方式。可能的列舉 (en-US)值包括 baseline、bottom、middle 和 top。請注意，後代 <col> 元素可能會使用其自己的 valign 屬性覆蓋此值。請改用 vertical-align (en-US) CSS 屬性應用於 <td> (en-US) 和 <th> (en-US) 元素，因為此屬性已棄用。

備註： 在 <colgroup> 元素上設置 vertical-align 沒有效果，因為 <td> (en-US) 和 <th> (en-US) 元素不是 <colgroup> 元素的後代，因此不會繼承該屬性。

如果表格不使用 colspan (en-US) 屬性，可以使用 td:nth-of-type() (en-US) CSS 選擇器進行每欄的對齊，例如 td:nth-of-type(2) { vertical-align: middle; } 使第二欄儲存格垂直居中。

如果表格使用了 colspan (en-US) 屬性，可以通過組合適當的 CSS 屬性選擇器來達到效果，例如像 [colspan=n]，儘管這並不簡單。

width

指定當前欄群組中每個欄的默認寬度。除了標準的像素和百分比值外，此屬性還可以採用特殊形式 0*，表示每個跨越的欄的寬度應該是容納欄內容所需的最小寬度。也可以使用相對寬度，如 5*。請注意，後代 <col> 元素可能會使用其自己的 width 屬性覆蓋此值。請改用 width CSS屬性，因為此屬性已棄用。

使用說明

範例

請參見 <table> 以查看一個完整的表格範例，介紹常見的標準和最佳實踐。

此範例演示了一個分成兩個 <colgroup> 元素的七欄表格，跨越多個欄。

HTML

使用兩個 <colgroup> 元素來結構化一個基本表格，創建欄群組。每個欄群組中的欄數由 span 屬性指定。

html
<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

可以使用分組的欄來在 CSS 中視覺上突出顯示結構：

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;
}

結果

技術摘要

內容類型 無。
允許的內容 如果存在 span 屬性：無。
如果未指定該屬性：零個或多個 <col> 元素。
標籤省略 如果具有 <col> 元素作為其第一個子元素，並且未在其前面有被省略的 <colgroup> 結束標籤，則可以省略開始標籤。
如果未在其後跟隨空格或註釋，則可以省略結束標籤。
允許的父元素 一個 <table> 元素。<colgroup> 必須出現在任何 <caption> 元素之後，但在任何 <thead> (en-US)、<tbody> (en-US)、<tfoot> (en-US) 和 <tr> (en-US) 元素之前。
隱含的 ARIA 角色 沒有相對應的角色
允許的 ARIA 角色 不允許 role
DOM 介面 HTMLTableColElement (en-US)

規範

Specification
HTML Standard
# the-colgroup-element

瀏覽器相容性

BCD tables only load in the browser

參見