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

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

In HTML, the structure of a `<table>` is implicitly defined by its rows and columns. The first `<tr>` in a table (or table section like `<thead>`, `<tbody>`, or `<tfoot>`) establishes the expected column count for the entire table. When a subsequent row contains more cells than the first row, the validator raises this error because the table's column grid becomes inconsistent.

Browsers will still attempt to render mismatched tables, but the results can be unpredictable and problematic. Screen readers and other assistive technologies rely on a well-formed table grid to correctly associate data cells with their headers. An inconsistent column count can cause these tools to misread or skip content, making the table inaccessible to users who depend on them. Additionally, inconsistent tables are harder to style with CSS and can lead to unexpected layout shifts.

There are several common causes for this issue:

- **Missing cells in the first row** — The first row has fewer `<td>` or `<th>` elements than subsequent rows.
- **Forgotten `colspan`** — A cell in the first row should span multiple columns but is missing a `colspan` attribute.
- **Extra cells in later rows** — A row further down the table has more cells than intended.
- **Mismatched `colspan` arithmetic** — The sum of cells and their `colspan` values doesn't add up consistently across rows.

To fix this, review every row in the table and ensure the total column count (accounting for `colspan` and `rowspan` attributes) is the same for each row.

## Examples

### Incorrect: second row has more columns than the first

The first row defines 1 column, but the second row has 2 columns.

```html
<table>
  <tr>
    <td>Liza</td>
  </tr>
  <tr>
    <td>Jimmy</td>
    <td>14</td>
  </tr>
</table>
```

### Fixed: add missing cells to the first row

Make both rows have 2 columns by adding a header or data cell to the first row.

```html
<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jimmy</td>
    <td>14</td>
  </tr>
</table>
```

### Fixed: use `colspan` if the first row intentionally spans the full width

If the first row is meant to be a single spanning header, use `colspan` to match the total column count.

```html
<table>
  <tr>
    <th colspan="2">Student Info</th>
  </tr>
  <tr>
    <td>Jimmy</td>
    <td>14</td>
  </tr>
</table>
```

### Incorrect: later row exceeds column count with extra cells

```html
<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Liza</td>
    <td>12</td>
    <td>Extra cell</td>
  </tr>
</table>
```

### Fixed: remove the extra cell or expand the header row

```html
<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Notes</th>
  </tr>
  <tr>
    <td>Liza</td>
    <td>12</td>
    <td>Extra cell</td>
  </tr>
</table>
```

### Incorrect: `colspan` mismatch causes inconsistent totals

The first row spans 3 columns total (1 + `colspan="2"`), but the second row has 4 cells.

```html
<table>
  <tr>
    <th>Name</th>
    <th colspan="2">Contact</th>
  </tr>
  <tr>
    <td>Liza</td>
    <td>liza@example.com</td>
    <td>555-0100</td>
    <td>Room 4</td>
  </tr>
</table>
```

### Fixed: adjust `colspan` or cell count so all rows match

```html
<table>
  <tr>
    <th>Name</th>
    <th colspan="3">Contact &amp; Location</th>
  </tr>
  <tr>
    <td>Liza</td>
    <td>liza@example.com</td>
    <td>555-0100</td>
    <td>Room 4</td>
  </tr>
</table>
```

When debugging this issue, count the effective columns for each row by adding up the number of cells plus any additional columns contributed by `colspan` values (a `colspan="3"` cell counts as 3 columns). Every row in the table must produce the same total.