HTML - 表格 Colgroup

在 HTML 中，<colgroup> 元素用于将一组列组合在一起，以便可以应用组合样式和脚本。

HTML <colgroup> 标签

HTML <colgroup> 通常与 <col> 元素一起使用，其中每个 <col> 标签表示组中的单个列。此分组增强了可读性，并简化了样式或属性对表中特定列的应用。

在 HTML 中使用 <colgroup> 涉及以下步骤：

第 1 步 - 插入 <colgroup> 标签：将 <colgroup> 标签放在 <table> 元素中，通常位于 <thead>（表头）或 <tbody>（表主体）部分内。
第 2 步 - 定义列：在 <colgroup> 标签中，使用一个或多个 <col> 标签来表示每列。为这些 <col> 标签中的列指定属性或样式。
第 3 步 - 应用属性或样式：通过向 <col> 标记添加宽度、样式或类等属性来定义列的属性或样式。

表格 Colgroup 的示例

下面的示例将说明 HTML 表的 Colgroup，我们应该在哪里以及如何使用 HTML 的这个属性。

在表中使用 Colgroup

下面的代码演示如何在表元素中使用 Colgroup 来设置列的样式。在此示例中，<colgroup> 标记定义了两个具有不同宽度的列，并使用“<col>”标记将样式应用于列。表中的第二行使用 CSS 类突出显示。


<!DOCTYPE html>
<html>

<body>
	 <table border=1>
			<colgroup>
				 <col style="width: 30%;">
				 <col style="width: 70%;">
			</colgroup>
			<thead>
				 <tr>
						<th>Column 1</th>
						<th>Column 2</th>
				 </tr>
			</thead>
			<tbody>
				 <tr>
						<td>Row 1, Col 1</td>
						<td>Row 1, Col 2</td>
				 </tr>
				 <tr class="highlight">
						<td>Row 2, Col 1</td>
						<td>Row 2, Col 2</td>
				 </tr>
			</tbody>
	 </table>
</body>

</html>

使用 Colgroup 将 CSS 应用于列

在 HTML 中，<colgroup> 元素有助于应用特定的 CSS 属性来增强表格列的表示。


<!DOCTYPE html>
<html lang="en">

<head>
	 <style>
			table {
				 width: 100%;
				 border-collapse: collapse;
			}
			colgroup {
				 /* Setting width for columns */
				 width: 20%;
				 background-color: #f0f0f0;
				 /* Background color for columns */
				 visibility: visible;
				 /* Making columns visible */
				 border: 2px solid #3498db;
				 /* Border around columns */
			}
			col {
				 /* Additional styling for columns */
				 background-color: #ecf0f1;
				 border: 1px solid #bdc3c7;
			}
			td,
			th {
				 border: 1px solid #dddddd;
				 text-align: left;
				 padding: 8px;
			}
	 </style>
</head>

<body>
	 <table>
			<colgroup>
				 <col>
				 <col style="width: 30%;">
				 <col>
			</colgroup>
			<thead>
				 <tr>
						<th>Header 1</th>
						<th>Header 2</th>
						<th>Header 3</th>
				 </tr>
			</thead>
			<tbody>
				 <tr>
						<td>Data 1</td>
						<td>Data 2</td>
						<td>Data 3</td>
				 </tr>
				 <tr>
						<td>Data 4</td>
						<td>Data 5</td>
						<td>Data 6</td>
				 </tr>
			</tbody>
	 </table>
</body>

</html>

空列组

空的 <colgroup> 可用于提供结构占位符，以供潜在的样式或以后使用。如果未提及列，则样式将仅应用于表格的第一列。请看下面的代码。


<!DOCTYPE html>
<html lang="en">

<head>
	 <style>
			colgroup {
				 background-color: red;
				 border: 2px solid black;
			}
	 </style>
</head>
<body>
	 <table border=3>
			<colgroup></colgroup>
			<thead>
				 <tr>
						<th>Header 1</th>
						<th>Header 2</th>
						<th>Header 3</th>
				 </tr>
			</thead>
			<tbody>
				 <tr>
						<td>Data 1</td>
						<td>Data 2</td>
						<td>Data 3</td>
				 </tr>
				 <tr>
						<td>Data 4</td>
						<td>Data 5</td>
						<td>Data 6</td>
				 </tr>
			</tbody>
	 </table>
</body>

</html>

cologroup的合法CSS属性

允许在 cologroup 元素上使用某些 CSS 属性，其他属性对此元素没有影响。

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

<colgroup> 标签必须是 <table> 元素的子元素，并且应放在任何其他表元素（如 <thead>、<tr>、<td>、<th> 等）之前，但应放在 <caption> 元素（如果存在）之后。

打印本页