Para qué sirve un generador de tabla HTML
Escribir una tabla HTML a mano es tedioso y propenso a errores: una etiqueta sin cerrar y toda la página se desarma. Este generador te da el código completo, indentado y válido en segundos. Los usos más comunes: emails HTML, donde las tablas con estilos inline siguen siendo la única forma confiable de maquetar (los clientes de correo ignoran gran parte del CSS moderno); CMS y plataformas que solo aceptan HTML pegado, como campos de descripción de tiendas online, wikis corporativas, foros o editores que no tienen botón de tabla; documentación técnica, donde necesitás una tabla de parámetros o precios rápida y prolija; y práctica, porque ver cómo se estructura una tabla bien formada —con thead, tbody, scope y caption— es la mejor manera de aprender HTML semántico. Si ya tenés los datos en una planilla, exportalos como CSV, pegalos en el modo "Desde CSV" y listo: la tabla se arma sola.
Elementos de una tabla HTML: referencia rápida
| Elemento | Qué es | Rol y accesibilidad |
|---|---|---|
<table> | El contenedor raíz de toda la tabla. | Los lectores de pantalla anuncian que empieza una tabla y sus dimensiones (filas × columnas). |
<caption> | El título visible de la tabla. Va primero, inmediatamente después de abrir <table>. | Es lo primero que anuncia un lector de pantalla: da contexto antes de entrar a los datos. Mucho mejor que un párrafo suelto arriba. |
<thead> | Agrupa la fila (o filas) de encabezado. | Separa semánticamente el encabezado del cuerpo y permite que el navegador lo repita en cada página al imprimir tablas largas. |
<tbody> | Agrupa las filas de datos. | Delimita el cuerpo de la tabla; útil también para aplicar estilos o scroll solo al contenido. |
<tfoot> | Agrupa filas de cierre, típicamente totales o sumas. | Se anuncia como pie de tabla y, al imprimir, se repite al final de cada página. |
<tr> | Una fila (table row). | Unidad de navegación vertical: los lectores de pantalla se mueven fila por fila. |
<th> | Celda de encabezado (table header). | No es solo negrita: declara que esa celda describe a otras. Es la pieza clave para que la tabla sea navegable con tecnología asistiva. |
<td> | Celda de datos (table data). | El contenido propiamente dicho. Se asocia automáticamente con los <th> de su columna y fila. |
<colgroup> / <col> | Define columnas enteras antes del contenido. | Permite aplicar ancho o fondo a toda una columna sin repetir estilos celda por celda. |
scope (atributo) | Se pone en cada <th>: scope="col" o scope="row". | Le dice al lector de pantalla si el encabezado aplica a la columna o a la fila, para anunciar cada dato con su contexto ("Precio: 25.000"). |
Tablas accesibles: th, scope y caption
Una tabla visualmente perfecta puede ser un laberinto para alguien que navega con lector de pantalla. Las tres piezas que lo evitan: usar <th> (no <td> en negrita) para los encabezados, agregarles scope para indicar qué encabezan, y ponerle un <caption> que resuma de qué se trata. Este generador aplica scope="col" automáticamente en cada encabezado y te deja definir el caption con un solo campo.
Tablas en emails HTML: por qué estilos inline
Los clientes de correo recortan o ignoran las hojas de estilo: Gmail elimina <style> en muchos contextos y Outlook renderiza con el motor de Word. Por eso el maquetado de emails se sigue haciendo con tablas y estilos inline en cada celda. Los toggles de bordes colapsados y filas cebra de esta herramienta generan exactamente eso: style="border:1px solid #cccccc;padding:8px" celda por celda, listo para pegar en tu campaña.
De CSV a tabla HTML en segundos
El modo "Desde CSV" acepta el formato estándar RFC 4180: campos separados por coma, campos entre comillas que pueden contener comas y saltos de línea, y comillas escapadas duplicándolas. Exportá tu planilla de Excel o Google Sheets como CSV, pegala, marcá si la primera fila es encabezado y copiá el HTML. Todo el contenido de tus celdas sale escapado (&, <, >), así que el código es seguro aunque los datos traigan símbolos raros.