HTML col和colgroup元素

Of all the tags used with tables, including those for accessibility, perhaps the most neglected is the col element. The easiest way to describe col is by making a comparison to the div tag: col is an element that controls the appearance of other content, while the col tag does not appear on the page itself (or at least not without CSS applied). col allows us to avoid the need to repeatedly apply classes to induvidual table cells.

在与表一起使用的所有标签中，包括那些用于可访问性的标签，也许最被忽略的是col元素。 描述col的最简单方法是与div标签进行比较： col是控制其他内容外观的元素，而col标签不会出现在页面本身上(或者至少在没有应用CSS的情况下不会出现)。 col允许我们避免重复将类应用于单个表单元格。

World’s Fastest 100m Sprinters, 2012

Name	Country	Best Time
Average Time		9.66 seconds
Usain Bolt	Jamaica	9.58 seconds
Tyson Gay	United States	9.69 seconds
Asafa Powell	Jamaica	9.72 seconds

2012年世界上最快的1亿短跑运动员

名称	国家	最好的时间
平均时间		9.66秒
博尔特	牙买加	9.58秒
泰森·盖伊	美国	9.69秒
阿萨法·鲍威尔(Asafa Powell)	牙买加	9.72秒

The <col> tag is integrated into the table structure just after the <caption>. (Note that I’ve removed closing tags that are optional in HTML5 to save space – in XHTML, an opening <col> tag should be matched with a closing </col>).

<col>标记<col> <caption>之后被集成到表结构中。 (请注意，为了节省空间，我删除了HTML5中可选的结束标记–在XHTML中，开始<col>标记应与结束</col>匹配)。

<table id=sprinters>
	<caption>World’s Fastest 100m Sprinters, 2012</caption>
	<col><col><col>
	<thead>
		<tr>
			<th>Name
			<th>Country
			<th>Best Time
	</thead>
	<tfoot>
		<tr>
			<td colspan="2">Average Time
			<td>9.66 seconds
	</tfoot>
	<tbody>
		<tr>
			<td>Usain Bolt
			<td>Jamaica
			<td>9.58 seconds
		<tr>
			<td>Tyson Gay
			<td>United States
			<td>9.69 seconds
		<tr>
			<td>Asafa Powell
			<td>Jamaica
			<td>9.72 seconds
	</tbody>
</table>

This markup has the following CSS applied:

此标记应用了以下CSS ：

#sprinters {
	border-collapse: collapse;
}
#sprinters caption {
	font-size: larger;
}
#sprinters td, #sprinters th {
	padding: .5rem;
}
#sprinters tfoot tr td {
	border-top: 1px solid #000;
}
#sprinters col:last-child {
	background: #ddd;
}
#sprinters thead {
	background: #000;
	color: #fff;
}

The number of <col> elements must match the number of table cells in each row. You can stretch a <col> to take command of more columns with the <span> attribute:

<col>元素的数量必须与每一行中的表格单元格的数量匹配。 您可以使用<span>属性来拉伸<col>以接受更多列的命令：

<col span="2"><col>

The “count” of <col> elements is now equal to 3, and any style applied to the first <col> element will control the appearance of the first two table columns.

现在， <col>元素的“计数”等于3，并且应用于第一个<col>元素的任何样式都将控制前两个表列的外观。

Table columns can be grouped together using the colgroup element:

可以使用colgroup元素将表列分组在一起：

<colgroup>
	<col><col>
</colgroup>
<col>

Both <col> and <colgroup> can have styles applied to enhance the appearance of tables.

<col>和<colgroup>都可以应用样式来增强表的外观。

翻译自: https://thenewcode.com/556/The-HTML-col-and-colgroup-elements