Generador de tablas HTML

Cómo generar una tabla HTML

1. Rellena la cuadrícula. Usa Añadir fila, Añadir columna, Quitar la última fila y Quitar la última columna, o los botones × junto a cada fila y columna. Nueva tabla vacía vuelve a empezar con una cuadrícula en blanco de 3 × 3.
2. Para reutilizar datos existentes, pega CSV o celdas copiadas de Excel, LibreOffice o Google Sheets en Importar datos CSV o de una hoja de cálculo, comprueba el Delimitador y haz clic en Importar. También puedes pegar un bloque de celdas de una hoja de cálculo directamente en cualquier celda de la cuadrícula.
3. Añade un Título y elige si La primera fila es de encabezado y si La primera columna es de encabezado.
4. En Estilos, elige Sin estilos, Clase CSS o Estilos en línea, y ajusta si quieres el Color del borde, el Fondo del encabezado y las Filas alternas.
5. Revisa la Vista previa y haz clic en Copiar HTML o descarga el código como archivo .html.

Marcado de tablas accesible

Una tabla solo es accesible cuando los lectores de pantalla pueden saber qué celdas son encabezados y qué describen. Esta herramienta escribe la estructura que recomiendan el estándar HTML y las técnicas de las WCAG:

• <caption> da nombre a la tabla. Los lectores de pantalla lo anuncian al entrar en la tabla, y ayuda a cualquier lector a entender qué está mirando. Que sea breve y descriptivo.
• <thead> y <tbody> separan la fila de encabezado de las filas de datos. Los navegadores pueden repetir el <thead> en cada página impresa.
• <th scope="col"> marca cada encabezado de columna y, con La primera columna es de encabezado, <th scope="row"> marca la primera celda de cada fila. Cuando un usuario de lector de pantalla llega a una celda de datos, este puede leer en voz alta los encabezados correspondientes, por ejemplo «Pro, Precio, 12 €».

Usa las tablas solo para datos tabulares, nunca para maquetar la página. Evita las celdas combinadas siempre que puedas: las cuadrículas sencillas con una fila de encabezado y, si hace falta, una columna de encabezado son las más fáciles de leer con tecnologías de apoyo.

Opciones de estilo

• Sin estilos escribe un marcado limpio que hereda los estilos de tabla de tu sitio. Es la mejor opción para un CMS o un sitio con un sistema de diseño.
• Clase CSS añade class="…" a la <table> y muestra un bloque de CSS a juego para pegar en tu hoja de estilos. El Nombre de la clase se limpia para dejar solo letras, dígitos, guiones y guiones bajos, así que siempre es un selector válido.
• Estilos en línea pone atributos style en cada elemento. Es más largo, pero es lo que necesitan los correos HTML, ya que muchos clientes de correo ignoran los bloques <style>. El botón Descargar añade el CSS en un elemento <style> cuando usas una clase.

En el CSS solo se escriben colores hexadecimales reales procedentes de los selectores de color, así que no puede colarse nada inesperado en tus estilos.

Escape y seguridad

Cada celda se escapa: <, > y & pasan a ser <, > y &, de modo que un texto como <b> o a < b aparece exactamente como se escribió en lugar de interpretarse como marcado. Los saltos de línea dentro de las celdas importadas se convierten en <br>. La vista previa se construye solo a partir de este marcado escapado y pasa por un sanitizador que conserva únicamente los elementos de tabla, así que un script pegado nunca puede ejecutarse.