The HTML <col> span attribute
The span attribute on <col> and <colgroup> sets how many table columns that element covers. With <col span="2">, one style rule reaches two neighboring columns at once. Unlike colspan, it never merges cells, and its value can go from 1 to 1000.
Overview
The HTML span attribute tells a <col> or <colgroup> how many consecutive table columns it stands for. A <col span="3"> represents three columns, so a background color or width set on it applies to each. To stretch one cell across columns, use colspan instead.
Only a few CSS properties have any effect on a col. Background and border properties work, though borders need border-collapse: collapse on the table. So do visibility: collapse, which hides the columns, and width, which acts as a minimum width.
Valid values run from 1 to 1000, and 1 is the default. A value of 0, a negative number or text such as abc counts as 1, while 2.5 counts as 2 and anything above 1000 counts as 1000.
A colgroup takes span only while it has no col children. Once it contains a col, the table model ignores the colgroup's span and counts its cols instead, even though the span property still reports the attribute's number.
Syntax
<table>
<colgroup>
<col>
<col span="2" style="background-color: #eef4ff">
</colgroup>
<tr><th>Plan</th><th>Monthly</th><th>Yearly</th></tr>
<tr><td>Basic</td><td>$5</td><td>$50</td></tr>
</table>Values
| Value |
|---|
| A positive integer (default 1). |
Example
<p>Pick a span to see which columns turn blue.</p>
<p><label for="n">span on the blue col</label>
<select id="n">
<option>1</option>
<option>2</option>
<option selected>3</option>
<option value="0">0 (invalid)</option>
</select></p>
<table style="border-collapse: collapse">
<colgroup>
<col>
<col id="blue" span="3" style="background-color: #dbeafe">
</colgroup>
<tr><th>Plan</th><th>Monthly</th><th>Yearly</th><th>Seats</th></tr>
<tr><td>Basic</td><td>$5</td><td>$50</td><td>1</td></tr>
<tr><td>Team</td><td>$12</td><td>$120</td><td>5</td></tr>
</table>
<p id="msg" role="status"></p>
<script>
const blue = document.getElementById('blue');
const pick = document.getElementById('n');
const msg = document.getElementById('msg');
function show() {
blue.setAttribute('span', pick.value);
const n = blue.span;
const names = [...document.querySelectorAll('th')].slice(1, 1 + n).map(th => th.textContent);
const list = n === 1 ? names[0] : names.slice(0, -1).join(', ') + ' and ' + names[n - 1];
msg.textContent = 'span="' + pick.value + '" covers ' + n + (n === 1 ? ' column (' : ' columns (') + list + ').';
}
for (const cell of document.querySelectorAll('th, td')) cell.style.padding = '4px 10px';
pick.addEventListener('change', show);
show();
</script>Best practices
- Set
spanto the number of neighboring columns that share one job, such as two price columns. - Count columns from the start of each row. Each col begins where the previous one ended, so in
<col><col span="2">, the first col covers column one and the second covers columns two and three. - Make the spans add up to the table's real column count. A col that reaches past the last column of cells leaves a column with no cells, which makes the table invalid.
- Keep cell and row backgrounds transparent where a column color should show. Row groups, rows and cells paint over the column background.
