HTML Guides for colspan

The colspan attribute of a <td> takes digits only, so a single space after the number, as in colspan="2 ", makes the value invalid.

The space usually comes from a template. In <td colspan="{{ span }} "> or <td colspan="<?php echo $span; ?> ">, the space before the closing quote ends up in the attribute, right after the number. A helper that pads numbers to a fixed width has the same effect. A space before the number (" 2") or a line break inside the quotes gets the same error. The character after "saw" is the first one that isn't a digit: a blank here, p in 2px, % in 50%. A value with markup in it, like 2><span class=, means a closing quote is missing.

The HTML standard requires colspan to be a valid non-negative integer greater than zero and no larger than 1000, which is one or more digits with nothing around them. Browsers skip leading spaces, read the digits and ignore the rest, so "2 " still spans two columns. The validator's table check counts a cell with a trailing space as one column, though, so a "table row was N columns wide" warning often appears alongside this error.

Fix the template so the closing quote comes right after the number, or trim the value before printing it.

Invalid example

<table>

<tr>

<th>Item</th>

<th>Qty</th>

<th>Price</th>

</tr>

<tr>

<td>Notebook</td>

<td>2</td>

<td>$8</td>

</tr>

<tr>

<td colspan="2 ">Total</td>

<td>$8</td>

</tr>

</table>

Valid example

<table>

<tr>

<th>Item</th>

<th>Qty</th>

<th>Price</th>

</tr>

<tr>

<td>Notebook</td>

<td>2</td>

<td>$8</td>

</tr>

<tr>

<td colspan="2">Total</td>

<td>$8</td>

</tr>

</table>

The colspan attribute of a <th> takes a positive whole number written with digits only, and the validator names the first character in the value that isn't a digit.

colspan sets how many columns a header cell spans. The HTML standard requires a valid non-negative integer greater than zero and no larger than 1000, such as 2 or 3. Units, percentages, decimals, signs, spaces, quotes and keywords like auto all make the value invalid. The character after "saw" is where the number stopped: p in 2px, % in 100%, . in 1.5, - in -1.

A value that contains markup, like 2><span class=, usually means a quote is missing. In <th colspan="2><span class="label">, nothing closes the quote after 2, so the parser reads on to the next " and puts everything in between into colspan. The <span> start tag is lost, and what's left of it becomes stray attributes on the <th>. That's why errors like "No space between attributes" and "Quote in attribute name" usually appear next to this one. When the number is missing too, the value starts right at the >. A CMS or rich text editor can store the broken attribute with the < escaped as <, so check the saved content as well as the template.

Browsers read the leading digits and ignore the rest, so 2px still spans two columns. A value that doesn't start with a digit, or is zero, falls back to 1. The header then covers one column and every cell after it in the row moves over, so screen readers can announce data cells under the wrong header.

Write the number on its own, without a unit, and close the attribute's quote before the >.

Invalid example

<table>

<tr>

<th colspan="2px">Name</th>

<th colspan="2><span class="label">Contact</span></th>

</tr>

<tr>

<td>Ada</td>

<td>Lovelace</td>

<td>ada@example.com</td>

<td>555-0100</td>

</tr>

</table>

Valid example

<table>

<tr>

<th colspan="2">Name</th>

<th colspan="2"><span class="label">Contact</span></th>

</tr>

<tr>

<td>Ada</td>

<td>Lovelace</td>

<td>ada@example.com</td>

<td>555-0100</td>

</tr>

</table>

The <col> elements in this table declare more columns than the rows use, and no <td> or <th> begins in the reported range.

Each <col> inside a <colgroup> adds one column to the table, or as many columns as its span attribute says, so <col span="4"> declares four. The HTML table model requires every column to have at least one cell that starts in it. A cell that only crosses a column through colspan doesn't count. With <col span="4"> and rows made of <th colspan="4">, or of <td> followed by <td colspan="3">, cells start only in columns 1 and 2, and the validator reports columns 3 and 4 together as the range 3…4.

This often happens in layout tables that declare a fine grid in the <colgroup> and then merge those columns with colspan in every row. It also happens when the rows are shorter than the column markup, which adds a second error: "A table row was 2 columns wide, which is less than the column count established using column markup (4)". When only one column is empty, the validator names that single column ("Table column 4") instead of a range.

To fix it, declare only the columns the rows use. Remove <col> elements or lower their span, and reduce the colspan values to match. Deleting the <colgroup> alone isn't enough: the oversized colspan then creates the empty columns itself, and the validator reports them as established by th or td instead.

Invalid example

The <col> declares four columns, but cells start only in the first two:

<table>

<colgroup>

<col span="4">

</colgroup>

<tr>

<th colspan="4">Opening hours</th>

</tr>

<tr>

<td>Monday</td>

<td colspan="3">9:00 to 17:00</td>

</tr>

</table>

Valid example

Two columns in the <colgroup>, and a cell starts in each of them:

<table>

<colgroup>

<col class="day">

<col class="hours">

</colgroup>

<tr>

<th colspan="2">Opening hours</th>

</tr>

<tr>

<td>Monday</td>

<td>9:00 to 17:00</td>

</tr>

</table>