<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 伪类