<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:
align
bgcolor
char
charoff
valign
width
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 aspan
attribute. <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.