Tablas

1.Para qué sirven las tablas

Una tabla presenta datos organizados en filas y columnas, como una hoja de cálculo: horarios, precios, calificaciones, comparativas.

Una buena regla: si podrías abrir los datos en una hoja de cálculo, una tabla es la herramienta correcta.

2.La estructura básica

Una tabla se construye con cuatro etiquetas principales. Piensa en ella como una cuadrícula que se arma fila por fila:

<table>
  <tr>
    <th>Fruta</th>
    <th>Precio</th>
  </tr>
  <tr>
    <td>Manzana</td>
    <td>$20</td>
  </tr>
  <tr>
    <td>Mango</td>
    <td>$35</td>
  </tr>
</table>

Lee el código de arriba como una receta: «una tabla, con una fila, con dos celdas de título; luego otra fila con dos celdas de datos…». Cada <tr> debe tener la misma cantidad de celdas para que las columnas queden alineadas.

3.Practica en vivo

Modifica la tabla: agrega una tercera fila con otra fruta, cambia un precio o añade una columna «Origen». Mira cómo reacciona el resultado a la derecha.

▶ Ver animación

4.Encabezado, cuerpo y pie

Para tablas más serias conviene dividirlas en tres zonas. Así el código queda ordenado y los lectores de pantalla entienden mejor su estructura:

• <thead>: la fila o filas de encabezado.
• <tbody>: el cuerpo con los datos.
• <tfoot>: el pie, para totales o notas.

<table>
  <thead>
    <tr><th>Producto</th><th>Cantidad</th><th>Subtotal</th></tr>
  </thead>
  <tbody>
    <tr><td>Cuaderno</td><td>3</td><td>$90</td></tr>
    <tr><td>Lápiz</td><td>10</td><td>$50</td></tr>
  </tbody>
  <tfoot>
    <tr><th>Total</th><td>13</td><td>$140</td></tr>
  </tfoot>
</table>

5.Título de la tabla y accesibilidad

Una tabla debería decir de qué trata. Para eso existe <caption>, que va justo después de abrir <table>:

<table>
  <caption>Horario de clases: lunes</caption>
  <thead>
    <tr>
      <th scope="col">Hora</th>
      <th scope="col">Materia</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">8:00</th>
      <td>Matemáticas</td>
    </tr>
    <tr>
      <th scope="row">10:00</th>
      <td>Historia</td>
    </tr>
  </tbody>
</table>

El atributo scope le dice a los lectores de pantalla a qué se refiere un encabezado:

6.Combinar celdas: colspan y rowspan

A veces una celda debe ocupar más de una columna o una fila, por ejemplo un título que abarca varias columnas. Hay dos atributos:

• colspan="n": la celda se extiende n columnas hacia la derecha.
• rowspan="n": la celda se extiende n filas hacia abajo.

1. Dibuja la tabla en papel con la cuadrícula completa.
2. Marca qué celdas se unen.
3. Escribe el código fila por fila, omitiendo las celdas ya cubiertas.

7.Estilo básico de tabla

Sin CSS, una tabla es funcional pero poco atractiva. Aquí tienes un pequeño estilo que puedes copiar y adaptar. En la lección de CSS entenderás cada línea:

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  padding: 8px 12px;
  border: 1px solid #ccc;
  text-align: left;
}
th {
  background: #f0f0ff;
}
tbody tr:nth-child(even) {
  background: #fafafa;
}

• border-collapse: collapse une los bordes de las celdas en una sola línea.
• padding da aire interior a cada celda.
• nth-child(even) pinta las filas pares para leer mejor ("cebra").

8.Errores frecuentes

• Usar tablas para el diseño de la página. Las tablas son solo para datos.
• Celdas de más o de menos en una fila: la cuadrícula queda torcida.
• Olvidar cerrar </td> o </tr>: el navegador intenta adivinar y el resultado cambia entre navegadores.
• Usar <td> en negrita en lugar de <th> para los títulos: se pierde el significado.
• Escribir <tr> directamente dentro de <table> y también <tbody>: elige un estilo y úsalo en toda la tabla.
• Dejar tablas sin <caption> ni scope, dificultando la lectura con lector de pantalla.

9.Glosario