Tablas HTML

Cuando los datos tienen filas y columnas claras — horarios, hojas de puntuación, comparaciones de precios, planos de asientos — usa una table HTML, no un montón de espacios ni una cuadrícula falsa hecha de listas. Las listas enseñaron conjuntos y secuencias en un eje principal. Las tablas enseñan datos bidimensionales: cada celda está en un cruce fila–columna con una etiqueta que puedes nombrar. Si alguien pregunta «¿qué hay en la fila dos, columna Score?», una tabla es la respuesta honesta.

Para qué sirve una tabla

Una tabla expresa relaciones en una cuadrícula. Los lectores miran una columna hacia abajo o una fila a lo ancho para comparar valores rápido. Las tecnologías de asistencia pueden anunciar encabezados junto con celdas de datos cuando marcas encabezados con th en lugar de estilizar texto td ordinario para que parezca negrita. Por eso las tablas pertenecen a la información tabular — no a construir el banner, la barra lateral y el pie de un sitio entero con etiquetas table anidadas como hacían los tutoriales antiguos de maquetación. Cuando tu contenido es realmente una cuadrícula de hechos comparables, el marcado de tabla merece su complejidad.

Respuesta directa

• table — toda la tabla
• tr — una fila de tabla
• th — celda de encabezado (etiqueta de columna o fila)
• td — celda de datos
  Pon etiquetas de encabezado en th para que el significado quede claro a personas y herramientas de asistencia. Mantén el número de celdas coherente entre filas salvo que más adelante aprendas atributos de span avanzados como colspan. Usa tablas para cuadrículas de datos; usa CSS y secciones semánticas para el diseño de página. Un caption breve (en la segunda demo) nombra el conjunto de datos para quien llega a la cuadrícula.

Tabla de datos simple

Empieza con una fila de encabezado de celdas th, luego filas de datos de celdas td. Esta forma cubre muchos marcadores y hojas de comparación para principiantes.

Lectura de la muestra simple

• table envuelve toda la cuadrícula
• Cada tr es una fila horizontal
• La primera fila usa th para etiquetas de columna («Name», «Score»)
• Las filas siguientes usan td para valores ordinarios
• El estilo por defecto del navegador puede mostrar bordes tenues o no — lecciones posteriores cubren bordes; primero la estructura
• Cuenta celdas por fila: ambas filas de datos tienen dos celdas, igual que los dos encabezados

Caption y etiquetas de fila

Un caption nombra la tabla para todos. Usar th en la primera columna puede etiquetar cada fila cuando los títulos de fila importan tanto como los de columna. Mantén el caption corto y concreto.

Lectura de la muestra con caption

• caption debería ser el primer hijo dentro de table en patrones comunes de principiante
• Los encabezados de columna siguen en la fila superior como th
• Los nombres de fila en la primera columna también pueden ser th para que «Ada» sea una etiqueta, no solo otra celda parecida a un número
• Las celdas restantes siguen siendo td para las puntuaciones reales
• Aún no construyes un diseño de página — describes un conjunto de datos pequeño

Tablas vs listas vs maquetación

• Ítems relacionados o pasos con un eje principal → listas (ul / ol de la lección anterior)
• Valores comparados en filas y columnas → tablas
• Regiones de página completa (banner, columnas, pie) → estructura semántica + CSS después, no tablas de maquetación anidadas gigantes
  Los hábitos antiguos de «maquetación con tablas» rompen la respuesta en pantallas pequeñas y dificultan la accesibilidad. Si te pillas anidando tablas solo para colocar un logo junto a un menú, para y espera las lecciones de layout. La pregunta: «¿Estoy comparando celdas en una cuadrícula, o solo intento dibujar cajas en la página?»

Hábitos de accesibilidad para cuadrículas

Prefiere encabezados th reales a texto td en negrita que solo parece encabezado visualmente. Un caption claro (o un encabezado cercano) dice de qué trata la cuadrícula antes de entrar. Mantén alineados los conteos de celdas por fila para que las columnas sigan honestas al tabular o deslizar. Atributos avanzados como scope mejoran la asociación de encabezados en tablas complejas — aprende primero bien la división básica th/td, luego refina. Nunca confíes solo en el color para marcar qué celdas son etiquetas.

Práctica en tu editor

1. Crea una table con dos celdas de encabezado (th) en la primera fila.
2. Añade tres filas de datos con conteos td coincidentes.
3. Véala en el navegador y confirma que la cuadrícula se lee de izquierda a derecha y de arriba abajo como esperas.
4. Opcionalmente añade un caption y convierte la primera columna en th de etiqueta de fila como en la segunda muestra.
5. Rompe a propósito una fila con una celda faltante, nota la forma rara, luego arréglala.
6. Escribe una frase encima de la tabla o dentro del caption indicando qué miden los datos.
7. Pregunta a un compañero qué columna es cuál solo con tus encabezados — si falla, renombra el texto th.

Errores fáciles

• Construir sitios enteros como tablas anidadas gigantes (hábito de maquetación legado)
• Usar solo td cuando las celdas son realmente encabezados
• Números de celdas desparejos por fila
• Usar una tabla donde un ul/ol simple expresaría mejor una lista de un solo eje
• Dejar la tabla sin título legible para humanos (caption o encabezado)
• Copiar snippets antiguos de «tabla de maquetación» en páginas de práctica modernas

Cómo encaja después de las listas

Las listas organizan colecciones unidimensionales. Las tablas organizan cuadrículas. Pronto estilarás bordes y espaciado; esta lección fija el esqueleto: table, tr, th y td con encabezados honestos. Mantén los datos tabulares, el layout en otro sitio, y tu CSS posterior decorará una estructura que ya tiene sentido.

Resumen

• Las tablas usan table + tr + th / td
• Para cuadrículas de datos tabulares, no para maquetación moderna de página completa
• Prefiere th para etiquetas de encabezado (columnas y, cuando ayude, filas)
• caption ayuda a nombrar el conjunto de datos
• Mantén conteos de celdas coherentes entre filas
• Las listas siguen siendo mejores para conjuntos y pasos simples sin un segundo eje