<col>:表格欄元素

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<col> HTML 元素用於定義由其父元素 <colgroup> 表示的欄組中的一個或多個欄。<col> 元素僅在未定義 span 屬性的 <colgroup> 元素的情況下作為其子元素有效。

嘗試一下

屬性

此元素包括全域屬性

span

指定 <col> 元素橫跨的連續欄數。該值必須是大於零的正整數。如果未指定,則其默認值為 1

已棄用的屬性

以下屬性已棄用,不應使用。在更新現有代碼時和僅出於歷史興趣,以下是這些屬性的文檔。

align 已棄用

指定每個欄單元格的水平對齊方式。可能的 enumerated 值包括 leftcenterrightjustifychar。當支持時,char 值將文本內容對齊到 char 屬性中定義的字符,並在 charoff 屬性定義的偏移量上進行對齊。請注意,此屬性會覆蓋其 <colgroup> 父元素的指定 align。請改用 text-align CSS 屬性應用於 <td><th> 元素上,因為此屬性已棄用。

備註:<col> 元素上設置 text-align 不起作用,因為 <col> 沒有後代元素,因此沒有元素繼承自它。

如果表格未使用 colspan 屬性,則可以使用 td:nth-of-type(an+b) CSS 選擇器。將 a 設置為零,將 b 設置為表格中欄的位置,例如 td:nth-of-type(2) { text-align: right; } 可以使第二欄單元格右對齊。

如果表格使用了 colspan 屬性,則可以通過組合適當的 CSS 屬性選擇器,如 [colspan=n] 來達到效果,雖然這不是一個簡單的過程。

bgcolor 已棄用

定義每個欄單元格的背景顏色。該值是一個 HTML 顏色,可以是一個以『#』為前綴的 6 位十六進制 RGB 代碼,或者是一個 顏色關鍵字。不支持其他 CSS <color> 值。請改用 background-color CSS 屬性,因為此屬性已棄用。

char 已棄用

指定每個欄單元格的內容對齊到一個字符的方式。當將 align 未設置為 char 時,此屬性將被忽略,但仍將覆蓋其 <colgroup> 父元素的指定 char

charoff 已棄用

指定欄單元格內容從由 char 屬性指定的對齊字符的偏移量的字符數。

valign 已棄用

指定每個欄單元格的垂直對齊方式。可能的列舉值包括 baselinebottommiddletop。請注意,此屬性會覆蓋其 <colgroup> 父元素的指定 valign。請改用 vertical-align CSS 屬性應用於 <td><th> 元素上,因為此屬性已棄用。

備註:<col> 元素上設置 vertical-align 不起作用,因為 <col> 沒有後代元素,因此沒有元素繼承自它。

如果表格未使用 colspan 屬性,則可以使用 td:nth-of-type(an+b) CSS 選擇器。將 a 設置為零,將 b 設置為表格中欄的位置,例如 td:nth-of-type(2) { vertical-align: middle; } 可以使第二欄單元格垂直居中。

如果表格使用了 colspan 屬性,則可以通過組合適當的 CSS 屬性選擇器,如 [colspan=n] 來達到效果,雖然這不是一個簡單的過程。

width 已棄用

為每個欄指定默認寬度。除了標準像素和百分比值外,此屬性還可以採用特殊形式 0*,表示每個跨度的欄的寬度應該是足以容納欄內容的最小寬度。也可以使用相對寬度,如 5*。請注意,此屬性會覆蓋其 <colgroup> 父元素的指定 width。請改用 width CSS 屬性,因為此屬性已棄用。

使用注意事項

  • <col> 元素用於未定義 span 屬性的 <colgroup> 元素內。
  • <col> 元素不會將欄在結構上分組在一起,這是 <colgroup> 元素的作用。
  • 只有有限數量的 CSS 屬性會影響 <col>
    • background:各種 background 屬性將為欄內的單元格設置背景。由於欄背景顏色繪製在表格和欄組(<colgroup>)的頂部,但在應用於欄組(<thead><tbody><tfoot>)、欄(<tr>)和單元格(<th><td>)的背景色之前,因此只有在所有覆蓋它們頂部的層都具有透明背景時,才會看到應用於表欄的背景。
    • border:各種 border 屬性適用,但僅當 <table> 具有 border-collapse: collapse 設置時。
    • visibility:對於一欄,collapse 值導致該欄的所有單元格不被呈現,並且跨入其他欄的單元格被剪切。這些欄將佔用的空間被移除。但是,其他欄的大小仍然被計算,就好像摺疊欄中的單元格存在一樣。visibility 的其他值沒有效果。
    • widthwidth 屬性定義了欄的最小寬度,就像 min-width 被設置一樣。

範例

有關介紹常見標準和最佳實踐的完整表格範例,請參見 <table>

此示例演示了一個分為三個 <col> 元素的八欄表格。

HTML

一個 <colgroup> 元素提供了一個基本表格的結構,創建了一個隱式的單欄組。三個 <col> 元素包含在 <colgroup> 內,創建了三個可樣式化的欄。當省略時,span 屬性指定了每個 <col> 應跨越的表格欄數(默認為 1),從而使每個 <col> 中的屬性可以在其所跨越的欄中共享。

html
<table>
  <caption>
    Personal weekly activities
  </caption>
  <colgroup>
    <col />
    <col span="5" class="weekdays" />
    <col span="2" class="weekend" />
  </colgroup>
  <tr>
    <th>Period</th>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
    <th>Thu</th>
    <th>Fri</th>
    <th>Sat</th>
    <th>Sun</th>
  </tr>
  <tr>
    <th>a.m.</th>
    <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>
    <th>p.m.</th>
    <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 而不是已棄用的 HTML 屬性來為欄提供背景顏色並對齊單元格內容:

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

結果

技術摘要

內容類型 無。
允許的內容 無,這是一個置空元素
標籤省略 必須有開始標籤,不能有結束標籤。
允許的父元素 只能是 <colgroup>,雖然它可以被隱式定義,因為其開始標籤並不是必需的。<colgroup> 不得有 span 屬性。
隱含的 ARIA 角色 沒有相對應的角色
允許的 ARIA 角色 不允許 role
DOM 介面 HTMLTableColElement

規範

Specification
HTML
# the-col-element

瀏覽器相容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
col
align
Deprecated
char
Deprecated
charoff
Deprecated
span
valign
Deprecated
width
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Deprecated. Not for use in new websites.
See implementation notes.

參見