HTML <col> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <col> element in HTML represents one or more columns within a <colgroup> element in a table. It is primarily used to apply styles or attributes to entire columns rather than individual cells. While it does not contain any content itself, it serves as a structural element that allows developers to manage the presentation of columns efficiently.

The <col> element is placed inside a <colgroup> container, which groups together multiple <col> elements. By using <col>, you can apply styles such as widths, backgrounds, or borders to an entire column, ensuring consistency across all rows of the table. This approach is particularly useful for tables that need a uniform appearance or responsive layout adjustments, as it eliminates the need to style each table cell individually.

Because <col> does not have any content, it is an empty, self-closing tag. Its purpose is entirely structural and stylistic. In modern HTML, it is commonly used in combination with CSS to enhance table design, making it easier to maintain and modify column-level formatting without altering the table’s data structure.

Properties

Permitted Parents: <colgroup> only, though it can be implicitly defined as its start tag is not mandatory. The <colgroup> must not have a span attribute.
Content: None. It is an empty element.
Start/End Tags: Start tag: required, End tag: forbidden

Example

HTML

<table border="1">

    <colgroup span="2" style="background-color: #DFF0D8;"></colgroup>

    <col span="1" style="background-color: lightblue;">

    <tr>

        <th>Country</th>

        <th>Capital</th>

        <th>Population (in millions)</th>

        <th>Language</th>

    </tr>

    <tr>

        <td>USA</td>

        <td>Washington D.C.</td>

        <td>331</td>

        <td>English</td>

    </tr>

    <tr>

        <td>France</td>

        <td>Paris</td>

        <td>67</td>

        <td>French</td>

    </tr>

    <tr>

        <td>Germany</td>

        <td>Berlin</td>

        <td>83</td>

        <td>German</td>

    </tr>

</table>

Result

Editor

Attributes

span: Specifies how many columns to span.

Global Attributes

The <col> tag also supports the Global Attributes in HTML5

Event Attributes

The <col> tag also supports the Event Attributes in HTML5

Browser Support

The following information will show you the current browser support for the HTML <col> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.