HTML <col> Tag

The HTML <col> tag is used to define column properties for a table. It allows you to apply styles or attributes to an entire column rather than repeating them for individual cells. The <col> tag is nested inside the <colgroup> element.

The <col> tag is a self-closing element and does not contain any content. It is purely used to specify styling or attributes for table columns.

Basic Example of HTML <col> Tag

Here is a basic example showing how to use the <col> tag to style specific table columns:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            .highlight {
                background-color: #f0f000;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <h2>Basic Example with <col> Tag</h2>
        <table border="1">
            <colgroup>
                <col class="highlight">
                <col>
            </colgroup>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Alice</td>
                <td>25</td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>30</td>
            </tr>
        </table>
    </body>
</html>

Explanation: The first column is styled with a light background and bold text using the .highlight class applied via the <col> tag.

Attributes of HTML <col> Tag

The <col> tag supports the following attributes:

  • span: Specifies the number of columns the <col> element should apply to. Default is 1.
  • class: Assigns a class to the column for CSS styling.
  • id: Assigns a unique identifier to the column for CSS or JavaScript purposes.
  • style: Allows inline CSS styling for the column.

Example for col with span Attribute

The span attribute lets you apply styles or attributes to multiple columns:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
              width: 100%;
            }
            .group {
                background-color: #d0e6f7;
            }
        </style>
    </head>
    <body>
        <h2>Example with Span Attribute</h2>
        <table border="1">
            <colgroup>
                <col span="2" class="group">
                <col>
            </colgroup>
            <tr>
                <th>Product</th>
                <th>Category</th>
                <th>Price</th>
            </tr>
            <tr>
                <td>Laptop</td>
                <td>Electronics</td>
                <td>$1200</td>
            </tr>
            <tr>
                <td>Chair</td>
                <td>Furniture</td>
                <td>$150</td>
            </tr>
        </table>
    </body>
</html>
Example for col with span Attribute

Explanation: The span="2" attribute applies the .group class to the first two columns, giving them a background color and center alignment.

Styling Columns with CSS using col tag

You can apply styles to the <col> tag using CSS to make specific columns visually distinct:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
              width: 100%;
            }
            .red {
                background-color: #fdd;
            }
            .green {
                background-color: #dfd;
            }
        </style>
    </head>
    <body>
        <h2>Styling Columns with CSS</h2>
        <table border="1">
            <colgroup>
                <col class="red">
                <col class="green">
            </colgroup>
            <tr>
                <th>Name</th>
                <th>Status</th>
            </tr>
            <tr>
                <td>Alice</td>
                <td>Active</td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>Inactive</td>
            </tr>
        </table>
    </body>
</html>
Example for Styling Columns with CSS using col tag

Result: The first column has a red background, and the second column has a green background.

Special Notes About <col> Tag

  • The <col> tag is used exclusively within the <colgroup> element.
  • It does not affect table content directly but modifies the presentation of table columns.
  • The span attribute is useful for targeting multiple columns with a single <col> tag.