Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

HTML Tags

HTML <col> Tag

Written by Updated

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

AttributeDescription
spanSpecifies how many columns the <col> element should affect.
styleAdds inline CSS styling to the targeted columns (e.g., width, background color).
classApplies a CSS class to the defined columns for styling.
idSpecifies 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>

Browser Support

Chrome
Edge
Firefox
Safari
Opera
IE9+
YesYesYesYesYesYes

💡 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> TagNextHTML <colgroup> Tag