1. Web
  2. HTML
  3. 参考
  4. 元素
  5. <col>

<col>: 表格列元素

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

* 此特性的某些部分可能存在不同级别的支持。

<col> HTML 元素定义了由其父元素 <colgroup> 表示的一个或多个列组中的列。 <col> 元素只能作为没有定义 span 属性的 <colgroup> 元素的子元素。

试一试

<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> 中的列之间共享。

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

结果

技术摘要

内容类别 无。
允许内容 无；它是一个空元素。
标签省略 必须有起始标签，且不能有结束标签。
允许父级 <colgroup> 仅限于此，尽管它的开始标签不是强制性的，可以隐式定义。<colgroup> 不得有 span 属性。
隐式 ARIA 角色 没有对应的角色
允许的 ARIA 角色 不允许 role
DOM 接口 HTMLTableColElement

规范

规范
HTML
# the-col-element

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

本页面最后由 MDN 贡献者 在 修改。

在 GitHub 上查看此页面 • 报告此内容的问题