HTML Col Tag

The <col> tag is used inside an HTML table to define styling or layout for one or more columns. It works together with the <colgroup> tag and helps you apply styles like width, background color, or border to entire columns, without needing to add styles to each <td> or <th> individually.

Syntax -
<col span="number" style="property:value;">...text here...</col>
Attribute Description
span Specifies the number of columns the col element needs to be applied.
style Used to add CSS styles to the column like background-color, width, etc.
How is <col> Different from Other Tags?

The <col> tag is used only in combination with <colgroup>, and is different from <td> or <th>, which define cell content. <col> is purely for styling purposes, and it doesn’t hold any data.

Example -

Scenario - Basic Table with Styled Columns

<!DOCTYPE html>
<html>
	<head>
		<title> Code formatting element example.. </title>
	</head>
	<body>
		<table>
			<caption>Employee details</caption>
			<colgroup>
				<col span="1" style="background-color: lightblue;">
				<col span="2" style="background-color: lightyellow;">
			</colgroup>
			<tr>
				<th>EMP name</th>
				<th>Designation</th>
			</tr>
			<tr>
				<td>Pawan</td>
				<td>Lead</td>
			</tr>
		</table>
	</body>
</html>
Output -
Employee details
EMP name Designation
Pawan Lead
Explaining Example -

The first column (ID) has a light blue background. The next two columns (Name and Department) have light yellow. We didn't have to add any styles inside <td> or <th> — the <col> tag did the job!