<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>
元素的子元素才有效。
尝试一下
属性
弃用的属性
以下属性已被弃用,不应再使用。下文记录了这些属性,供更新现有代码时参考,也仅供参考。
align
已弃用-
指定每列单元格的水平对齐方式。可能的枚举值有
left
、center
、right
、justify
和char
。如果支持,char
值将根据char
属性中定义的字符和charoff
属性定义的偏移量对文本内容进行对齐。请注意,该属性会覆盖其<colgroup>
父元素指定的align
。使用text-align
和<th>
元素上的 CSS 属性,因为该属性已被弃用。 bgcolor
已弃用-
定义每列单元格的背景颜色。该值是 HTML 颜色;可以是以“
#
”为前缀的 6 位十六进制 RGB 代码,也可以是颜色关键字。不支持其他 CSS<color>
值。请使用background-color
CSS 属性代替,因为该属性已被弃用。 char
已弃用-
没有任何作用。其最初目的是指定内容与每列单元格中的一个字符对齐。当试图对齐数字或货币值时,其典型值包括句号(
.
)。如果align
未设置为char
,该属性将被忽略,但仍将覆盖其<colgroup>
父元素指定的char
。 charoff
已弃用-
没有任何作用。它最初用于指定列单元格内容从
char
属性指定的对齐字符偏移的字符数。 valign
已弃用-
指定每列单元格的垂直对齐方式。可能的枚举值有
baseline
、bottom
、middle
和top
。请注意,该属性会覆盖其<colgroup>
父元素指定的valign
。使用vertical-align
和<th>
元素上的 CSS 属性,因为该属性已被弃用。 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
的其他值没有影响。width
:width
属性定义了列的最小宽度,如同设置了min-width
。
示例
请参阅 <table>
获取介绍通用标准和最佳实践的完整表格示例。
本示例演示了一个分为三个 <col>
元素的八栏表格。
HTML
<colgroup>
元素为基本表格提供结构,创建一个隐式列组。在 <colgroup>
中包含三个 <col>
元素,从而创建三个可添加样式的列。span
属性指定了每个 <col>
应跨越的表格列数(省略时默认为 1
),使属性可在每个 <col>
中的列之间共享。
<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 属性来为列提供背景颜色,并对齐单元格内容:
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 Standard # the-col-element |
浏览器兼容性
BCD tables only load in the browser
参见
- 学习区: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 伪类