HTML <col> tag defines attributes for table columns within the <colgroup> element, allowing styling and formatting of columns, such as width, alignment, and background color. This tag does not contain closing tags.
- Column Properties allows setting visual aspects (like background color, width, and alignment) for specific columns.
- Grouped within <colgroup>, usually nested within the <colgroup>, enabling multiple columns to be collectively defined.
- Attributes specified in the
<col> can be applied to multiple columns at once, simplifying the table’s look.
html
<!DOCTYPE html>
<html>
<body>
<table>
<colgroup>
<col span="1"
style="background-color: green" />
<col span="1"
style="background-color: red" />
<col span="1"
style="background-color: none" />
</colgroup>
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
<tr>
<td>RAM</td>
<td>21</td>
<td>ECE</td>
</tr>
</table>
</body>
</html>
Syntax
<col style="property:value;">
Attributes
The various attributes that can be used with the col tag are listed below. Most of the attributes are not supported by HTML5.
Attributes
| Descriptions
|
|---|
span
| It is used to define the number of columns on which property will be applied.
|
style
| This attribute is used to define the CSS to change the properties of the column (deprecated).
|
align
| This attribute is used to set the alignment of the content of <col> element (deprecated).
|
width
| It is used to specify the width of a <col> element (deprecated).
|
charoff
| It is used to specify the number of characters the content will be aligned from the character specified by the char attribute (deprecated).
|
HTML <col> Tag – FAQs
Where should the <col> tag be placed in a table?
The <col> tag is placed inside the <colgroup> tag, which is within the <table> element, before any <thead>, <tbody>, or <tr> tags.
Can the <col> tag be used without the <colgroup> tag?
No, the <col> tag must be nested inside a <colgroup> tag. It cannot be used directly within the <table> tag.
How does the span attribute work in the <col> tag?
The span attribute in the <col> tag defines the number of columns the style or attribute should apply to. For example, span=”3″ applies the same style to three consecutive columns.
Is the <col> tag required when using the <colgroup> tag?
No, the <col> tag is optional. However, it allows you to specify styles for individual columns within the grouped columns defined by <colgroup>.
Can the <col> tag be used for responsive table design?
Yes, the <col> tag can be useful in responsive design by setting relative widths (e.g., percentages) or adjusting styles dynamically with media queries.