HTML Tutorial: Complete HTML Tutorial
About Lesson

HTML <col> Tag


Concept

The <col> tag in HTML is a powerful tool for managing the presentation of columns within a table. It’s part of the table structure and works in conjunction with the <colgroup> element. By using the <col> tag, you can define specific characteristics for one or more columns, such as width, alignment, or background color. This ensures uniformity and enhances the visual appeal of tables.

Implementation

Example 1: Defining Column Width

You can use the <col> tag to set a specific width for individual columns:

<table>
  <colgroup>
    <col style="width:50%">
    <col style="width:30%">
    <col style="width:20%">
  </colgroup>
  <!-- Table rows and cells here -->
</table>

Example 2: Applying Background Color to Multiple Columns

The <col> tag can also be used to apply the same background color to multiple columns using the span attribute:

<table>
  <colgroup>
    <col span="2" style="background-color:lime">
    <col style="background-color:blue">
  </colgroup>
  <!-- Table rows and cells here -->
</table>

Example 3: Combining with CSS Classes

You can combine the <col> tag with CSS classes for more flexible styling:

<colgroup>
  <col class="first-column">
  <col class="second-column">
</colgroup>
.first-column {
  background-color: yellow;
}
.second-column {
  background-color: blue;
}

Attributes


  • span: Specifies the number of columns a <col> element should span.
  • Global Attributes: The <col> tag supports all the global attributes in HTML.
  • Event Attributes: The <col> tag also supports all the event attributes in HTML.

Browser Support

Browser Support
Chrome Yes
Firefox Yes
Safari Yes
Opera Yes
IE Yes

Default CSS Settings

Most browsers will display the <col> element with the following default CSS settings:

col {
  display: table-column;
}

Conclusion

The <col> tag is an essential tool for web developers looking to create visually consistent and appealing tables. It offers flexibility in styling and ensures that the design remains uniform across different parts of the table.


By understanding and utilizing the <col> tag, you can enhance the user experience and make your tables more engaging and accessible.