Generador de tablas HTML accesibles: CSV a HTML con título | We.Inc
Pega CSV o empieza con una lista de precios o un horario. Crea una tabla HTML con título, encabezados y scope, con datos escapados de forma segura, y un bloque CSS responsive para copiar.
Pega filas de una hoja de cálculo o un CSV, o empieza con una lista de precios de servicios o un horario. Obtendrás una tabla HTML correcta, con título, celdas de encabezado y atributos scope que usan los lectores de pantalla, además de un bloque CSS corto para que sea legible en teléfonos. Todos los valores se escapan para que el texto pegado no rompa la página. Todo funciona en tu navegador. No enviamos a We.Inc ni a nadie más lo que escribas, y se borra al cerrar la pestaña.
Elige un modelo o pega tus propias filas. Funcionan las comas, tabulaciones (de una hoja de cálculo) y punto y coma; los valores entre comillas que contengan comas se mantienen juntos.
Indica si la primera fila contiene los encabezados de columnas y si la primera columna nombra cada fila. Se convertirán en celdas th con atributos scope.
Escribe un título. Nombra la tabla para los lectores de pantalla y aparece encima para todos.
Elige un estilo y previsualízalo en el ancho de escritorio y teléfono. En pantallas pequeñas, las tablas anchas se desplazan horizontalmente dentro de su propio recuadro en vez de comprimirse.
Copia el HTML y el CSS o descárgalos juntos en un archivo.
Usa una tabla solo para datos organizados en filas y columnas, como precios u horarios. Para diseñar el diseño de una página, usa CSS.
Mantén cortos los encabezados. Los lectores de pantalla los repiten en cada anuncio.
Indica las unidades en el encabezado (Precio, USD) en vez de repetirlas en cada celda.
No combines celdas salvo que sea necesario. A los lectores de pantalla les cuesta interpretar celdas combinadas.
Comprueba la tabla en el ancho de un teléfono. Si requiere más de un deslizamiento horizontal, considera dividirla.
Preguntas frecuentes
¿Qué hace que una tabla HTML sea accesible?
Un título que la identifica, celdas th para encabezados de filas y columnas, y atributos scope que indican si el encabezado corresponde a una columna o una fila. Los lectores de pantalla los usan para anunciar a qué encabezado pertenece cada valor. Este generador añade los tres elementos.
¿Por qué no crear la tabla con div?
Una cuadrícula de div puede parecer una tabla, pero la tecnología de asistencia no puede identificar qué celda corresponde a cada encabezado. El elemento table real incluye esa relación de forma nativa.
¿Cómo se adapta una tabla a pantallas pequeñas?
La tabla queda dentro de un recuadro que se desplaza horizontalmente en pantallas estrechas. El recuadro se puede enfocar y lleva una etiqueta con el título, para que quienes usan teclado también puedan desplazarse.
¿Se escapan mis datos?
Sí. Los signos ampersand, menor que, mayor que y las comillas de las celdas se convierten en entidades HTML. Así, una celda con <script> se muestra como texto en vez de ejecutarse.
¿Puedo pegar directamente desde Excel o Google Sheets?
Sí. Las celdas copiadas se separan con tabulaciones, que la herramienta detecta automáticamente.
¿Es gratis?
Sí, sin registro. Funciona en tu navegador.
Las listas de precios y los horarios son tablas
La mayoría de los sitios de pequeños negocios tienen al menos dos tablas: precios y horarios. Ambas contienen datos tabulares auténticos y deben marcarse como tablas, con cada precio asociado a su servicio y cada horario a su día.
Los modelos de aquí te dan esas dos estructuras. Sustituye las filas de ejemplo por las tuyas antes de publicar; son valores de relleno, no precios reales.