El Atributo ROWSPAN

El atributo rowspan en HTML se utiliza en tablas para hacer que una celda (ya sea <td> o <th>) ocupe múltiples filas verticalmente. Es esencial para crear tablas con estructuras complejas y diseños organizados. A continuación, aprenderás cómo implementarlo correctamente.

1. Introducción al atributo rowspan

• Propósito:
  Permitir que una celda de una tabla se extienda verticalmente por varias filas.

• Valor:
  Un número entero positivo que indica la cantidad de filas que la celda ocupará.

• Elementos compatibles:
  <td> (celda de datos) y <th> (celda de encabezado).

2. Sintaxis básica

<table>
  <tr>
    <td rowspan="número">Contenido</td>
    <!-- Otras celdas -->
  </tr>
</table>

3. Ejemplos prácticos

Ejemplo 1: Celda que ocupa 2 filas

<table border="1">
  <tr>
    <td rowspan="2">A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
  </tr>
</table>

Resultado:

| A | B |
|   | C |

Ejemplo 2: Tabla de horarios (actividades que duran varias horas)

<table border="1">
  <tr>
    <th>Hora</th>
    <th>Actividad</th>
  </tr>
  <tr>
    <td>9:00 - 10:00</td>
    <td rowspan="2">Reunión de equipo</td>
  </tr>
  <tr>
    <td>10:00 - 11:00</td>
  </tr>
  <tr>
    <td>11:00 - 12:00</td>
    <td>Trabajo individual</td>
  </tr>
</table>

Resultado:

| Hora        | Actividad           |
|-------------|---------------------|
| 9:00 - 10:00| Reunión de equipo   |
| 10:00 - 11:00|                    |
| 11:00 - 12:00| Trabajo individual |

4. Reglas y buenas prácticas

1. Coherencia en las filas:
   Si una celda usa rowspan="3", debes asegurarte de que existan suficientes filas debajo para completar el span.

2. Evitar superposiciones:
   No uses rowspan en celdas que se solapen con otras que también usan rowspan o colspan.

3. Accesibilidad:

   • Usa <th scope="row"> o <th scope="col"> para encabezados.

   • Combina con headers en celdas complejas para ayudar a lectores de pantalla.

5. Combinar rowspan y colspan

Puedes combinar ambos atributos para celdas que abarquen filas y columnas:

<table border="1">
  <tr>
    <td rowspan="2" colspan="2">A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
  </tr>
</table>

Resultado:

|   A   | B |
|       | C |

6. Errores comunes

• Valores incorrectos:
  Usar rowspan="0" (no válido) o números mayores que las filas disponibles.

• Estructura desbalanceada:
  Si una celda ocupa 3 filas, las siguientes 2 filas deben tener una celda menos.
  Ejemplo incorrecto:

  html

  Copy

  <table border="1">
    <tr>
      <td rowspan="3">A</td>
      <td>B</td>
    </tr>
    <tr>
      <td>C</td>
      <td>D</td> <!-- ¡Error! Fila 2 tiene 2 celdas, pero la primera ya ocupa 3 filas -->
    </tr>
  </table>

   

• Run HTML

7. Estilización con CSS

Personaliza celdas con rowspan para mejorar la presentación:

td[rowspan] {
  background-color: #f0f0f0;
  text-align: center;
  vertical-align: middle;
}

8. Casos de uso comunes

1. Reportes financieros:
   Celdas que agrupan datos trimestrales o mensuales.

2. Calendarios:
   Eventos que duran varios días.

3. Comparativas:
   Filas que representan categorías principales y subcategorías.

9. Conclusión

El atributo rowspan es clave para:

• Organizar datos complejos en tablas.

• Reducir redundancia al evitar repetir información en múltiples filas.

• Mejorar la legibilidad de tablas con estructuras jerárquicas.

Ejemplo final:

<table border="1">
  <tr>
    <th>País</th>
    <th>Ciudad</th>
    <th>Población</th>
  </tr>
  <tr>
    <td rowspan="3">México</td>
    <td>CDMX</td>
    <td>9,209,944</td>
  </tr>
  <tr>
    <td>Guadalajara</td>
    <td>1,385,621</td>
  </tr>
  <tr>
    <td>Monterrey</td>
    <td>1,142,952</td>
  </tr>
</table>

Resultado:

| País   | Ciudad       | Población  |
|--------|--------------|------------|
| México | CDMX         | 9,209,944  |
|        | Guadalajara  | 1,385,621  |
|        | Monterrey    | 1,142,952  |

¡Recuerda!

• Planifica la estructura de tu tabla antes de usar rowspan.

• Prueba en diferentes navegadores para garantizar compatibilidad.

• Combina con CSS para diseños profesionales.