<col>: The Table Column element

¥Attributes

该元素包括 全局属性。

¥This element includes the global attributes.

span

指定 <col> 元素跨越的连续列数。该值必须是大于零的正整数。如果不存在，则其默认值为 1。

¥Deprecated attributes

以下属性已被弃用，不应使用。下面记录了它们，供更新现有代码时参考，并且仅供历史参考。

¥The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.

align Deprecated

指定每个列单元格的水平对齐方式。可能的 enumerated 值为 left、center、right、justify 和 char。如果受支持，char 值会将文本内容与 char 属性中定义的字符以及 charoff 属性定义的偏移量对齐。请注意，此属性会覆盖其 <colgroup> 父元素的指定 align。请改用 <td> 和 <th> 元素上的 text-align CSS 属性，因为此属性已弃用。

注意：在 <col> 元素上设置 text-align 没有任何效果，因为 <col> 没有后代，因此没有元素继承它。

¥Note: Setting text-align on the <col> element has no effect as <col> has no descendants, and therefore no elements inherit from it.

如果表不使用 colspan 属性，请使用 td:nth-of-type(an+b) CSS 选择器。将 a 设置为零，将 b 设置为表中列的位置，例如 td:nth-of-type(2) { text-align: right; } 右对齐第二列单元格。

¥If the table does not use a colspan attribute, use the td:nth-of-type(an+b) CSS selector. Set a to zero and b to the position of the column in the table, e.g. td:nth-of-type(2) { text-align: right; } to right-align the second column cells.

如果表格确实使用了 colspan 属性，则可以通过组合足够的 CSS 属性选择器（如 [colspan=n]）来实现效果，尽管这并不简单。

¥If the table does use a colspan attribute, the effect can be achieved by combining adequate CSS attribute selectors like [colspan=n], though this is not trivial.

bgcolor Deprecated

定义每个列单元格的背景颜色。该值是 HTML 颜色；6 位十六进制 RGB 代码（前缀为“#”）或 颜色关键词。不支持其他 CSS <color> 值。请改用 background-color CSS 属性，因为此属性已弃用。

char Deprecated

不执行任何操作。它最初旨在指定内容与每个列单元格的字符的对齐方式。当尝试对齐数字或货币值时，此值的典型值包括句点 (.)。如果 align 未设置为 char，则该属性将被忽略，但仍会覆盖其 <colgroup> 父元素的指定 char。

charoff Deprecated

不执行任何操作。它最初旨在指定列单元格内容与 char 属性指定的对齐字符之间的偏移字符数。

valign Deprecated

指定每个列单元格的垂直对齐方式。可能的 enumerated 值为 baseline、bottom、middle 和 top。请注意，此属性会覆盖其 <colgroup> 父元素的指定 valign。请改用 <td> 和 <th> 元素上的 vertical-align CSS 属性，因为此属性已弃用。

注意：在 <col> 元素上设置 vertical-align 没有任何效果，因为 <col> 没有后代，因此没有元素继承它。

¥Note: Setting vertical-align on the <col> element has no effect as <col> has no descendants, and therefore no elements inherit from it.

如果表不使用 colspan 属性，请使用 td:nth-of-type(an+b) CSS 选择器。将 a 设置为零，将 b 设置为表中列的位置，例如 td:nth-of-type(2) { vertical-align: middle; } 将第二列单元格垂直居中。

¥If the table does not use a colspan attribute, use the td:nth-of-type(an+b) CSS selector. Set a to zero and b to the position of the column in the table, e.g. td:nth-of-type(2) { vertical-align: middle; } to center the second column cells vertically.

如果表格确实使用了 colspan 属性，则可以通过组合足够的 CSS 属性选择器（如 [colspan=n]）来实现效果，尽管这并不简单。

¥If the table does use a colspan attribute, the effect can be achieved by combining adequate CSS attribute selectors like [colspan=n], though this is not trivial.

width Deprecated

指定每列的默认宽度。除了标准像素和百分比值之外，此属性还可以采用特殊形式 0*，这意味着跨越的每列的宽度应该是容纳列内容所需的最小宽度。也可以使用诸如 5* 之类的相对宽度。请注意，此属性会覆盖其 <colgroup> 父元素的指定 width。请改用 width CSS 属性，因为此属性已弃用。

¥Usage notes

• <col> 元素用在没有 span 属性的 <colgroup> 元素内。
• <col> 元素不会在结构上将列分组在一起。这就是 <colgroup> 元素的作用。
• 只有有限数量的 CSS 属性影响 <col>：
  • background ：各种 background 属性将为列内的单元格设置背景。由于列背景色绘制在表和列组 (<colgroup>) 的顶部，但在应用于行组（<thead>、<tbody> 和 <tfoot>）、行 (<tr>) 和单个单元格（<th> 和 <th>）的背景色后面。 <td>)，仅当在其顶部绘制的每个图层都具有透明背景时，应用于表格列的背景才可见。
  • border：各种 border 属性均适用，但仅当 <table> 设置了 border-collapse: collapse 时才适用。
  • visibility：列的值 collapse 会导致该列的所有单元格不被渲染，并且跨越其他列的单元格被剪切。这些列本来占据的空间被删除。但是，仍会计算其他列的大小，就好像折叠列中的单元格存在一样。visibility 的其他值没有影响。
  • width：width 属性定义列的最小宽度，就像设置了 min-width 一样。

¥Example

请参阅 <table> 了解介绍通用标准和最佳实践的完整表格示例。

¥See <table> for a complete table example introducing common standards and best practices.

此示例演示了一个分为三个 <col> 元素的八列表。

¥This example demonstrates an eight-column table divided into three <col> elements.

<colgroup> 元素为基本表提供结构，创建单个隐式列组。<colgroup> 中包含三个 <col> 元素，创建三个可设置样式的列。span 属性指定每个 <col> 应跨越的表列数（省略时默认为 1），从而使属性能够在每个 <col> 中的列之间共享。

¥A <colgroup> element provides structures to a basic table, creating a single implicit column group. Three <col> elements are included within the <colgroup>, creating three stylable columns. The span attribute specifies the number of table columns each <col> should span (defaulting to 1 when omitted), enabling attributes to be shared across the columns in each <col>.

<table>
  <caption>
    Personal weekly activities
  </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（而不是已弃用的 HTML 属性）来为列提供背景颜色并对齐单元格内容：

¥We use CSS, instead of deprecated HTML attributes, to provide a background color to the columns and align the cell content:

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

结果

¥Result

¥Technical summary

¥See also

• 学习：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 伪类