HTML Table Column Span
HTML Table Column Span is used to group one or more columns and apply specific formatting to these columns.
<col>
is the tag used to specify column span. span
property of <col>
tag to used to specify the number of columns in this column span.
Examples
In the following example, we group the first and second columns using <col span="">
, and specify a background color.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table, th, td {
border: 1px solid;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<colgroup>
<col span="2" style="background:#facfd2">
<col style="background:#f5e6ab">
</colgroup>
<thead>
<th>Name</th>
<th>Quantity</th>
<th>Available in (Months)</th>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>25</td>
<td>1</td>
</tr>
<tr>
<td>Banana</td>
<td>18</td>
<td>0.5</td>
</tr>
<tr>
<td>Cherry</td>
<td>36</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
Conclusion
In this HTML Tutorial, we learned about HTML Column Span, and how to use it to format multiple columns as one, with examples.