HTML Element: col

The HTML <col> element defines a column within a table, and is often used in combination with the <colgroup> element. It is used to apply properties to all cells in a specific column of a table.

Syntax

1	<col attribute1="value1" attribute2="value2"...>

Example

This example shows the usage of the <col> element within a table.

<table>
  <colgroup>
    <col style="width: 300px">
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>Product Name</th>
      <th>Description</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Product 1</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam euismod, nunc quis bibendum varius, metus urna hendrerit augue, id congue purus odio id lectus.</td>
      <td>$9.99</td>
    </tr>
    <tr>
      <td>Product 2</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam euismod, nunc quis bibendum varius, metus urna hendrerit augue, id congue purus odio id lectus.</td>
      <td>$14.99</td>
    </tr>
    <tr>
      <td>Product 3</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam euismod, nunc quis bibendum varius, metus urna hendrerit augue, id congue purus odio id lectus.</td>
      <td>$19.99</td>
    </tr>
  </tbody>
</table>

Result

Notice how the first column in the table is always 300px wide, no matter how wide the table is. Check the full page demo to see more clearly.

Please accept marketing cookies to load this content.

Attributes

The <col> tag supports Global Attributes in HTML. Global Attributes are common to all HTML elements and can be used on all of them (though they may not have much of an effect on some of them).

The <col> element has the following attributes:

span: specifies the number of columns a <col> element should span.

Content

The <col> element does not accept any content.

Tables and tabular data are hugely important for web pages. HTML gives us a large number of elements for structuring tables.

<td>
<tfoot>
<th>
<thead>
<tr>

Learn More

To learn more about the <col> element, read the official HTML specification.