The <col> tag in HTML is used to define column properties for a table. It works together with the <colgroup> tag to style or control one or more columns inside a table.
In simple terms, the <col> tag helps you apply styles to entire columns instead of styling each cell one by one. This makes your code cleaner and easier to manage, especially when working with large tables.
The <col> tag is part of HTML table structure and is mainly used for design and layout purposes.
Basic Idea of the <col> Tag
Normally, when you create a table in HTML, you use tags like:
<table>– for the table<tr>– for rows<td>– for data cells<th>– for headers
But sometimes, you may want to style a whole column instead of individual cells. That’s where <col> comes in.
Basic Syntax
Here is the basic syntax:
<table>
<colgroup>
<col>
</colgroup>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
</table>Explanation:
<colgroup>groups columns together<col>defines properties for columns
The <col> tag does not have a closing tag. It is a self-closing (void) element.
Simple Example
<table border="1">
<colgroup>
<col style="background-color: lightblue;">
<col style="background-color: lightgreen;">
</colgroup>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
What this does:
- First column gets a light blue background
- Second column gets a light green background
You don’t need to style each <td> individually.
Why Use the <col> Tag
The <col> tag is useful because:
- It reduces repetitive styling
- It keeps your code clean
- It allows consistent column design
- It improves readability of your HTML
Instead of styling every cell, you define it once for the entire column.
The <colgroup> Tag
The <col> tag must be used inside <colgroup>.
Example:
<colgroup>
<col>
<col>
</colgroup>
Think of <colgroup> as a container, and <col> as the items inside it.
Styling Columns with <col>
You can apply CSS styles directly to columns using <col>.
Example:
<colgroup>
<col style="width: 200px;">
<col style="background-color: yellow;">
</colgroup>Common styles:
background-colorwidthvisibility
Setting Column Width
You can control the width of columns:
<colgroup>
<col style="width: 70%;">
<col style="width: 30%;">
</colgroup>This divides the table into two columns with different widths.
Using the span Attribute
The span attribute allows one <col> tag to apply to multiple columns.
Example:
<colgroup>
<col span="2" style="background-color: lightgray;">
</colgroup>What it does:
- Applies the same style to the first two columns
This is useful when multiple columns share the same design.
Multiple Columns Example
<table border="1">
<colgroup>
<col span="2" style="background-color: lightyellow;">
<col style="background-color: lightpink;">
</colgroup>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>Ada</td>
<td>22</td>
<td>Nigeria</td>
</tr>
</table>
Result:
- First two columns are light yellow
- Third column is light pink
Important Notes
<col>only affects columns, not rows- It must be placed inside
<colgroup> - It does not contain content
- It is used mainly for styling
What <col> Cannot Do
There are some limitations:
- You cannot add text inside
<col> - It does not work for all CSS properties
- It cannot control cell padding or margins directly
For more complex styling, you may still need CSS applied to <td> or <th>.
<col> vs Inline Styling
Without <col>:
<td style="background-color: lightblue;">Data</td>
<td style="background-color: lightblue;">Data</td>
With <col>:
<colgroup>
<col style="background-color: lightblue;">
</colgroup>
Difference:
- Without
<col>→ repetitive code - With
<col>→ cleaner and shorter code
Best Practices
1. Use <col> for Simple Styling
Use it when you want to style entire columns quickly.
2. Combine with CSS
Instead of inline styles, you can use CSS classes:
<col class="blue-column">CSS:
blue-column {
background-color: lightblue;
}3. Keep Tables Organized
Place <colgroup> right after the opening <table> tag.
4. Avoid Overuse
For complex layouts, use CSS instead of relying only on <col>.
Browser Support
The <col> tag is supported in all modern browsers:
- Chrome
- Firefox
- Safari
- Edge
It works reliably and does not cause compatibility issues.
Real-Life Use Cases
Here are some practical examples where <col> is helpful:
1. Data Tables
Highlight important columns like totals or prices.
2. Financial Tables
Style columns differently for income and expenses.
3. Reports
Make specific columns stand out for better readability.
4. Comparison Tables
Use colors to separate features or categories.
Common Mistakes to Avoid
- Forgetting to use
<colgroup> - Trying to add content inside
<col> - Using unsupported CSS properties
- Placing
<colgroup>in the wrong position
Always place <colgroup> immediately after <table>.
Complete Example
<!DOCTYPE html>
<html>
<head>
<style>
col.blue { background-color: lightblue; }
col.green { background-color: lightgreen; }
</style>
</head>
<body>
<table border="1">
<colgroup>
<col class="blue">
<col class="green">
</colgroup>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Laptop</td>
<td>$800</td>
</tr>
<tr>
<td>Phone</td>
<td>$500</td>
</tr>
</table>
</body>
</html>This example shows how to style columns using CSS classes with <col>.
When to Use <col> vs CSS
Use <col> when:
- You want quick column styling
- You are working with simple tables
Use CSS when:
- You need advanced design
- You want more control over layout
The <col> tag in HTML is a simple but useful tool for styling table columns. It works together with <colgroup> to apply styles to entire columns without repeating code.
While it is not used as often as other table elements, it can make your HTML cleaner and easier to manage when working with tables.
By using <col>, you can:
- Save time
- Reduce code repetition
- Keep your tables organized
If you are building tables with consistent column styles, the <col> tag is a smart and efficient solution.