The <col>-column attribute

The <col> tag is used to define the properties of one or more columns in a table, typically used in conjunction with <colgroup>. It does not directly contain content but influences the appearance of entire columns through styles or attributes, such as width, background color, etc.

Basic Usage of <col>

<col> must be nested within <colgroup> and is an empty element (no closing tag required). A typical structure is as follows:

<table>
  <colgroup>
    <col style="background-color: yellow;">
    <col span="2" style="width: 100px;">
  </colgroup>
  <tr>
    <td>First Column</td>
    <td>Second Column</td>
    <td>Third Column</td>
  </tr>
</table>

Effect:

Core Attributes

span Attribute

Defines the number of columns affected by <col>, with a default value of 1. For example:

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

This adds a gray background to the first 3 columns.

style or class

Controls column styles via inline styles or CSS classes:

<style>
  .highlight { background-color: #ffeb3b; }
</style>
<colgroup>
  <col class="highlight">
  <col style="width: 20%;">
</colgroup>

Practical Use Cases

Fixed Column Width

Combine with the width attribute for responsive layouts:

<colgroup>
  <col style="width: 150px; min-width: 150px;">
  <col style="width: 30%;">
</colgroup>

Zebra-Striped Tables

Alternate column colors:

<colgroup>
  <col style="background: #f9f9f9;">
  <col style="background: #fff;">
  <col style="background: #f9f9f9;">
</colgroup>

Notes

1. Priority Issues: Styles in <col> are overridden by inline styles in cells (<td>/<th>):

   <col style="color: red;">
   <td style="color: blue;">Text remains blue</td>
   

2. Column Spanning: <col> cannot replace colspan; it is only for styling:

   <!-- Incorrect Example -->
   <col span="2"> <!-- Does not merge cells -->
   

3. Dynamic Modification: Manipulate <col> via JavaScript:

   document.querySelector('col').style.backgroundColor = 'green';
   

Compatibility and Alternatives

Older browsers may have incomplete support for <col>. An alternative is to add classes directly to cells:

<tr>
  <td class="column-1">Content</td>
  <td class="column-2">Content</td>
</tr>

Advanced Techniques

Combining with nth-child Selector

When <col> cannot meet complex needs, use CSS instead:

td:nth-child(2n) { background: #f5f5f5; }

Print Optimization

Control column pagination during printing:

<col style="page-break-inside: avoid;">

Collaboration with Other Tags

<col> is often used with the following tags:

• <colgroup>: Defines column groups
• <table>: Main container
• <caption>: Table title

Example:

<table>
  <caption>Sales Data</caption>
  <colgroup>
    <col style="width: 50%;">
    <col style="width: 25%;">
    <col style="width: 25%;">
  </colgroup>
  <thead>
    <tr><th>Product</th><th>Sales</th><th>Revenue</th></tr>
  </thead>
</table>