1. Web
  2. HTML
  3. 參考
  4. 元素
  5. <colgroup>

<colgroup>: 表格列組元素

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

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

試一試

<table>
  <caption>
    Superheros and sidekicks
  </caption>
  <colgroup>
    <col />
    <col span="2" class="batman" />
    <col span="2" class="flash" />
  </colgroup>
  <tr>
    <td></td>
    <th scope="col">Batman</th>
    <th scope="col">Robin</th>
    <th scope="col">The Flash</th>
    <th scope="col">Kid Flash</th>
  </tr>
  <tr>
    <th scope="row">Skill</th>
    <td>Smarts, strong</td>
    <td>Dex, acrobat</td>
    <td>Super speed</td>
    <td>Super speed</td>
  </tr>
</table>

.batman {
  background-color: #d7d9f2;
}

.flash {
  background-color: #ffe8d4;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

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

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

td {
  text-align: center;
}

屬性

此元素包含全域性屬性。

span

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

注意： 如果 <colgroup> 中含有一個或多個 <col> 元素，則不允許使用 span 屬性。

已棄用屬性

以下屬性已棄用，不應使用。它們僅在更新現有程式碼時作為參考和出於歷史興趣而在此處記錄。

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，則此屬性將被忽略，儘管它仍將用作此列組中 <col> 元素的 align 的預設值。

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> 元素。

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>、<tbody>、<tfoot> 和 <tr> 元素之前。
隱式 ARIA 角色 沒有對應的角色
允許的 ARIA 角色 不允許 role
DOM 介面 HTMLTableColElement

規範

規範
HTML
# the-colgroup-element

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面由 MDN 貢獻者 上次修改於 。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.