Menu

HTML col Tag

HTML col Tag

HTML <col> tag is used to define the properties of each column of a table separately.

  • The <col> tag is defined inside the <colgroup> tag which itself is defined in the <table> tag.
  • Each <col> tag in a <colgroup> tag represents a column of the table. One single <col> tag can represent more than one consecutive column too, by using the span attribute.
  • The <col> tag does not have an ending tag.

HTML <col> Tag - Syntax and Usage

The <col> element requires the start(opening) tag, the required syntax for same is given below:

<col style=" " />

HTML <col> Tag Basic Example

Below we have a basic example of the <col> tag:

<!doctype html>
<html>
    <head>
        <title>
            Example of col element.
        </title>
    </head>
    <body>
        <table>
            <colgroup>
                <col style="background-color:green" />
                <col style="background-color:orange" />
                <col style="background-color:red" />
                <col style="background-color:lightblue" />
            </colgroup>
            <tr>
                <th>Emp Id</th>
                <th>Emp name</th>
                <th>DOB</th>
                <th>Address</th>
            </tr>
            <tr>
                <td>001</td>
                <td>Palak</td>
                <td>08-09-1985</td>
                <td>11, Adarsh Nagar</td>
               
            </tr>
            <tr>
                <td>002</td>
                <td>Preet</td>
                <td>08-10-1984</td>
                <td>23,New Delhi</td>
               
            </tr>
            <tr>
                <td>003</td>
                <td>Tilak</td>
                <td>22-05-1992</td>
                <td>Noida Sec-62</td>
               
            </tr>
        </table>
    </body>
</html>

In the code example above, we have specified 4 <col> tags to style the 4 columns of the table. Now, let's see how we can use a single <col> tag to style multiple columns of a table.

In the example below, we have 2 <col> tags covering 4 columns of the table, using the span attribute with value 2 each.

<table>
    <colgroup>
        <col span="2" style="background-color:green" />
        <col span="2" style="background-color:orange" />
    </colgroup>
    <tr>
        <th>Emp Id</th>
        <th>Emp name</th>
        <th>DOB</th>
        <th>Address</th>
    </tr>
    <tr>
        <td>001</td>
        <td>Palak</td>
        <td>08-09-1985</td>
        <td>11, Adarsh Nagar</td>       
    </tr>
</table>

Output:

HTML col tag example

In the example below, we have 2 <col> tags covering 4 columns of the table, using the span attribute with value 3 and one <col> tag without the span attribute.

<table>
    <colgroup>
        <col span="3" style="background-color:green" />
        <col style="background-color:orange" />
    </colgroup>
    <tr>
        <th>Emp Id</th>
        <th>Emp name</th>
        <th>DOB</th>
        <th>Address</th>
    </tr>
    <tr>
        <td>001</td>
        <td>Palak</td>
        <td>08-09-1985</td>
        <td>11, Adarsh Nagar</td>       
    </tr>
</table>

Output:

HTML col tag example

HTML <col> Tag Attributes

This element does not have any specific attributes although this element supports Global attributes and Event attributes.

The main attribute for the <col> tag is the span attribute which is used to define how many columns will the <col> tag cover.

Default CSS style for HTML <col> tag

col
{
   display:table-column;
}

Browser Support for HTML <col> tag

Following browsers support this attribute:

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 4+
  • Apple Safari 1+
  • Opera 7+