#08 Tablas#08 Tablas

Datos en filas y columnas

Un horario, una lista de precios, la clasificación de una liga… Cuando tienes datos que se leen en filas y columnas, lo que necesitas es una tabla. Se construye así:

• <table>: la tabla entera.
• <tr> (table row): cada fila.
• <th> (table header): una celda de cabecera, que dice qué hay en la columna.
• <td> (table data): una celda de datos.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Las cabeceras salen en negrita y centradas. Los bordes no aparecen porque eso es estilo: te dejamos un poco de CSS en el siguiente ejemplo para verlos (aprenderás a escribirlo dentro de nada).

Cabecera, cuerpo y título

Las tablas más completas separan las filas de cabecera de las de datos y llevan un título:

• <caption>: el título de la tabla. Va justo después de <table>.
• <thead>: agrupa las filas de cabecera.
• <tbody>: agrupa las filas de datos.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Fíjate en que <th> también puede ir al principio de una fila («Lunes», «Miércoles»): es la cabecera de esa fila. Así, quien usa un lector de pantalla oye «Lunes, Mañana: Iniciación» y no solo «Iniciación».

Celdas que ocupan más de una casilla

A veces una celda debe ocupar varias columnas o filas, como en un horario con un descanso para todos:

• colspan="2": la celda ocupa dos columnas.
• rowspan="2": la celda ocupa dos filas.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Cuándo no usar una tabla

Hace veinte años las tablas se usaban para colocar cosas en la página (el logo aquí, el menú allí…). Hoy eso es un error: las tablas son solo para datos. Para colocar elementos se usa CSS con Flexbox y Grid, que verás en la parte 4 del curso.

Errores típicos

• Olvidar el <tr> y poner las celdas directamente dentro de <table>.
• Filas con distinto número de celdas: la tabla se descuadra.
• Usar <td> con <strong> en lugar de <th> para las cabeceras.
• Usar tablas para maquetar la página.

Ejercicios

Ejercicio 1: tu semana (fácil)

Haz una tabla con dos columnas, «Día» y «Actividad», y tres filas de datos con lo que haces esa semana.

1

<table>
  <tr>
    <th>Día</th>
    <th>Actividad</th>
  </tr>
  <tr>
    <td>Lunes</td>
    <td>Gimnasio</td>
  </tr>
  <tr>
    <td>Miércoles</td>
    <td>Clase de inglés</td>
  </tr>
  <tr>
    <td>Sábado</td>
    <td>Cine</td>
  </tr>
</table>

Ejercicio 2: la tabla completa (medio)

Convierte la tabla anterior en una tabla completa: con <caption>, <thead> y <tbody>, y una fila final con una sola celda que ocupe las dos columnas y diga «¡Domingo libre!».

<table>
  <caption>Mi semana</caption>
  <thead>
    <tr>
      <th>Día</th>
      <th>Actividad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lunes</td>
      <td>Gimnasio</td>
    </tr>
    <tr>
      <td>Miércoles</td>
      <td>Clase de inglés</td>
    </tr>
    <tr>
      <td colspan="2">¡Domingo libre!</td>
    </tr>
  </tbody>
</table>

Ficha resumen

• <table> → <tr> (fila) → <th> (cabecera) o <td> (dato). Se escribe fila a fila.
• <caption> es el título; <thead> y <tbody> agrupan cabecera y datos.
• colspan une columnas; rowspan une filas.
• Las tablas son solo para datos, nunca para colocar cosas en la página.

Glosario