<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> 元素跨越的连续列数。该值必须是大于 0 的正整数。如果不存在,其默认值为 1

弃用的属性

以下属性已被弃用,不应再使用。下文记录了这些属性,供更新现有代码时参考,也仅供参考。

align 已弃用

指定每列单元格的水平对齐方式。可能的枚举值有 leftcenterrightjustifychar。如果支持,char 值将根据 char 属性中定义的字符和 charoff 属性定义的偏移量对文本内容进行对齐。请注意,该属性会覆盖其 <colgroup> 父元素指定的 align。使用 text-align<th> 元素上的 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 已弃用

指定每列单元格的垂直对齐方式。可能的枚举值有 baselinebottommiddletop。请注意,该属性会覆盖其 <colgroup> 父元素指定的 valign。使用 vertical-align<th> 元素上的 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 属性代替,因为该属性已被弃用。

使用说明

  • 在没有 span 属性的 <colgroup> 元素中使用 <col> 元素。
  • <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> 元素为基本表格提供结构,创建一个隐式列组。在 <colgroup> 中包含三个 <col> 元素,从而创建三个可添加样式的列。span 属性指定了每个 <col> 应跨越的表格列数(省略时默认为 1),使属性可在每个 <col> 中的列之间共享。

html
<table>
  <caption>
    个人每周活动
  </caption>
  <colgroup>
    <col />
    <col span="5" class="weekdays" />
    <col span="2" class="weekend" />
  </colgroup>
  <tr>
    <th>时段</th>
    <th>周一</th>
    <th>周二</th>
    <th>周三</th>
    <th>周四</th>
    <th>周五</th>
    <th>周六</th>
    <th>周日</th>
  </tr>
  <tr>
    <th>上午</th>
    <td>打扫房间</td>
    <td>足球训练</td>
    <td>舞蹈课</td>
    <td>历史课</td>
    <td>买饮料</td>
    <td>自习</td>
    <td>自由时间</td>
  </tr>
  <tr>
    <th>下午</th>
    <td>瑜伽</td>
    <td>棋类俱乐部</td>
    <td>见朋友</td>
    <td>体操</td>
    <td>生日派对</td>
    <td>钓鱼之旅</td>
    <td>自由时间</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.

参见