HTML / HTML Tags

HTML <Col> Tag

Dec 12, 2022
2 min read
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>

Specification

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes