<col> - Table Column Element

The `<col>` Element

Table Element

The <col> element defines a column within a table and is used to apply properties and styles to that column. It must be used inside a <colgroup> element and represents a single column (or multiple consecutive columns when using the span attribute). The <col> element is an empty element—it has no content and doesn’t require a closing tag.

Quick Example

<table>
<caption>Product Comparison Chart</caption>
<colgroup>
  <col style="background-color: #f8f9fa;">
  <col style="background-color: #e3f2fd; width: 25%;">
  <col style="background-color: #fff3e0; width: 25%;">
  <col style="background-color: #f3e5f5; width: 25%;">
</colgroup>
<thead>
  <tr>
    <th scope="col">Feature</th>
    <th scope="col">Basic</th>
    <th scope="col">Pro</th>
    <th scope="col">Enterprise</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Storage</th>
    <td>10 GB</td>
    <td>100 GB</td>
    <td>Unlimited</td>
  </tr>
  <tr>
    <th scope="row">Users</th>
    <td>1</td>
    <td>10</td>
    <td>Unlimited</td>
  </tr>
  <tr>
    <th scope="row">Support</th>
    <td>Email</td>
    <td>Chat + Email</td>
    <td>24/7 Phone</td>
  </tr>
</tbody>
</table>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}
thead {
  background-color: #2c3e50;
  color: white;
}
tbody th {
  background-color: #ecf0f1;
  text-align: left;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<table>
<caption>Product Comparison Chart</caption>
<colgroup>
  <col style="background-color: #f8f9fa;">
  <col style="background-color: #e3f2fd; width: 25%;">
  <col style="background-color: #fff3e0; width: 25%;">
  <col style="background-color: #f3e5f5; width: 25%;">
</colgroup>
<thead>
  <tr>
    <th scope="col">Feature</th>
    <th scope="col">Basic</th>
    <th scope="col">Pro</th>
    <th scope="col">Enterprise</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Storage</th>
    <td>10 GB</td>
    <td>100 GB</td>
    <td>Unlimited</td>
  </tr>
  <tr>
    <th scope="row">Users</th>
    <td>1</td>
    <td>10</td>
    <td>Unlimited</td>
  </tr>
  <tr>
    <th scope="row">Support</th>
    <td>Email</td>
    <td>Chat + Email</td>
    <td>24/7 Phone</td>
  </tr>
</tbody>
</table>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}
thead {
  background-color: #2c3e50;
  color: white;
}
tbody th {
  background-color: #ecf0f1;
  text-align: left;
}
</style>

Syntax

<table>
  <colgroup>
    <col>
    <col style="background-color: yellow;">
    <col span="2">
  </colgroup>
  <!-- table content -->
</table>

Attributes

`span` Attribute

The span attribute specifies the number of consecutive columns this <col> element represents. Default is 1.

<col span="3" style="background-color: #f0f0f0;">

This is equivalent to:

<col style="background-color: #f0f0f0;">
<col style="background-color: #f0f0f0;">
<col style="background-color: #f0f0f0;">

Global Attributes

The <col> element supports all global HTML attributes.

Deprecated Attributes

Common Use Cases

Styling Individual Columns

<table>
<caption>Monthly Revenue Report</caption>
<colgroup>
  <col style="background-color: #ecf0f1; font-weight: bold;">
  <col style="background-color: #d1f2eb;">
  <col style="background-color: #fdebd0;">
  <col style="background-color: #fadbd8;">
</colgroup>
<thead>
  <tr>
    <th scope="col">Month</th>
    <th scope="col">Revenue</th>
    <th scope="col">Expenses</th>
    <th scope="col">Profit</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">January</th>
    <td>$125,000</td>
    <td>$80,000</td>
    <td>$45,000</td>
  </tr>
  <tr>
    <th scope="row">February</th>
    <td>$142,000</td>
    <td>$85,000</td>
    <td>$57,000</td>
  </tr>
  <tr>
    <th scope="row">March</th>
    <td>$138,000</td>
    <td>$82,000</td>
    <td>$56,000</td>
  </tr>
</tbody>
</table>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 10px;
}
thead {
  background-color: #16a085;
  color: white;
  text-align: center;
}
tbody th {
  text-align: left;
}
tbody td {
  text-align: right;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<table>
<caption>Monthly Revenue Report</caption>
<colgroup>
  <col style="background-color: #ecf0f1; font-weight: bold;">
  <col style="background-color: #d1f2eb;">
  <col style="background-color: #fdebd0;">
  <col style="background-color: #fadbd8;">
</colgroup>
<thead>
  <tr>
    <th scope="col">Month</th>
    <th scope="col">Revenue</th>
    <th scope="col">Expenses</th>
    <th scope="col">Profit</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">January</th>
    <td>$125,000</td>
    <td>$80,000</td>
    <td>$45,000</td>
  </tr>
  <tr>
    <th scope="row">February</th>
    <td>$142,000</td>
    <td>$85,000</td>
    <td>$57,000</td>
  </tr>
  <tr>
    <th scope="row">March</th>
    <td>$138,000</td>
    <td>$82,000</td>
    <td>$56,000</td>
  </tr>
</tbody>
</table>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 10px;
}
thead {
  background-color: #16a085;
  color: white;
  text-align: center;
}
tbody th {
  text-align: left;
}
tbody td {
  text-align: right;
}
</style>

Setting Column Widths

<table>
<caption>Task Assignment Table</caption>
<colgroup>
  <col style="width: 10%;">
  <col style="width: 40%;">
  <col style="width: 25%;">
  <col style="width: 25%;">
</colgroup>
<thead>
  <tr>
    <th scope="col">ID</th>
    <th scope="col">Task Description</th>
    <th scope="col">Assigned To</th>
    <th scope="col">Due Date</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>001</td>
    <td>Complete project documentation</td>
    <td>Alice Johnson</td>
    <td>2024-03-15</td>
  </tr>
  <tr>
    <td>002</td>
    <td>Review code changes</td>
    <td>Bob Martinez</td>
    <td>2024-03-12</td>
  </tr>
  <tr>
    <td>003</td>
    <td>Update design mockups</td>
    <td>Carol White</td>
    <td>2024-03-18</td>
  </tr>
</tbody>
</table>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}
thead {
  background-color: #3498db;
  color: white;
}
tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<table>
<caption>Task Assignment Table</caption>
<colgroup>
  <col style="width: 10%;">
  <col style="width: 40%;">
  <col style="width: 25%;">
  <col style="width: 25%;">
</colgroup>
<thead>
  <tr>
    <th scope="col">ID</th>
    <th scope="col">Task Description</th>
    <th scope="col">Assigned To</th>
    <th scope="col">Due Date</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>001</td>
    <td>Complete project documentation</td>
    <td>Alice Johnson</td>
    <td>2024-03-15</td>
  </tr>
  <tr>
    <td>002</td>
    <td>Review code changes</td>
    <td>Bob Martinez</td>
    <td>2024-03-12</td>
  </tr>
  <tr>
    <td>003</td>
    <td>Update design mockups</td>
    <td>Carol White</td>
    <td>2024-03-18</td>
  </tr>
</tbody>
</table>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}
thead {
  background-color: #3498db;
  color: white;
}
tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}
</style>

Highlighting Specific Columns

<table>
<caption>Test Results - Current Scores Highlighted</caption>
<colgroup>
  <col>
  <col>
  <col style="background-color: #fff3cd; border-left: 3px solid #ffc107;">
</colgroup>
<thead>
  <tr>
    <th scope="col">Student</th>
    <th scope="col">Previous Score</th>
    <th scope="col">Current Score</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Alice Chen</td>
    <td>85</td>
    <td>92</td>
  </tr>
  <tr>
    <td>Bob Lee</td>
    <td>78</td>
    <td>84</td>
  </tr>
  <tr>
    <td>Carol Park</td>
    <td>92</td>
    <td>95</td>
  </tr>
</tbody>
</table>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}
thead {
  background-color: #8e44ad;
  color: white;
}
td:first-child {
  text-align: left;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<table>
<caption>Test Results - Current Scores Highlighted</caption>
<colgroup>
  <col>
  <col>
  <col style="background-color: #fff3cd; border-left: 3px solid #ffc107;">
</colgroup>
<thead>
  <tr>
    <th scope="col">Student</th>
    <th scope="col">Previous Score</th>
    <th scope="col">Current Score</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Alice Chen</td>
    <td>85</td>
    <td>92</td>
  </tr>
  <tr>
    <td>Bob Lee</td>
    <td>78</td>
    <td>84</td>
  </tr>
  <tr>
    <td>Carol Park</td>
    <td>92</td>
    <td>95</td>
  </tr>
</tbody>
</table>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}
thead {
  background-color: #8e44ad;
  color: white;
}
td:first-child {
  text-align: left;
}
</style>

Using the `span` Attribute

<table>
<caption>Quarterly Performance - Using span attribute</caption>
<colgroup>
  <col style="background-color: #ecf0f1;">
  <col span="3" style="background-color: #e3f2fd;">
  <col style="background-color: #f3e5f5;">
</colgroup>
<thead>
  <tr>
    <th scope="col">Metric</th>
    <th scope="col">Q1</th>
    <th scope="col">Q2</th>
    <th scope="col">Q3</th>
    <th scope="col">Average</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Sales</th>
    <td>$125K</td>
    <td>$142K</td>
    <td>$138K</td>
    <td>$135K</td>
  </tr>
  <tr>
    <th scope="row">Customers</th>
    <td>1,240</td>
    <td>1,520</td>
    <td>1,480</td>
    <td>1,413</td>
  </tr>
</tbody>
</table>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}
thead {
  background-color: #27ae60;
  color: white;
}
tbody th {
  background-color: #ecf0f1;
  text-align: left;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<table>
<caption>Quarterly Performance - Using span attribute</caption>
<colgroup>
  <col style="background-color: #ecf0f1;">
  <col span="3" style="background-color: #e3f2fd;">
  <col style="background-color: #f3e5f5;">
</colgroup>
<thead>
  <tr>
    <th scope="col">Metric</th>
    <th scope="col">Q1</th>
    <th scope="col">Q2</th>
    <th scope="col">Q3</th>
    <th scope="col">Average</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Sales</th>
    <td>$125K</td>
    <td>$142K</td>
    <td>$138K</td>
    <td>$135K</td>
  </tr>
  <tr>
    <th scope="row">Customers</th>
    <td>1,240</td>
    <td>1,520</td>
    <td>1,480</td>
    <td>1,413</td>
  </tr>
</tbody>
</table>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}
thead {
  background-color: #27ae60;
  color: white;
}
tbody th {
  background-color: #ecf0f1;
  text-align: left;
}
</style>

CSS Properties That Work on `<col>`

Supported Properties Example

<table>
<caption>CSS Properties on col Elements</caption>
<colgroup>
  <col style="background-color: #e8f5e9; width: 40%;">
  <col style="background-color: #fff3e0; width: 30%;">
  <col style="background-color: #fce4ec; width: 30%;">
</colgroup>
<thead>
  <tr>
    <th scope="col">Background Color ✓</th>
    <th scope="col">Width ✓</th>
    <th scope="col">Border ✓</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Works perfectly</td>
    <td>Works great</td>
    <td>Works with collapse</td>
  </tr>
  <tr>
    <td>Applies to all cells</td>
    <td>Controls column size</td>
    <td>Must use border-collapse</td>
  </tr>
</tbody>
</table>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #333;
  padding: 10px;
  text-align: left;
}
thead {
  background-color: #2c3e50;
  color: white;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<table>
<caption>CSS Properties on col Elements</caption>
<colgroup>
  <col style="background-color: #e8f5e9; width: 40%;">
  <col style="background-color: #fff3e0; width: 30%;">
  <col style="background-color: #fce4ec; width: 30%;">
</colgroup>
<thead>
  <tr>
    <th scope="col">Background Color ✓</th>
    <th scope="col">Width ✓</th>
    <th scope="col">Border ✓</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Works perfectly</td>
    <td>Works great</td>
    <td>Works with collapse</td>
  </tr>
  <tr>
    <td>Applies to all cells</td>
    <td>Controls column size</td>
    <td>Must use border-collapse</td>
  </tr>
</tbody>
</table>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #333;
  padding: 10px;
  text-align: left;
}
thead {
  background-color: #2c3e50;
  color: white;
}
</style>

Advanced Patterns

Alternating Column Groups

<table>
<caption>Year-over-Year Comparison</caption>
<colgroup>
  <col style="background-color: #f8f9fa;">
</colgroup>
<colgroup>
  <col style="background-color: #e3f2fd;">
  <col style="background-color: #bbdefb;">
</colgroup>
<colgroup>
  <col style="background-color: #fff3e0;">
  <col style="background-color: #ffe0b2;">
</colgroup>
<thead>
  <tr>
    <th scope="col">Product</th>
    <th scope="colgroup" colspan="2">2023</th>
    <th scope="colgroup" colspan="2">2024</th>
  </tr>
  <tr>
    <th scope="col"></th>
    <th scope="col">Sales</th>
    <th scope="col">Growth</th>
    <th scope="col">Sales</th>
    <th scope="col">Growth</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Widget A</th>
    <td>$50K</td>
    <td>+5%</td>
    <td>$65K</td>
    <td>+30%</td>
  </tr>
  <tr>
    <th scope="row">Widget B</th>
    <td>$35K</td>
    <td>+2%</td>
    <td>$42K</td>
    <td>+20%</td>
  </tr>
</tbody>
</table>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}
thead tr:first-child {
  background-color: #34495e;
  color: white;
}
thead tr:last-child {
  background-color: #7f8c8d;
  color: white;
}
tbody th {
  background-color: #ecf0f1;
  text-align: left;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<table>
<caption>Year-over-Year Comparison</caption>
<colgroup>
  <col style="background-color: #f8f9fa;">
</colgroup>
<colgroup>
  <col style="background-color: #e3f2fd;">
  <col style="background-color: #bbdefb;">
</colgroup>
<colgroup>
  <col style="background-color: #fff3e0;">
  <col style="background-color: #ffe0b2;">
</colgroup>
<thead>
  <tr>
    <th scope="col">Product</th>
    <th scope="colgroup" colspan="2">2023</th>
    <th scope="colgroup" colspan="2">2024</th>
  </tr>
  <tr>
    <th scope="col"></th>
    <th scope="col">Sales</th>
    <th scope="col">Growth</th>
    <th scope="col">Sales</th>
    <th scope="col">Growth</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Widget A</th>
    <td>$50K</td>
    <td>+5%</td>
    <td>$65K</td>
    <td>+30%</td>
  </tr>
  <tr>
    <th scope="row">Widget B</th>
    <td>$35K</td>
    <td>+2%</td>
    <td>$42K</td>
    <td>+20%</td>
  </tr>
</tbody>
</table>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}
thead tr:first-child {
  background-color: #34495e;
  color: white;
}
thead tr:last-child {
  background-color: #7f8c8d;
  color: white;
}
tbody th {
  background-color: #ecf0f1;
  text-align: left;
}
</style>

Hiding Columns

<table>
<caption>Data Table with Hidden Column</caption>
<colgroup>
  <col>
  <col>
  <col style="visibility: collapse;">
  <col>
</colgroup>
<thead>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Email</th>
    <th scope="col">Password</th>
    <th scope="col">Status</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Alice Johnson</td>
    <td>alice@example.com</td>
    <td>••••••••</td>
    <td>Active</td>
  </tr>
  <tr>
    <td>Bob Martinez</td>
    <td>bob@example.com</td>
    <td>••••••••</td>
    <td>Active</td>
  </tr>
</tbody>
</table>

<p style="margin-top: 10px; color: #666; font-size: 0.9em;">
The password column is hidden using visibility: collapse
</p>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}
thead {
  background-color: #e74c3c;
  color: white;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<table>
<caption>Data Table with Hidden Column</caption>
<colgroup>
  <col>
  <col>
  <col style="visibility: collapse;">
  <col>
</colgroup>
<thead>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Email</th>
    <th scope="col">Password</th>
    <th scope="col">Status</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Alice Johnson</td>
    <td>alice@example.com</td>
    <td>••••••••</td>
    <td>Active</td>
  </tr>
  <tr>
    <td>Bob Martinez</td>
    <td>bob@example.com</td>
    <td>••••••••</td>
    <td>Active</td>
  </tr>
</tbody>
</table>

<p style="margin-top: 10px; color: #666; font-size: 0.9em;">
The password column is hidden using visibility: collapse
</p>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}
thead {
  background-color: #e74c3c;
  color: white;
}
</style>

Responsive Column Width

<table>
<caption>Responsive Column Widths</caption>
<colgroup>
  <col style="width: 20%;">
  <col style="width: 50%;">
  <col style="width: 15%;">
  <col style="width: 15%;">
</colgroup>
<thead>
  <tr>
    <th scope="col">ID</th>
    <th scope="col">Description</th>
    <th scope="col">Status</th>
    <th scope="col">Priority</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>#1001</td>
    <td>Implement user authentication system</td>
    <td>Active</td>
    <td>High</td>
  </tr>
  <tr>
    <td>#1002</td>
    <td>Fix navigation menu on mobile devices</td>
    <td>Done</td>
    <td>Medium</td>
  </tr>
  <tr>
    <td>#1003</td>
    <td>Update documentation with new features</td>
    <td>Pending</td>
    <td>Low</td>
  </tr>
</tbody>
</table>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}
thead {
  background-color: #16a085;
  color: white;
}
td:nth-child(3), td:nth-child(4) {
  text-align: center;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<table>
<caption>Responsive Column Widths</caption>
<colgroup>
  <col style="width: 20%;">
  <col style="width: 50%;">
  <col style="width: 15%;">
  <col style="width: 15%;">
</colgroup>
<thead>
  <tr>
    <th scope="col">ID</th>
    <th scope="col">Description</th>
    <th scope="col">Status</th>
    <th scope="col">Priority</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>#1001</td>
    <td>Implement user authentication system</td>
    <td>Active</td>
    <td>High</td>
  </tr>
  <tr>
    <td>#1002</td>
    <td>Fix navigation menu on mobile devices</td>
    <td>Done</td>
    <td>Medium</td>
  </tr>
  <tr>
    <td>#1003</td>
    <td>Update documentation with new features</td>
    <td>Pending</td>
    <td>Low</td>
  </tr>
</tbody>
</table>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}
thead {
  background-color: #16a085;
  color: white;
}
td:nth-child(3), td:nth-child(4) {
  text-align: center;
}
</style>

Combining with Classes

<table>
<caption>Styled Columns with Classes</caption>
<colgroup>
  <col class="col-name">
  <col class="col-data">
  <col class="col-data">
  <col class="col-highlight">
</colgroup>
<thead>
  <tr>
    <th scope="col">Product</th>
    <th scope="col">In Stock</th>
    <th scope="col">Sold</th>
    <th scope="col">Revenue</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Laptop Pro</td>
    <td>15</td>
    <td>42</td>
    <td>$37,758</td>
  </tr>
  <tr>
    <td>Wireless Mouse</td>
    <td>120</td>
    <td>385</td>
    <td>$9,625</td>
  </tr>
  <tr>
    <td>USB-C Cable</td>
    <td>250</td>
    <td>892</td>
    <td>$17,840</td>
  </tr>
</tbody>
</table>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 10px;
}
thead {
  background-color: #8e44ad;
  color: white;
}
.col-name {
  background-color: #f8f9fa;
}
.col-data {
  background-color: #e8f8f5;
}
.col-highlight {
  background-color: #fff3cd;
  font-weight: bold;
}
td:nth-child(2), td:nth-child(3), td:nth-child(4) {
  text-align: right;
}
</style>

Result

Interactive code playground requires JavaScript. Here's the code:

<table>
<caption>Styled Columns with Classes</caption>
<colgroup>
  <col class="col-name">
  <col class="col-data">
  <col class="col-data">
  <col class="col-highlight">
</colgroup>
<thead>
  <tr>
    <th scope="col">Product</th>
    <th scope="col">In Stock</th>
    <th scope="col">Sold</th>
    <th scope="col">Revenue</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Laptop Pro</td>
    <td>15</td>
    <td>42</td>
    <td>$37,758</td>
  </tr>
  <tr>
    <td>Wireless Mouse</td>
    <td>120</td>
    <td>385</td>
    <td>$9,625</td>
  </tr>
  <tr>
    <td>USB-C Cable</td>
    <td>250</td>
    <td>892</td>
    <td>$17,840</td>
  </tr>
</tbody>
</table>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 10px;
}
thead {
  background-color: #8e44ad;
  color: white;
}
.col-name {
  background-color: #f8f9fa;
}
.col-data {
  background-color: #e8f8f5;
}
.col-highlight {
  background-color: #fff3cd;
  font-weight: bold;
}
td:nth-child(2), td:nth-child(3), td:nth-child(4) {
  text-align: right;
}
</style>

CSS Styling Reference

/* Basic col styling */
col {
  background-color: #f0f0f0;
}

/* Width specification */
col {
  width: 25%;
}

col.narrow {
  width: 10%;
}

col.wide {
  width: 50%;
}

/* Background colors */
col.highlight {
  background-color: #fff3cd;
}

col.primary {
  background-color: #e3f2fd;
}

col.secondary {
  background-color: #f3e5f5;
}

/* Borders (requires border-collapse) */
table {
  border-collapse: collapse;
}

col {
  border-right: 2px solid #333;
}

/* Hiding columns */
col.hidden {
  visibility: collapse;
}

/* nth-child selectors */
col:nth-child(odd) {
  background-color: #f9f9f9;
}

col:nth-child(even) {
  background-color: #ffffff;
}

/* First and last columns */
col:first-child {
  background-color: #ecf0f1;
}

col:last-child {
  background-color: #fef5e7;
}

Best Practices

Use Within colgroup

Always place <col> elements inside a <colgroup> element.

Match Column Count

Ensure the total span of all <col> elements matches the number of table columns.

Use for Visual Styling

Primarily use <col> for background colors, widths, and borders.

Remember Empty Element

<col> is self-closing—don’t add closing tags or content.

Know CSS Limits

Only use supported CSS properties (background, border, width, visibility).

Test Across Browsers

Some CSS properties may behave differently across browsers.

Common Mistakes

Wrong: Adding Content to col

<!-- ❌ Bad: col is an empty element -->
<col>Column 1</col>

<!-- ✅ Good: no content -->
<col>

Wrong: Using Unsupported CSS

<!-- ❌ Bad: color doesn't work on col -->
<col style="color: red; font-weight: bold;">

<!-- ✅ Good: only supported properties -->
<col style="background-color: yellow; width: 30%;">

Wrong: Mismatched Column Count

<!-- ❌ Bad: 3 cols but 4 actual columns -->
<colgroup>
  <col>
  <col>
  <col>
</colgroup>
<thead>
  <tr>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
    <th>Col 4</th>
  </tr>
</thead>

<!-- ✅ Good: matching count -->
<colgroup>
  <col>
  <col>
  <col>
  <col>
</colgroup>

Applying background colors to columns
Setting consistent column widths
Adding borders to specific columns
Hiding columns with visibility: collapse
Visually grouping columns

Browser Support

The <col> element is supported in all browsers:

✅ Chrome (all versions)
✅ Firefox (all versions)
✅ Safari (all versions)
✅ Edge (all versions)
✅ Opera (all versions)
✅ Internet Explorer (all versions)

<table> - Parent table element
<colgroup> - Groups column elements
<caption> - Table caption
<thead> - Groups header rows
<tbody> - Groups body rows

<col> - Table Column Element

The <col> Element

Quick Example

Syntax

Attributes

span Attribute

Global Attributes

Deprecated Attributes

Common Use Cases

Styling Individual Columns

Setting Column Widths

Highlighting Specific Columns

Using the span Attribute

CSS Properties That Work on <col>

Supported Properties Example

Advanced Patterns

Alternating Column Groups

Hiding Columns

Responsive Column Width

Combining with Classes

CSS Styling Reference

Best Practices

Common Mistakes

Wrong: Adding Content to col

Wrong: Using Unsupported CSS

Wrong: Mismatched Column Count

When to Use <col>

Browser Support

Related Elements

Specifications

The `<col>` Element

`span` Attribute

Using the `span` Attribute

CSS Properties That Work on `<col>`

When to Use `<col>`