# A table row was X columns wide and exceeded the column count established using column markup (Y).

> Canonical HTML version: https://rocketvalidator.com/html-validation/a-table-row-was-x-columns-wide-and-exceeded-the-column-count-established-using-column-markup-y
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

A row in this table has more cells than its `<colgroup>` and `<col>` elements declare, so some of its cells sit past the last column the markup defines.

When a table has column markup, that markup sets the column count before any row is read. Each `<col>` adds one column, or as many as its `span` attribute says. A `<colgroup>` with no `<col>` inside adds the number in its own `span`, which defaults to 1. A row is X columns wide when its cells add up to X, with each cell counting as many columns as its `colspan`. The validator reports this error once for every row wider than the Y columns the markup declares.

A common cause is an empty `<colgroup></colgroup>` that a table editor or template writes into every table. It still counts as one column, so every row of a table with two or more columns triggers the error. Another cause is a column added to the rows but not to the `<colgroup>`. Browsers still show the extra cells, but styles set on `<col>`, such as `width` or `background-color`, don't reach the columns the markup leaves out.

To fix it, declare every column the rows use: add the missing `<col>` elements, raise the `span`, or remove a `<colgroup>` that doesn't style anything.

## Invalid example

The `<colgroup>` declares one column, but each row has two cells:

```html
<table>
  <colgroup>
    <col class="item">
  </colgroup>
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Coffee</td>
    <td>2.50</td>
  </tr>
</table>
```

## Valid example

One `<col>` for each column in the rows:

```html
<table>
  <colgroup>
    <col class="item">
    <col class="price">
  </colgroup>
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Coffee</td>
    <td>2.50</td>
  </tr>
</table>
```
