In this section, we will see what <col> element is and how it works.

Column in HTML: What is <col> Tag in HTML?

HTML <col> element is used to change the format of each column in an HTML table.

When we say properties, this includes changing styles and CSS properties as well.

For example, with this element, we can change the background color of the entire columns of a table in HTML!

This element sits within HTML <colgroup> element.

Both <colgroup> and <col> elements sit within a <table> element and so are considered as part of that table.

Inside the <colgroup> element, the use of <col> element represents one column in the target table.

So if, for example, there are 2 columns in the target table and we set only one <col> element for that table, unless we’re not using the span attribute in that <col> element, then we’re only covering one column of the target table.

HTML <col> Tag Syntax:

<col properties>

HTML <col> Tag Values

HTML <col> element is a single element, so it doesn’t have a body to set values for. We only use it to set or change the properties of columns.

Example: using <col> tag in HTML

See the Pen using <col> tag in HTML by Omid Dehghan (@odchan1) on CodePen.

In this example, the table has three columns. So we used the <col> element 3 times to cover all three columns of the table.

The first <col> element is used to change the background color of the first column to red, the second <col> element is used to change the background color of the second column to pink and the last one is used to set the background color of the last column (the third one) to yellow.

HTML <col> Tag Attributes

HTML <col> element has only one attribute and that is called `span`. The span attribute allows a <col> element to cover more than just one column!

What is span attribute in HTML <col> Tag? HTML Table Column Width

As mentioned before, the span attribute is used to allow a <col> element to cover more than one column!

The value of this attribute is a number and so if we set the value to 2, for example, that means the target <col> element should cover two columns of the target table.

HTML span Attribute in <col> Tag Syntax:

<col span = "Number" >

<col> Tag span Attribute Values

The value of the span attribute is a number. This number declares how many columns of the target table this <col> element should cover.

Example: column width HTML table

See the Pen column width HTML table by Omid Dehghan (@odchan1) on CodePen.

In this example, the value of the span attribute for the first <col> element is set to 2. This means the first <col> element should cover the first two columns of the target table.

So as a result, because in the first <col> element, we changed the background color to red, this change of color applied to the first two columns of the target table.