HTML Col Class Attribute - Dofactory

HTML <col> class Attribute HTML <code> HTML <colgroup>

A class attribute on a <col> tag assigns one or more classnames to the element.

Classes are used to style elements.

Classnames are defined in a stylesheet or in a local <style> element.

Example

#

A class attribute styling a <col> element.

Id	First Name	Last Name	Country
ART-303	Vincent	Van Gogh	Netherlands
ART-877	Paul	Cézanne	France

<style> table.tb { width:100%; border-collapse: collapse; } .tb th, .tb td { padding:3px; border: 1px solid #777; } .mint { background-color: mintcream; } </style> <table class="tb"> <colgroup> <col class="mint"> <col span="3"> </colgroup> <tr> <th>Id</th> <th>First Name</th> <th>Last Name</th> <th>Country</th> </tr> <tr> <td>ART-303</td> <td>Vincent</td> <td>Van Gogh</td> <td>Netherlands</td> </tr> <tr> <td>ART-877</td> <td>Paul</td> <td>Cézanne</td> <td>France</td> </tr> </table> Try it live

Using class

#

The class attribute assigns one or more classnames to the <col> tag.

Multiple classnames are separated by a space.

Classes (i.e. classnames) are used for styling the col element.

JavaScript uses classes to access elements by classname.

Tip: class is a global attribute that can be applied to any HTML element.

Syntax

#

<col class="classnames" />

Values

#

Value	Description
classnames	One or more space-separated class names.

More Examples

#

A class attribute styling a <col> element. Clicking the button toggles a classname that changes the background color.

Id	First Name	Last Name	Country
ART-303	Vincent	Van Gogh	Netherlands
ART-877	Paul	Cézanne	France

Toggle class <style> table.tbl { width:100%; border-collapse: collapse; } .tbl th, .tbl td { padding:3px; border: 1px solid #777; } .col-mint { background: mintcream; } .col-blue { background: lightblue; } </style> <table class="tbl"> <colgroup> <col id="mycol" class="col-mint"> <col span="3"> </colgroup> <tr> <th>Id</th> <th>First Name</th> <th>Last Name</th> <th>Country</th> </tr> <tr> <td>ART-303</td> <td>Vincent</td> <td>Van Gogh</td> <td>Netherlands</td> </tr> <tr> <td>ART-877</td> <td>Paul</td> <td>Cézanne</td> <td>France</td> </tr> </table> <br/> <button onclick="toggle();">Toggle class</button> <script> let toggle = () => { let col = document.getElementById("mycol"); col.classList.toggle("col-blue"); } </script> Try it live

Code explanation

Two CSS classes are defined in the <style> element.

The class attribute in <col> assigns one classname.

Repeatedly clicking the button toggles the second class, changing the background color of the element.

Browser support

#

Here is when class support started for each browser:

Chrome	1.0	Sep 2008
Firefox	1.0	Sep 2002
IE/Edge	1.0	Aug 1995
Opera	1.0	Jan 2006
Safari	1.0	Jan 2003

You may also like

#

• Our HTML col Tag Reference
• Our HTML class Attribute Reference
• Our CSS Tables Tutorial

Back to <col>