Verificação HTML: Célula da tabela estende-se além do fim do seu grupo de linhas estabelecido por um elemento "tbody"; cortada até ao fim do grupo de linhas.

Sobre este problema HTML

Quando você usa o atributo rowspan numa célula de tabela, está a dizer ao browser que essa célula deve estender-se verticalmente através de múltiplas linhas. Contudo, cada elemento de grupo de linhas — <thead>, <tbody>, e <tfoot> — atua como uma fronteira. O rowspan de uma célula não pode estender-se além do grupo de linhas que a contém. Se um <tbody> tem 2 linhas e uma célula na primeira linha declara rowspan="4", a célula tenta estender-se para linhas que não existem dentro desse grupo. O validador reporta que o span da célula está “cortado até ao fim do grupo de linhas.”

Isto é importante por várias razões. Primeiro, tecnologias assistivas como leitores de ecrã dependem de uma estrutura de tabela precisa para navegar pelas células e anunciar relações linha/coluna. Um rowspan que ultrapassa o seu grupo de linhas cria uma incompatibilidade entre a estrutura declarada e a tabela efetivamente renderizada, o que pode confundir os utilizadores. Segundo, os browsers lidam com isto de forma inconsistente — a maioria cortará silenciosamente o span, mas o resultado renderizado pode não corresponder à sua intenção. Terceiro, se mais tarde adicionar um <tbody> ou <tfoot> separado após o grupo atual, o span cortado não fará a ponte para ele, potencialmente quebrando o seu layout de formas inesperadas.

Para corrigir isto, tem duas opções: reduza o valor do rowspan para corresponder ao número de linhas restantes no grupo de linhas, ou adicione linhas suficientes ao grupo para que o span se ajuste. Deve também verificar se as suas fronteiras de grupo de linhas (<thead>, <tbody>, <tfoot>) estão colocadas onde você realmente pretende.

Note que esta mesma questão se aplica ao colspan que exceda a contagem de colunas de um grupo de linhas, embora a mensagem de aviso mencione especificamente o corte do rowspan até ao fim do grupo de linhas estabelecido por um elemento <tbody> (ou <thead> / <tfoot>).

Exemplos

Incorreto: `rowspan` excede as linhas disponíveis no `<tbody>`

Este <tbody> tem apenas 2 linhas, mas a primeira célula declara rowspan="4":

<table>
  <tbody>
    <tr>
      <td rowspan="4">Spans too far</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
    </tr>
  </tbody>
</table>

A célula tenta estender-se por 4 linhas, mas apenas 2 existem no <tbody>. O browser corta-a para 2 linhas, e o validador reporta o erro.

Corrigido: Reduzir `rowspan` para corresponder às linhas disponíveis

<table>
  <tbody>
    <tr>
      <td rowspan="2">Spans two rows</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
    </tr>
  </tbody>
</table>

Corrigido: Adicionar linhas para acomodar o span

Se você realmente precisa que a célula se estenda por 4 linhas, adicione as linhas em falta:

<table>
  <tbody>
    <tr>
      <td rowspan="4">Spans four rows</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
    </tr>
    <tr>
      <td>Row 3</td>
    </tr>
    <tr>
      <td>Row 4</td>
    </tr>
  </tbody>
</table>

Incorreto: `rowspan` cruza uma fronteira de grupo de linhas

Esta é uma fonte comum do erro — um span num <tbody> tentando alcançar o seguinte:

<table>
  <tbody>
    <tr>
      <td rowspan="3">Tries to cross groups</td>
      <td>Group 1, Row 1</td>
    </tr>
    <tr>
      <td>Group 1, Row 2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Group 2, Row 1</td>
    </tr>
  </tbody>
</table>

A célula com rowspan="3" não pode estender-se do primeiro <tbody> (2 linhas) para o segundo <tbody>. Cada grupo é independente.

Corrigido: Unir os grupos de linhas ou ajustar o span

Se as linhas pertencem logicamente juntas, combine-as num único <tbody>:

<table>
  <tbody>
    <tr>
      <td rowspan="3">Spans all three rows</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
    </tr>
    <tr>
      <td>Row 3</td>
    </tr>
  </tbody>
</table>