HTML - Table 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> 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.

Using <colgroup> in HTML involves the following steps:

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

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

Using Colgroup in a table

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

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

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

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

CSS width Property: The width property sets the width of an element's content area.
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.
CSS background Property: The background property of CSS is used to set the background of an element.
CSS border Property: The border property is used to create a border around an element, such as a div, image, or text.

The <colgroup> tag must be a child of a <table> element and should be placed before any other table elements, like <thead>, <tr>, <td>, <th> etc., but after the <caption> element, if present.

Print Page