<colgroup>:表格列组元素
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.
<colgroup>
HTML 元素定义了表格中的一组列。
尝试一下
属性
弃用的属性
以下属性已被弃用,不应再使用。下文记录了这些属性,供更新现有代码时参考,也仅供参考。
align
已弃用-
指定每个列组单元格的水平对齐方式。可能的枚举值有
left
、center
、right
、justify
和char
。如果支持,char
值将根据char
属性中定义的字符和charoff
属性定义的偏移量对文本内容进行对齐。请注意,后代<col>
元素可以使用自己的align
属性覆盖该值。使用text-align
和<th>
元素上的 CSS 属性,因为该属性已被弃用。备注: 在
<colgroup>
元素上设置text-align
没有任何作用,因为<td>
和<th>
元素不是<colgroup>
元素的后代,因此它们不能从该元素继承。如果表格没有使用
colspan
属性,则在每列使用td:nth-of-type(an+b)
CSS 选择器,其中a
为表格中列的总数,b
为列在表格中的序号位置,例如td:nth-of-type(7n+2) { text-align: right; }
可右对齐第二列单元格。如果表格使用了
colspan
属性,则可以通过组合适当的 CSS 属性选择器(如[colspan=n]
)来达到效果,不过这并非易事。 bgcolor
已弃用-
定义每列单元格的背景颜色。该值是 HTML 颜色;可以是以“
#
”为前缀的 6 位十六进制 RGB 代码,也可以是颜色关键字。不支持其他 CSS<color>
值。请使用background-color
CSS 属性代替,因为该属性已被弃用。 char
已弃用-
没有任何作用。其最初目的是指定内容与每列单元格中的一个字符对齐。当试图对齐数字或货币值时,其典型值包括句号(
.
)。如果align
未设置为char
,该属性将被忽略,但它仍将作为默认值用于属于该列组的<col>
元素的align
。 charoff
已弃用-
没有任何作用。它最初用于指定列单元格内容从
char
属性指定的对齐字符偏移的字符数。 valign
已弃用-
指定每个列组单元格的垂直对齐方式。可能的枚举值有
baseline
、bottom
、middle
和top
。请注意,后代<col>
元素可以使用自己的valign
属性覆盖此值。使用vertical-align
和<th>
元素上的 CSS 属性,因为该属性已被弃用。备注: 在
<colgroup>
元素上设置vertical-align
没有任何作用,因为<td>
和<th>
元素不是<colgroup>
元素的后代,因此它们不能从该元素继承。如果表格没有使用
colspan
属性,请在每列使用td:nth-of-type()
CSS 选择器,例如,td:nth-of-type(2) { vertical-align: middle; }
使第二列单元格垂直居中。如果表格使用了
colspan
属性,则可以通过组合适当的 CSS 属性选择器(如[colspan=n]
)来达到效果,不过这并非易事。 width
已弃用-
该属性为当前列组中的每一列指定默认宽度。除标准像素值和百分比值外,该属性还可以使用特殊形式
0*
,这意味着组中每一列的宽度应为容纳该列内容所需的最小宽度。也可以使用相对宽度,如0.5*
。请注意,后代<col>
元素可以使用自己的width
属性覆盖此值。请使用width
CSS 属性代替,因为该属性已被弃用。
使用说明
<colgroup>
应出现在<table>
内,任何<caption>
元素(如果使用)之后,但在任何<thead>
、<tbody>
、<tfoot>
和<tr>
元素之前。- 只有数量有限的 CSS 属性会影响
<colgroup>
:background
:各种background
属性将为列组中的单元格设置背景。由于列组的背景色绘制在表格顶部,而背景色绘制在列(<col>
)和行组(<thead>
、<tbody>
和<tfoot>
)上。只有在表格列组上绘制的每个图层都具有透明背景时,应用于表格列组的背景才会可见。border
:适用各种border
属性,但前提是<table>
已设置border-collapse: collapse
。visibility
:如果为列组设置collapse
值,则该列组中列的所有单元格都不会被渲染,而跨入其他列的单元格则会被剪切。列组中的这些列原本占据的空间会被移除。但是,其他列的大小仍然按照列组中被折叠列的单元格计算。visibility
的其他值没有影响。width
:width
属性定义了列组中的列的最小宽度,如同设置了min-width
。
示例
请参阅 <table>
获取介绍通用标准和最佳实践的完整表格示例。
本示例演示了一个七列表格,分为两个跨多列的 <colgroup>
元素。
HTML
两个 <colgroup>
元素用于通过创建列组来构建基本表格。每个列组中的列数由 span
属性指定。
<table>
<caption>
个人每周活动
</caption>
<colgroup span="5" class="weekdays"></colgroup>
<colgroup span="2" class="weekend"></colgroup>
<tr>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<th>周六</th>
<th>周日</th>
</tr>
<tr>
<td>打扫房间</td>
<td>足球训练</td>
<td>舞蹈课</td>
<td>历史课</td>
<td>买饮料</td>
<td>自习</td>
<td>自由时间</td>
</tr>
<tr>
<td>瑜伽</td>
<td>棋类俱乐部</td>
<td>见朋友</td>
<td>体操</td>
<td>生日派对</td>
<td>钓鱼之旅</td>
<td>自由时间</td>
</tr>
</table>
CSS
分组列可用于使用 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;
}
结果
技术概要
内容分类 | 无。 |
---|---|
允许的内容 | 如果存在 span 元素:无。如果不存在属性:零个或多个 <col> 元素。 |
标签省略 | 如果 <col> 元素的第一个子元素是 <col> ,并且其前面没有省略结束标签的 <colgroup> ,则可以省略开始标签。如果结束标签后面没有空格或注释,则可以省略结束标签。 |
允许的父元素 |
<table> 元素。<colgroup> 必须出现在任何 <caption> 元素之后,而在任何 <thead> 、<tbody> 、<tfoot> 和 <tr> 元素之前。
|
隐式 ARIA 角色 | 没有对应的角色 |
允许的 ARIA 角色 | 没有允许的 role |
DOM 接口 | HTMLTableColElement |
规范
Specification |
---|
HTML Standard # the-colgroup-element |
浏览器兼容性
BCD tables only load in the browser
参见
- 学习区:HTML 表格
<caption>
、<col>
、<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 伪类