<col>
<col> Tag
The <col> element in HTML specifies column properties within a <colgroup> element. It helps apply styling and formatting consistently to specific columns in a table. The <col> element can only be used inside a <colgroup> that does not have a span attribute.
Syntax
<col style="property:value">
<col> Demo
The <colgroup> element groups table columns, and <col> elements inside it allow for styling individual columns. The span attribute on <col> determines how many columns it affects, with a default value of 1, enabling uniform styling across multiple columns.
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Data 1 | Data 2 | Data 3 |
<table>
<colgroup>
<col style="background-color: #f0f0f0; color:blue;">
<col style="width: 150px;">
<col>
</colgroup>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
Example
- The
<colgroup>element is used to group columns for styling or layout purposes. - The first column has a background color applied.
- The second column has a specific width set.
- The third column follows the default styling.
span Attribute
The span attribute determines how many consecutive columns a <col> element affects. The default value is 1, and it must always be a positive integer greater than zero.
Deprecated Attributes
The following attributes were previously used in <col> but are now obsolete and should be replaced with CSS:
alignbgcolorcharcharoffvalignwidth
align
Previously, the align attribute controlled horizontal text alignment (left, center, right, justify, or char). It is now deprecated, and the text-align CSS property should be used instead on <td> and <th> elements.
bgcolor
This attribute allowed setting a background color for each column using a color keyword or a hexadecimal value. It is now obsolete, and the background-color CSS property should be used instead.
char
The char attribute was meant to align text based on a specific character (e.g., a decimal point for numbers). However, it is no longer supported and does not affect modern HTML rendering.
charoff
This attribute was used to define the offset for the char attribute, determining how far the alignment character should be positioned. It is no longer supported in HTML5.
valign
Previously, the valign attribute controlled vertical text alignment in a column (top, middle, bottom, or baseline). This is now handled using the vertical-align CSS property on <td> and <th>.
width
The width attribute was used to set a column's width using pixels, percentages, or relative values. It is now deprecated in favor of the CSS width property.
Usage Notes
- The
<col>element must be placed inside a<colgroup>that does not have aspanattribute. <col>does not structurally group columns; its purpose is purely for applying styles.- Only a limited number of CSS properties apply directly to
<col>.
Conclusion
The <col> tag in HTML is used within a <colgroup> element to apply consistent styles or properties to specific columns in a table. The span attribute determines how many columns the <col> element affects.
<caption>
The HTML <caption> element serves as a title or description for a table, appearing as the first child of the <table> element to enhance clarity and accessibility.
<colgroup>
The HTML <colgroup> element clusters multiple <col> elements in a table, enabling the application of common styles and properties to those columns for improved formatting.