Skip to main content
Validación HTML

La celda de la tabla se extiende más allá del final de su grupo de filas establecido por un elemento “tbody”; se recorta hasta el final del grupo de filas.

Acerca de este problema HTML

Cuando usas el atributo rowspan en una celda de tabla, le estás diciendo al navegador que esa celda debe extenderse verticalmente a través de múltiples filas. Sin embargo, cada elemento de grupo de filas — <thead>, <tbody>, y <tfoot> — actúa como una frontera. El rowspan de una celda no puede extenderse más allá del grupo de filas que la contiene. Si un <tbody> tiene 2 filas y una celda en la primera fila declara rowspan="4", la celda intenta extenderse hacia filas que no existen dentro de ese grupo. El validador reporta que la extensión de la celda está “recortada hasta el final del grupo de filas”.

Esto es importante por varias razones. Primero, las tecnologías de asistencia como los lectores de pantalla dependen de una estructura de tabla precisa para navegar por las celdas y anunciar las relaciones fila/columna. Un rowspan que se excede de su grupo de filas crea una discordancia entre la estructura declarada y la tabla realmente renderizada, lo que puede confundir a los usuarios. Segundo, los navegadores manejan esto de manera inconsistente — la mayoría recortará silenciosamente la extensión, pero el resultado renderizado puede no coincidir con tu intención. Tercero, si más tarde añades un <tbody> o <tfoot> separado después del grupo actual, la extensión recortada no se extenderá hacia él, potencialmente rompiendo tu diseño de maneras inesperadas.

Para solucionarlo, tienes dos opciones: reducir el valor de rowspan para que coincida con el número de filas restantes en el grupo de filas, o añadir suficientes filas al grupo para que la extensión encaje. También debes verificar si los límites de tu grupo de filas (<thead>, <tbody>, <tfoot>) están colocados donde realmente los pretendes.

Ten en cuenta que este mismo problema se aplica a colspan que excede el conteo de columnas de un grupo de filas, aunque el mensaje de advertencia menciona específicamente el recorte de rowspan hasta el final del grupo de filas establecido por un elemento <tbody> (o <thead> / <tfoot>).

Ejemplos

Incorrecto: rowspan excede las filas disponibles en <tbody>

Este <tbody> tiene solo 2 filas, pero la primera celda 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>

La celda intenta extenderse 4 filas, pero solo existen 2 en el <tbody>. El navegador la recorta a 2 filas, y el validador reporta el error.

Solucionado: reduce rowspan para que coincida con las filas disponibles

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

Solucionado: añade filas para acomodar la extensión

Si realmente necesitas que la celda se extienda 4 filas, añade las filas faltantes:

<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>

Incorrecto: rowspan cruza un límite de grupo de filas

Esta es una fuente común del error — una extensión en un <tbody> que intenta llegar al siguiente:

<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>

La celda con rowspan="3" no puede extenderse desde el primer <tbody> (2 filas) hacia el segundo <tbody>. Cada grupo es independiente.

Solucionado: fusiona los grupos de filas o ajusta la extensión

Si las filas lógicamente pertenecen juntas, combínalas en un solo <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>

Encuentra problemas como este automáticamente

Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.

Ayúdanos a mejorar nuestras guías

¿Te ha sido útil esta guía?

¿Listo para validar tus sitios?
Inicia tu prueba gratuita hoy.