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