HTML Tags

HTML <col> Tag

The <col> tag in HTML defines column properties for each column within a <colgroup> element.
It allows you to apply styling, width, or alignment to one or more columns of a table - without repeating the same style on each <td> or <th> individually.

Syntax

html

<col span="number" style="property:value;">

Attributes

Attribute	Description
span	Specifies how many columns the `<col>` element should affect.
style	Adds inline CSS styling to the targeted columns (e.g., width, background color).
class	Applies a CSS class to the defined columns for styling.
id	Specifies a unique ID for the column.

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML col Tag Example</title>
  <style>
    table {
      border-collapse: collapse;
      width: 60%;
    }
    th, td {
      border: 1px solid #333;
      padding: 8px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h2>Example of the <col> Tag</h2>
  <table>
    <colgroup>
      <col span="1" style="background-color: #f2f2f2;">
      <col span="1" style="background-color: #d9f7be;">
      <col span="1" style="background-color: #ffd6e7;">
    </colgroup>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Stock</th>
    </tr>
    <tr>
      <td>Notebook</td>
      <td>$5</td>
      <td>120</td>
    </tr>
    <tr>
      <td>Pencil</td>
      <td>$1</td>
      <td>500</td>
    </tr>
  </table>
</body>
</html>

Output

Browser Output

html

There is visible output for this tag — though the <col> tag itself doesn’t render visible content,
it affects the appearance of entire columns through styles like background color or width.
Try it live in our TryIt Editor to experiment with different styles.

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE9+
Yes	Yes	Yes	Yes	Yes	Yes

💡 The <col> tag itself does not produce visible content; it affects how columns are displayed.

Notes

The <col> tag is always nested inside <colgroup>.
It is primarily used to style multiple columns efficiently.
The tag itself has no visible effect - only styling effects are reflected.
You can apply a class or id to customize multiple columns through external CSS.

Conclusion

The <col> tag defines styling or structural properties for table columns. It enhances maintainability by applying consistent styles across multiple cells. When used properly inside <colgroup>, it provides cleaner and more semantic table layouts.

PreviousHTML <td> Tag NextHTML <colgroup> Tag