0Pricing
HTML Academy · Lección

colspan y rowspan para abarcar celdas

Combine celdas a través de columnas y filas.

colspan y rowspan para abarcar celdas es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué es la combinación de celdas?

De forma predeterminada, cada celda de una tabla ocupa una fila y una columna. La combinación permite que una celda se extienda por varias columnas o filas:

  • colspan — extenderse por varias columnas
  • rowspan — extenderse por varias filas

colspan

El atributo colspan hace que una celda se extienda por varias columnas:

<table>
  <tr>
    <th colspan="3">2024 Quarterly Sales</th>
  </tr>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
  </tr>
  <tr>
    <td>$10k</td>
    <td>$12k</td>
    <td>$15k</td>
  </tr>
</table>

rowspan

El atributo rowspan hace que una celda se extienda por varias filas:

<table>
  <tr>
    <th rowspan="2">John</th>
    <td>HTML</td>
    <td>95</td>
  </tr>
  <tr>
    <!-- no th here — John's cell spans this row -->
    <td>CSS</td>
    <td>88</td>
  </tr>
</table>

colspan y rowspan juntos

Puede combinar ambos atributos en una misma celda:

<table>
  <tr>
    <th colspan="2" rowspan="2">Top-Left Corner</th>
    <th>Col 3</th>
  </tr>
  <tr>
    <td>Row 2, Col 3</td>
  </tr>
  <tr>
    <td>Row 3, Col 1</td>
    <td>Row 3, Col 2</td>
    <td>Row 3, Col 3</td>
  </tr>
</table>

Contabilizar las celdas combinadas

Cuando una celda se extiende por varias columnas, omita esas columnas en las filas combinadas:

<table>
  <tr>
    <td colspan="2">Spans 2 columns</td>
    <!-- This row has: 1 td = 2 columns wide -->
    <td>Third column</td>
  </tr>
  <tr>
    <td>Col 1</td>   <!-- back to 1 column each -->
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
</table>

Patrones habituales de combinación

Ejemplos reales de combinación de celdas en tablas:

<!-- Group header spanning all data columns -->
<thead>
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="3">Test Scores</th>
  </tr>
  <tr>
    <th>Math</th><th>Science</th><th>English</th>
  </tr>
</thead>

rowspan para combinar encabezados de filas

Utilice rowspan para crear etiquetas combinadas de grupos de filas:

<tbody>
  <tr>
    <th rowspan="3">Frontend</th>
    <td>HTML</td>
    <td>Structure</td>
  </tr>
  <tr>
    <!-- Frontend spans this row -->
    <td>CSS</td>
    <td>Presentation</td>
  </tr>
  <tr>
    <td>JavaScript</td>
    <td>Behavior</td>
  </tr>
</tbody>

colspan=0: celda de ancho completo

Un colspan de 0 abarca todas las columnas restantes de un grupo de columnas (se utiliza rara vez):

<!-- colspan="0" spans the entire colgroup -->
<td colspan="0">Full width row</td>

Combinación de celdas y accesibilidad

Las tablas con combinaciones complejas necesitan los atributos scope y headers para los lectores de pantalla:

<th scope="colgroup" colspan="3">2024 Scores</th>
<!-- scope="colgroup" applies to a spanning header -->

<!-- For complex tables, use headers attribute on td: -->
<td headers="col-q1 row-alice">95</td>

Depuración de problemas de combinación

Errores habituales al combinar celdas:

  • Demasiadas o muy pocas celdas en una fila después de combinar
  • rowspan se extiende más allá del número de filas
  • Combinaciones superpuestas (dos celdas reclaman la misma posición)

Utilice las herramientas de desarrollo del navegador para inspeccionar la estructura de la tabla si algo no se muestra correctamente.

CSS para celdas combinadas

Aplique estilos a las celdas que se extienden por varias columnas o filas:

[colspan] {
  text-align: center;
  font-weight: bold;
  background-color: #e2e8f0;
}

/* Or use attribute selectors for specific spans: */
[colspan="3"] {
  background-color: #dbeafe;
}

Impresión y combinación de celdas

Las celdas combinadas se imprimen correctamente en los navegadores modernos. Sin embargo:

  • Si las filas de thead abarcan varias columnas, se repiten correctamente en cada página impresa
  • rowspan dentro de tbody no se repite al saltar de página
  • Pruebe las tablas complejas en la vista previa de impresión antes de publicarlas

Comprobación rápida

Tiene una celda de tabla que debe abarcar 3 columnas. ¿Qué atributo debe utilizar?

Repaso: colspan y rowspan

Aspectos esenciales de la combinación de celdas:

  • colspan — la celda se extiende por varias columnas
  • rowspan — la celda se extiende por varias filas
  • Contabilice las celdas combinadas: omita las celdas que abarca la combinación
  • Añada scope="colgroup" para facilitar la accesibilidad de los encabezados combinados
  • Utilice las herramientas de desarrollo para depurar problemas de diseño

Preguntas frecuentes

¿La lección «colspan y rowspan para abarcar celdas» es gratis?

Sí — el texto completo de «colspan y rowspan para abarcar celdas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué aprenderé en «colspan y rowspan para abarcar celdas»?

Combine celdas a través de columnas y filas. Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar HTML Academy?

No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «colspan y rowspan para abarcar celdas»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de HTML Academy?

Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. table, tr, td y th
  2. Estructura thead, tbody y tfoot
  3. colspan y rowspan para abarcar celdas
  4. Accesibilidad de tablas: scope, summary y caption
← Volver a HTML Academy