Html 简明教程

HTML - Table Colgroup

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

In HTML, the <colgroup> element is used to group together a set of columns so that a combined styles and scripts can be applied.

HTML <colgroup> Tag

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

HTML <colgroup> is often used along with the <col> element, where each <col> tag represents an individual column within the group. This grouping enhances readability and simplifies the application of styles or attributes to specific columns in a table.

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

Using <colgroup> in HTML involves the following steps:

  1. Step 1 - Insert <colgroup> Tag: Place the <colgroup> tag within the <table> element, usually inside the <thead> (table head) or <tbody> (table body) section.

  2. Step 2 - Define Columns: Inside the <colgroup> tag, use one or more <col> tags to represent each column. Specify attributes or styles for the columns within these <col> tags.

  3. Step 3 - Apply Attributes or Styles: Define attributes or styles for the columns by adding attributes such as width, style, or class to the <col> tags.

Examples of Table Colgroup

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

Below examples will illustrate the Colgroup of HTML table, where and how we should use this property of HTML.

Using Colgroup in a table

以下代码显示如何在表格元素内使用 Colgroup 来设定列样式。在此示例中， <colgroup> 标记定义了两列，每列的宽度不同，并且使用 <col> 标记将样式应用于这些列。使用 CSS 类突出显示表格中的第二行。

The following code show how to use Colgroup inside a table element to style columns. In this example, the <colgroup> tag defines two columns with different widths, and the styles are applied to the columns using the <col> tags. The second row in the table is highlighted using a CSS class.

<!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 属性来增强表格列的显示效果。

In HTML, the <colgroup> element facilitate the application of specific CSS properties to enhance the presentation of table columns.

<!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> 可用于提供结构性占位符，用于潜在样式或以后使用。如果没有提到列，则样式只会应用于表格的第一列。请查看以下代码。

An empty <colgroup> can be used to provide a structural placeholder for potential styling or later use. If cols is not mentioned then styles will be applied only to first column of table. Look at the following code.

<!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 属性，其他属性不会对该元素产生任何影响。

There are certain CSS properties that are allowed to be used on the cologroup element, other properties will have no effect on this element.

  1. CSS width Property: The width property sets the width of an element’s content area.

  2. CSS visibility Property: CSS visibility property allows you to show or hide an element without changing the layout of a document, while hidden elements take up space.

  3. CSS background Property: The background property of CSS is used to set the background of an element.

  4. CSS border Property: The border property is used to create a border around an element, such as a div, image, or text.