HTML - col 标签

HTML <col> 标签用于提供有关列的信息。<colgroup> 元素中的每一列都由 <col> 标签赋予列特征。

您可以使用 <col> 标签将样式应用于整个列，而不是重复每个单元格和每行的样式。

此元素似乎是一个非常有用的元素，可用于设置表中列的格式，并且它确实具有一些优点。

但是，有一个重要的问题：表的各个单元格并未真正包含在列中。

语法


<col attribute = "value">

属性

<col> 标签支持 HTML 的全局属性和事件属性。下面列出了一些特定属性。

属性	值	描述
span	number	指定 <col> 元素跨越的连续列数。
align	left right center justify	指定文本内容的对齐方式（已弃用）。
bgcolor	color	指定每个列单元格的背景色（已弃用）。
char	character	指定内容与每个列单元格的字符的对齐方式（已弃用）。
charoff	number	指定用于偏移列单元格内容与 char 属性指定的对齐字符的字符数（已弃用）。
valign	baseline bottom middle top	指定每个列单元格的垂直对齐方式（已弃用）。

<col> 标签的示例

下面的示例将说明 <col> 标签的用法。在何处、何时以及如何使用 <col> 标签提供有关列的信息。

在表格中使用 <col> 标签

以下示例，我们将在 HTML 表中使用 <col> 标签。


<!DOCTYPE html>
<html>
<body>
	 <table border="1">
			<col style='color:red;background:#ABEBC6;'>
			<tr>
				 <td>Ram</td>
				 <td>1</td>
			</tr>
			<tr>
				 <td>Rahul</td>
				 <td>2</td>
			</tr>
			<tr>
				 <td>Ravi</td>
				 <td>3</td>
			</tr>
	 </table>
</body>
</html>

指定连续列

考虑另一种情况，我们将使用带有 <col> 标签的 span 属性。


<!DOCTYPE html>
<html>
	 <style>
			table,
			th,
			td {
				 border: 1.5px solid #DE3163;
			}
	 </style>
<body>
	 <table>
			<colgroup>
				 <col span="2" style="background-color:#D2B4DE">
			</colgroup>
			<tr>
				 <th>ID</th>
				 <th>Name</th>
				 <th>Age</th>
			</tr>
			<tr>
				 <td>123</td>
				 <td>Maya</td>
				 <td>22</td>
			</tr>
			<tr>
				 <td>124</td>
				 <td>Ram</td>
				 <td>23</td>
			</tr>
			<tr>
				 <td>125</td>
				 <td>Ram</td>
				 <td>23</td>
			</tr>
	 </table>
</body>
</html>

定义列宽

让我们看一下以下示例，我们将在其中使用 width 属性和 <col> 标签。


<!DOCTYPE html>
<html>
<body>
	 <table border="1">
			<colgroup>
				 <col width="50"></col>
				 <col width="100"></col>
				 <col width="150"></col>
				 <col width="50"></col>
			</colgroup>
			<tr>
				 <td>1</td>
				 <td>2</td>
				 <td>3</td>
				 <td>4</td>
			</tr>
	 </table>
</body>
</html>

HTML 表由其行定义。因此，应用于行的任何样式都将覆盖应用于列的任何样式。只有少数 CSS 属性可以由 <col> 元素管理，这一事实使问题进一步复杂化。以下是可控制的属性：

CSS border 属性：border 属性用于在元素（如 div、image 或 text）周围创建边框。
CSS background 属性：CSS 的 background 属性用于设置元素的背景。
CSS width 属性：width 属性设置元素内容区域的宽度。
CSS visibility 属性：CSS 可见性属性允许您在不更改文档布局的情况下显示或隐藏元素，而隐藏元素会占用空间。

文本的颜色无法更改，但您可以更改列中每个单元格的背景颜色。如果其中一行是彩色的，则行颜色将优先于列颜色。<col> 标签不需要 HTML 中的任何类型的结束标签。

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

打印本页