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
<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
<!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
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 |  Firefox |  Edge |  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
classoridto 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.
