HTML <Col> Tag

By Jonathan Griffin. Editor, SEO Consultant, & Developer.

· 2 min read

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>
      

Specification

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes