Cómo hacer una tabla en HTML
Una tabla es un elemento <table> formado por filas (<tr>), y cada fila está formada por celdas: <th> para las celdas de encabezado y <td> para las celdas de datos.
La tabla no tiene bordes propios; la única regla CSS los añade para que veas las celdas. Las columnas salen de las celdas: la primera celda de cada fila es la columna uno, la segunda es la columna dos, y así sucesivamente. Cada fila debe tener el mismo número de celdas. Borra un <td> y esa fila termina antes, dejando un hueco.
Las celdas <th> están en negrita y centradas por defecto. Eso es solo el aspecto; lo que importa es que son etiquetas, y de eso trata la siguiente sección.
Los elementos de una tabla
| Elemento | Qué es |
|---|---|
<table> | La tabla |
<caption> | El título de la tabla, el primer hijo de <table> |
<thead> | El grupo de filas de encabezado |
<tbody> | El grupo de filas del cuerpo (una tabla puede tener varios) |
<tfoot> | El grupo de filas del pie, como los totales |
<tr> | Una fila |
<th> | Una celda de encabezado |
<td> | Una celda de datos |
<colgroup>, <col> | Columnas, para dar estilo a una columna entera (anchos, fondo) |
Los bordes se explican en bordes de tabla en HTML, y las celdas que ocupan varias columnas o filas en colspan y rowspan.
Celdas de encabezado, scope y caption
Una tabla con encabezados arriba y en el lateral tiene que indicar hacia dónde apunta cada encabezado. scope="col" da nombre a la columna de debajo, scope="row" da nombre a la fila de al lado. <caption> le da a la tabla un título visible:
Con este marcado, un lector de pantalla que llega a la celda 14:00 puede anunciar "Saturday, Closes, 14:00", así que el número nunca se lee aislado. En una tabla sencilla con una sola fila de encabezado, los navegadores suelen deducir los encabezados sin scope, pero escribirlo no cuesta nada y elimina las conjeturas.
El caption es también lo que anuncia un lector de pantalla al llegar a la tabla. Es mejor que un encabezado colocado encima de la tabla, que no está conectado con ella.
thead, tbody y tfoot
Los tres grupos dividen las filas en cabecera, cuerpo y pie. El pie es el sitio para los totales:
Dos detalles hacen legibles los números: text-align: end alinea los puntos decimales (todos los precios tienen dos decimales), y font-variant-numeric: tabular-nums da a todos los dígitos el mismo ancho.
Si escribes <tr> directamente dentro de <table>, como en el primer ejemplo, el navegador añade de todos modos un <tbody> alrededor de las filas. Por eso un selector CSS como table > tr nunca encuentra nada: en la página, las filas están dentro de tbody. Usa table tr, o escribe tú el <tbody>.
Dar estilo a una tabla: filas alternas, hover y ancho
:nth-child colorea filas alternas, :hover resalta la fila bajo el puntero y width: 100% estira la tabla a lo ancho de su contenedor:
text-align: start alinea el texto de los encabezados con los datos de debajo; si no, th va centrado. start en lugar de left mantiene la alineación correcta en los idiomas de derecha a izquierda.
Tablas responsive con desplazamiento
Una tabla no puede encogerse por debajo del ancho de su contenido. En un teléfono, una tabla ancha empuja toda la página hacia los lados. Envuélvela en un contenedor que se desplace:
Aquí el contenedor está limitado a 300 píxeles para simular la pantalla de un teléfono; desplázalo hacia los lados. tabindex="0" permite a quienes usan el teclado poner el foco en el contenedor y desplazarlo con las flechas, y role="region" con un aria-label le da un nombre a esa parada.
Las tablas son para datos
Usa una tabla cuando el contenido de verdad tiene filas y columnas: precios, horarios, comparativas, resultados. No la uses para colocar cosas una al lado de otra en la página. Las tablas de maquetación confunden a los lectores de pantalla, que anuncian filas y columnas que no significan nada, y no se adaptan a las pantallas pequeñas. El diseño se hace con flexbox y grid de CSS.
Errores comunes
- Filas con distinto número de celdas. Las filas cortas terminan antes y las columnas dejan de cuadrar.
- Usar
<td>con texto en negrita para los encabezados. Usa<th>para que los encabezados sean etiquetas reales. - Los atributos obsoletos
border,cellpadding,cellspacing,bgcoloryalign. Usa CSS en su lugar. - Poner contenido directamente en
<tr>o<table>, fuera de cualquier celda. Los navegadores lo sacan de la tabla, normalmente encima de ella. - Un encabezado encima de la tabla en lugar de un
<caption>. table > tren el CSS. El navegador ha insertado un<tbody>; escribetable trotbody tr.
Preguntas frecuentes
¿Cómo se crea una tabla en HTML?
Envuélvela en <table>, escribe un <tr> por fila y pon las celdas dentro: <th> para las celdas de encabezado y <td> para las celdas de datos. Todas las filas deben tener el mismo número de celdas, salvo que algunas celdas ocupen varias columnas.
¿Qué diferencia hay entre th y td?
<th> es una celda de encabezado que da nombre a una columna o fila, y <td> es una celda de datos. Los navegadores muestran <th> en negrita y centrado, y los lectores de pantalla leen el encabezado correspondiente antes de cada celda de datos para que los números tengan sentido.
¿Para qué sirven thead, tbody y tfoot?
Agrupan las filas en la cabecera, el cuerpo y el pie (los totales) de la tabla. Dejan clara la estructura a las tecnologías de asistencia, le dan al CSS algo a lo que apuntar, y al imprimir una tabla larga los navegadores pueden repetir el <thead> en cada página.
¿Por qué mi tabla HTML no tiene bordes?
Las tablas no tienen bordes por defecto. Añádelos con CSS: table { border-collapse: collapse; } th, td { border: 1px solid #ccc; }. El antiguo atributo border="1" está obsoleto.
¿Cómo hago una tabla HTML responsive?
Pon la tabla en un contenedor con overflow-x: auto. En una pantalla estrecha, la tabla se desplaza hacia los lados dentro del contenedor en lugar de ensanchar toda la página.
