以下是一个简单的使用 <col> 和 <colgroup> 的表格示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Col Tag Example</title>
</head>
<body>
<table border="1">
<colgroup>
<col style="background-color: #f0f0f0;">
<col span="2" style="background-color: #c0c0c0;">
</colgroup>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</table>
</body>
</html>
在这个例子中,<colgroup> 元素内包含了两个 <col> 元素,分别定义了表格中的列的样式。一个列有特定的背景颜色,另外两个列共享另一个背景颜色。这样,通过定义 <col>,你可以对表格的列进行样式化,而不是对每个单元格进行样式设置。
需要注意的是,<col> 和 <colgroup> 元素在实际开发中使用较少,因为很多样式和布局的需求可以通过 CSS 直接应用到表格的列上。
转载请注明出处:http://www.zyzy.cn/article/detail/3710/HTML5