HTML col 语法
在 HTML 中，col 标签用于为 HTML 表格中的 “一列” 或 “一组连续的列” 定义属性。它必须作为 colgroup 标签的子元素使用。
语法：
<table>
<colgroup>
<col span="列数" style="样式">
</colgroup>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
</tbody>
</table>说明：
col 标签有 2 个主要属性。
span：表示分组跨越的列数，默认为 1。style：定义内联 CSS 样式。
注意: colgroup 和 col 标签支持的 CSS 属性非常有限，一般仅用于设置width、background。如果想要给给整列文字设置颜色 (color) 或 对齐方式 (text-align)，在 col 上写是无效的，而必须直接对 td 或 th 设置样式。
HTML col 摘要
| 属于 | HTML 表格 |
|---|---|
| 使用频率 | 低 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML col 示例
接下来，我们通过一个简单的例子来讲解一下 HTML col 标签是如何使用的。
示例：col 标签的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table { width: 500px; }
table, tr, td, th { border: 1px solid silver; }
</style>
</head>
<body>
<table>
<caption>考试成绩表</caption>
<colgroup>
<col style="width: 10%; background-color: #eee;">
<col span="3" style="width: 30%;">
</colgroup>
<tr>
<th>姓名</th>
<th>语文</th>
<th>英语</th>
<th>数学</th>
</tr>
<tr>
<td>小明</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>小红</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td>小杰</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</table>
</body>
</html>页面效果如下图所示。
分析：
colgroup 标签通常位于 table 内部，并且放在 caption 标签下面（如果有的话）。在这个例子中，第 1 列将占表格宽度的 10%，第 2、3、4 列各占表格宽度的 30%。
