HTML Col Tag

This post aims to explain col Tag. We hope it will satisfy the educational needs of our readers.

The HTML <col> tag is used to define a column within a table. It works in conjunction with the <colgroup> tag, which is used to group <col> elements together into a single column group.

Change the background color of the three columns by using the <colgroup> and <col> tags:


<!DOCTYPE html> <html><body><table> <colgroup> <col span="2" style="background-color:blue"> <col style="background-color:green"> </colgroup> <tr> <th>Tesla</th> <th>Model</th> <th>Price</th> </tr> <tr> <td>Truck</td> <td>Model X</td> <td>$80,000</td> </tr> </table></body></html>

The following CSS code aligns text in table columns:


<!DOCTYPE html> <html> <body> <table style="width:100%"> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>Mrexamples Col Tag</td> <td style="text-align:right">$53</td> </tr> <tr> <td>2489604</td> <td>Learn Col Tag</td> <td style="text-align:right">$670</td> </tr> </table> </body> </html>

Using CSS to vertical-align text in table columns:


<!DOCTYPE html> <html> <body> <table style="height:400px"> <tr><th>Year</th> <th style="vertical-align:bottom">expence</th> </tr> <tr><td>2023</td> <td style="vertical-align:bottom">$100,000</td> </tr> </table> </body> </html>

Table column widths can be defined (using CSS) as follows:


<!DOCTYPE html> <html> <body> <table> <tr> <th style="width:240px">Wedding</th> <th style="width:120px">expence</th> </tr> <tr><td>December</td> <td>$9000</td> </tr><tr> <td>March 2023</td><td>$800</td> </tr> </table> </body> </html>

Uses and Definition

The Tag col <col> identifies column properties for every column included in an <colgroup> element.

The <col> tag allows you to apply styles to entire columns instead of applying styles to individual cells.

Browser Compatibility

<col> Yes Yes Yes Yes Yes


Attribute Value Overview
span number Indicates how many columns an <col> element should span

Global Attributes

The Tag col <col> is also compatible with HTML Global Attributes.

Event Attributes

The <col> tag is also capable of accepting HTML Event Attributes.

CSS Default Settings

The majority of browsers show the <col> element using these default values:

col {
display: table-column;

HTML col tag Benefits

The HTML <col> tag provides several benefits when used in conjunction with the <colgroup> tag to define columns in a table:

  • By using the <col> tag, authors can apply attributes such as styles, width, and other properties to entire columns, rather than having to specify them for each individual cell in the column. This can simplify the markup of large tables and make it easier to maintain and update the table code.
  • Applying attributes such as background color or font size to an entire column using the <col> tag can help to ensure that the styling is consistent across all cells in the column. This can be particularly useful for large tables with many rows and columns, where it would be time-consuming to apply styles to each individual cell.
  • The <col> tag can be used to add headers and other metadata to columns in a table, making it easier for screen readers and other assistive technologies to interpret the table and convey its contents to users with disabilities.
  • Using the <col> tag to apply styles and other attributes to columns can help to reduce the overall size of the table markup, which can improve page load times and reduce server load.
If this article helped you to meet your desired goals, then do leave your reaction below as a source of appreciation or a form of feedback for the improvements on this site.

We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *