HTML <col> tag is used to define column properties for columns within a <table>. It is typically used with the <colgroup> tag, which groups multiple <col> elements to apply styles or attributes to entire columns in a table. HTML <col> tag allow you to style or define attribute (like width, background color, etc.) for one or more columns in a table without having to apply the styles to each individual <td> or <th> element.
<col span="number" style="property:value;">
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML col Tag Example</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
text-align: left;
}
colgroup col:nth-child(1) {
background-color: #f2f2f2;
width: 150px;
}
colgroup col:nth-child(2) {
background-color: #ffebcc;
width: 100px;
}
colgroup col:nth-child(3) {
background-color: #d1e7dd;
width: 120px;
}
</style>
</head>
<body>
<h2>Monthly Sales Data</h2>
<table>
<colgroup>
<col span="1">
<col span="1">
<col span="1">
</colgroup>
<thead>
<tr>
<th>Product</th>
<th>Sales</th>
<th>Profit</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>200</td>
<td>$40,000</td>
</tr>
<tr>
<td>Smartphone</td>
<td>500</td>
<td>$75,000</td>
</tr>
<tr>
<td>Tablet</td>
<td>150</td>
<td>$20,000</td>
</tr>
</tbody>
</table>
</body>
</html>