Html 简明教程

HTML - Table Colgroup

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

HTML <colgroup> Tag

HTML * <colgroup>* 通常与 <col> 元素一起使用，其中每个 <col> 标记代表组内的单个列。这种分组提高了可读性，并简化了对表中特定列应用样式或属性。

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

Step 1 - Insert <colgroup> Tag: 将 <colgroup> 标记放在 * <table>* 元素内，通常在 * <thead>* （表头）或 * <tbody>* （表正文）部分内。
Step 2 - Define Columns: 在 <colgroup> 标记内，使用一个或多个 * <col>* 标记来表示各列。在这些 <col> 标记内指定列的属性或样式。
Step 3 - Apply Attributes or Styles: 通过向 <col> 标记添加诸如 width, style, 或 class 等属性来定义各列的属性或样式。

Examples of Table Colgroup

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

Using Colgroup in a table

以下代码显示如何在表格元素内使用 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>

Applying CSS to Columns using Colgroup

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>

Empty Column Groups

一个空 <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>

Legal CSS Properties of cologroup

在 cologroup 元素上允许使用某些 CSS 属性，其他属性不会对该元素产生任何影响。

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