HTML <col> Tag

The <col> tag in HTML is used to define column properties for each column within a table. It is especially useful for applying styles to entire columns instead of individual cells, promoting cleaner, more efficient code and easier styling. The <col> tag is an empty element, meaning it does not contain any content and is typically used within a <colgroup> tag.

Syntax

<col span="number" class="classname" style="style_value" id="id_value">

Attributes

Example

<table border="1">
    <colgroup>
        <col style="background-color:#f0f0f0">
        <col style="background-color:#e0e0e0">
    </colgroup>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
  </tr>
  <tr>
    <td>Data 1A</td>
    <td>Data 1B</td>
  </tr>
  <tr>
    <td>Data 2A</td>
    <td>Data 2B</td>
  </tr>
</table>

More Examples

Applying a Class for Styling

<style>
    .highlight-col {
        background-color: #c0f0c0;
        font-weight: bold;
    }
</style>

<table border="1">
    <colgroup>
        <col class="highlight-col">
        <col>
    </colgroup>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>25</td>
    </tr>
</table>

In this example, the first column will have a light green background and bold text, defined by the .highlight-col class.

Using the Span Attribute

<table border="1">
  <colgroup>
    <col span="2" style="background-color:#d0e0ff">
    <col style="background-color:#f0d0f0">
  </colgroup>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Data 1A</td>
    <td>Data 1B</td>
    <td>Data 1C</td>
  </tr>
  <tr>
    <td>Data 2A</td>
    <td>Data 2B</td>
    <td>Data 2C</td>
  </tr>
</table>

Here, the first two columns get the same styling due to the span="2" attribute.

Using id for JavaScript Manipulation

<table border="1">
  <colgroup>
    <col id="special-col" style="background-color:#f0f0f0;">
    <col>
  </colgroup>
  <tr>
    <th>Column A</th>
    <th>Column B</th>
  </tr>
  <tr>
    <td>Data A1</td>
    <td>Data B1</td>
  </tr>
  <tr>
    <td>Data A2</td>
    <td>Data B2</td>
  </tr>
</table>

<script>
  document.getElementById('special-col').style.border = "2px solid red";
</script>

In this instance, JavaScript is used to add a border to the column with the id="special-col".

Browser Support

The <col> tag is supported in all major browsers:

• Chrome
• Edge
• Firefox
• Safari
• Opera

Notes and Tips

• The <col> tag must be a child of a <colgroup> element.
• While inline styles via the style attribute are possible, it’s best practice to use CSS classes for better separation of concerns and reusability.
• If you apply styles using both a style attribute on the <col> tag and a CSS rule, the inline styles will override the CSS rule.
• It is more effective when you have multiple tables which require the same styling for some or all of its columns.
• The <col> tag can be used in combination with other table styling techniques for complex layout needs.