# Table cell spans past the end of its row group established by a “thead” element; clipped to the end of the row group.

> Canonical HTML version: https://rocketvalidator.com/html-validation/table-cell-spans-past-the-end-of-its-row-group-established-by-a-thead-element-clipped-to-the-end-of-the-row-group
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

A cell inside a `<thead>` has a `rowspan` value larger than the number of rows left in that `<thead>`.

The `<thead>`, `<tbody>` and `<tfoot>` elements each form a row group, and a cell's `rowspan` can't reach from one row group into the next. When a header cell asks for more rows than its `<thead>` holds, the browser stops the cell at the last header row, as if the extra part of the `rowspan` weren't there.

This usually comes from a two-level header. The first row has a cell such as "Name" with `rowspan="2"` next to a grouped heading with `colspan="2"`, and the row of sub-headings that belongs under the group ends up after `</thead>`, as the first row of the `<tbody>`. The "Name" cell can't extend into the `<tbody>`, so that row ends up one cell short, and the validator usually adds a second message about it: "A table row was 2 columns wide, which is less than the column count established by the first row (3)."

Put every header row inside the `<thead>` so the span has rows to cover. If the header really has a single row, remove the `rowspan`.

## Invalid example

```html
<table>
  <thead>
    <tr>
      <th rowspan="2">Name</th>
      <th colspan="2">Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Round 1</th>
      <th>Round 2</th>
    </tr>
    <tr>
      <td>Ana</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>
</table>
```

## Valid example

```html
<table>
  <thead>
    <tr>
      <th rowspan="2">Name</th>
      <th colspan="2">Score</th>
    </tr>
    <tr>
      <th>Round 1</th>
      <th>Round 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ana</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>
</table>
```
