<col>: 表格列元素

試一試

<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

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

已棄用屬性

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

align 已棄用

指定每個列單元格的水平對齊方式。可能的列舉值為 left、center、right、justify 和 char。如果支援，char 值會根據 char 屬性中定義的字元和 charoff 屬性定義的偏移量對文字內容進行對齊。請注意，此屬性會覆蓋其 <colgroup> 父元素中指定的 align。請改用 <td> 和 <th> 元素上的 text-align CSS 屬性，因為此屬性已棄用。

注意：在 <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 已棄用

指定每個列單元格的垂直對齊方式。可能的列舉值為 baseline、bottom、middle 和 top。請注意，此屬性會覆蓋其 <colgroup> 父元素中指定的 valign。請改用 <td> 和 <th> 元素上的 vertical-align CSS 屬性，因為此屬性已棄用。

注意：在 <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 的其他值無效。
  • width：width 屬性定義了列的最小寬度，就像設定了 min-width 一樣。

示例

請參閱 <table> 以獲取一個完整的表格示例，其中介紹了常見的標準和最佳實踐。

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

HTML

一個 <colgroup> 元素為基本表格提供了結構，建立了一個隱式列組。三個 <col> 元素包含在 <colgroup> 中，建立了三個可樣式化的列。span 屬性指定每個 <col> 應跨越的表格列數（省略時預設為 1），從而使屬效能夠在每個 <col> 中的列之間共享。

<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 屬性，為列提供背景顏色並對齊單元格內容。

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

結果

技術摘要

規範

瀏覽器相容性

另見

• <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 偽類，用於選擇所需的列單元格