HTML <Col> Tag

Definition

The <col> tag specifies common column properties for all columns within a <colgroup> element.

Example

<table>
  <colgroup>
    <col span="2" style="background-color:red;">
    <col style="background-color:green;">
  </colgroup>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
  </tr>
  <tr>
    <td>CELL</td>
    <td>CELL</td>
    <td>CELL</td>
  </tr>
</table>

Usage

• The <col> tag is used to apply styles to an entire column instead of repeating styles for each cell.
• It must be a child of a <colgroup> element with no span attribute.
• You can use the optional span attribute to target multiple columns.
• No end tag is required.

Attributes

The <col> element supports the Global Attributes, as well as the following:

• span

  The span attribute specifies the number of columns that the <col> element should span. The value of the <span> attribute must be a positive number greater than zero.

Best Practices

• You may want to use the CSS nth-child selector to target specific columns. In the following example, the CSS will set the first column background to red, and the third to blue:

  td { 
    background-color: black;  
    color: white; 
    font-family: arial;
    padding: 0.3rem;
  }  
  td:nth-child(1) {  
  background-color: red;  
  color: blue; 
  }  
  td:nth-child(3) {  
    background-color: blue;  
    color: orange; 
  }

  <table>
    <tbody>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
        <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </tbody>
  </table>

  Try it Yourself

Specification

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile