<colgroup>:表格欄群組元素

<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 已棄用

指定每個欄群組儲存格的水平對齊方式。可能的 enumerated 值包括 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 屬性指定。

<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 中視覺上突出顯示結構:

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 偽類來選擇所需的欄儲存格