Generador de Tablas HTML

Qué hace que una tabla HTML sea buena

Las tablas HTML existen para presentar datos genuinamente tabulares, filas y columnas donde la posición de un valor tiene significado, como una matriz de precios, un horario o un cuadro comparativo. Una tabla correcta es más que una cuadrícula de celdas; se construye a partir de una pequeña familia de elementos que describen funciones: table envuelve todo, thead y tbody separan el encabezado del cuerpo, th marca una celda de encabezado y td contiene una celda de datos. Este generador emite por ti esa estructura completa para que la salida sea limpia y conforme a los estándares.

Acertar con la estructura importa porque los navegadores, los buscadores y la tecnología de asistencia se apoyan todos en ella. Una cuadrícula falseada con div puede parecer una tabla pero no comunica ninguna de las relaciones, mientras que el marcado de tabla adecuado le dice a cada consumidor de la página exactamente cómo están organizados los datos.

Dos formas de meter tus datos

Puedes construir una tabla de forma interactiva en el Editor de cuadrícula, añadiendo y eliminando filas y columnas y escribiendo directamente en cada celda, lo cual es ideal para tablas pequeñas o ediciones rápidas. Para cualquier cosa que ya viva en una hoja de cálculo, la pestaña Importar CSV es más rápida: pega tus datos y se analizan en la cuadrícula en un solo paso.

El importador es flexible con los separadores. Acepta texto delimitado por comas, tabulaciones, puntos y comas y barras verticales, así que una copia directa de Excel o de Google Sheets (que usa tabulaciones) y un CSV descargado (que usa comas) funcionan ambos. Marca La primera fila es encabezado cuando tu línea superior contenga títulos de columna, y esos valores se convierten en celdas th dentro del thead en lugar de datos normales.

Un ejemplo resuelto

Pega tres líneas en Importar CSV con la primera marcada como encabezado: Name, Email, Phone en la primera línea, y luego dos filas de contactos. La herramienta produce una tabla cuyo thead contiene una sola fila de tres celdas th y cuyo tbody contiene dos filas tr de celdas td. Activa Tabla con bordes y Filas alternadas y el marcado gana las clases y los estilos que dibujan los bordes de las celdas y el sombreado alterno de las filas, de modo que la vista previa coincide exactamente con lo que aparecerá en tu página antes incluso de copiar el código.

Opciones de estilo visual

Las Opciones básicas cubren el estilo que más utilizas. Tabla con bordes dibuja líneas alrededor de las celdas, Filas alternadas sombrea filas alternas para que las tablas largas sean más fáciles de leer, y Efecto al pasar el cursor resalta la fila bajo el cursor, lo que ayuda a los lectores a seguir filas anchas. Cada opción se refleja en vivo en la vista previa.

Para un control más fino, las Opciones avanzadas exponen el relleno y el espaciado de celdas, el ancho y el color del borde y el modo border-collapse, que decide si los bordes de celdas adyacentes se fusionan en líneas únicas (colapsar) o quedan como líneas dobles separadas (separar). También puedes adjuntar un ID y una clase personalizados para que la tabla se enganche a tu hoja de estilos existente en lugar de depender únicamente de estilos en línea.

Leyendas y alcance de encabezado para la accesibilidad

Una leyenda da a la tabla un título visible y asociado programáticamente, y puedes colocarla arriba o abajo. Es la forma accesible de nombrar una tabla, mucho mejor que un párrafo cercano, porque los lectores de pantalla la anuncian como la etiqueta de la tabla.

La opción Alcance de encabezado es el ajuste de accesibilidad más importante de aquí. Poner el alcance en col en las celdas de encabezado le dice a la tecnología de asistencia que cada th etiqueta la columna que tiene debajo; ponerlo en row etiqueta la fila que tiene al lado; y la opción combinada gestiona tablas que tienen tanto una fila de encabezado como una columna de encabezado. Con el alcance bien configurado, un lector de pantalla puede anunciar los encabezados pertinentes a medida que el usuario pasa de celda en celda, de modo que un valor se lee como Phone: 555-1234 en lugar de un número escueto y sin contexto.

La salvedad sobre el diseño adaptable

Las tablas son intrínsecamente anchas, y una tabla con muchas columnas se desbordará de la pantalla de un teléfono. La opción Tabla adaptable aborda esto envolviendo la tabla para que se desplace horizontalmente dentro de su contenedor en lugar de romper el diseño de la página, lo que mantiene cada columna intacta y accesible. Este es el valor por defecto seguro para las tablas de datos en pantallas pequeñas.

Vale la pena entender la contrapartida: el desplazamiento horizontal preserva los datos con fidelidad pero pide al lector que se desplace. No hay forma de reorganizar una verdadera tabla de datos en una sola columna estrecha sin perder las relaciones de filas y columnas, así que para contenido genuinamente tabular el desplazamiento es la solución honesta en lugar de un apaño.

Errores comunes que conviene evitar

El mal uso más frecuente es recurrir a una tabla para controlar el diseño de la página en lugar de para presentar datos; el CSS moderno como flexbox y grid es la herramienta adecuada para el diseño, y las tablas deberían reservarse para el contenido tabular. Otro desliz común es omitir las celdas de encabezado por completo, lo que deja a los usuarios de lectores de pantalla sin el contexto de las columnas, así que promociona siempre tu primera fila a encabezado cuando contenga títulos. Por último, no entierres el estilo en largos atributos style en línea cuando una clase sería más limpia y fácil de mantener; usa los campos de ID y clase para conectar la tabla a una hoja de estilos.