<col>: 表格列元素

基線廣泛可用

此功能已發展成熟，可以在許多裝置和瀏覽器版本中使用。它自 2015 年 7 月.

<col> HTML 元素定義一個或多個列，這些列位於由其父元素 <colgroup> 元素表示的列組中。<col> 元素僅在沒有定義 span 屬性的 <colgroup> 元素的子元素中有效。

試一試

屬性

此元素包含全域性屬性。

span: 指定 <col> 元素跨越的連續列數。該值必須為大於零的正整數。如果未提供，則其預設值為 1。

已棄用屬性

以下屬性已棄用，不應再使用。為了更新現有程式碼以及出於歷史參考目的，它們在下面有記錄。

align 已棄用: 指定每個列單元格的水平對齊方式。可能的列舉值為 left、center、right、justify 和 char。在支援的情況下，char 值將文字內容與 char 屬性中定義的字元對齊，並與 charoff 屬性定義的偏移量對齊。請注意，此屬性會覆蓋其 align 的指定 <colgroup> 父元素。使用 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，則忽略此屬性，但它仍將覆蓋其指定的 char 的 <colgroup> 父元素。
charoff 已棄用: 不執行任何操作。它最初用於指定列單元格內容與 char 屬性指定的對齊字元的偏移字元數。
valign 已棄用: 指定每個列單元格的垂直對齊方式。可能的列舉值為 baseline、bottom、middle 和 top。請注意，此屬性會覆蓋其指定的 valign 的 <colgroup> 父元素。使用 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*。請注意，此屬性會覆蓋其指定的 width 的 <colgroup> 父元素。使用 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 的其他值不會產生任何效果。
- width：width 屬性為該列定義最小寬度，就像設定了 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;
}

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

結果

技術總結

內容類別	無。
允許的內容	無；它是一個空元素。
標籤省略	必須有開始標籤，並且不能有結束標籤。
允許的父級	僅 `<colgroup>`，儘管它可以隱式定義，因為它的開始標籤不是必需的。`<colgroup>` 必須沒有 `span` 屬性。
隱式 ARIA 角色	沒有相應的角色
允許的 ARIA 角色	不允許 `role`
DOM 介面	`HTMLTableColElement`

規範

規範
HTML 標準 # the-col-element

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參閱

瞭解：HTML 表格
<caption>、<colgroup>、<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 偽類