⚡ Generadores
Generador de tablas HTML
Crea el código HTML de una tabla personalizada eligiendo filas, columnas, encabezados y estilos. El código generado es semántico y accesible, listo para pegar en tu web.
Error:
Anatomía de una tabla HTML semántica
<table>
<caption>Título descriptivo</caption>
<thead>
<tr>
<th scope="col">Columna 1</th>
<th scope="col">Columna 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Totales</td>
</tr>
</tfoot>
</table>
Accesibilidad en tablas
- Usa
<caption>para describir el contenido de la tabla. - Añade
scope="col"oscope="row"a los<th>. - Para tablas complejas, usa atributos
headerseid.
Preguntas frecuentes
¿Cómo hago tablas responsivas en CSS?
Envuelve la tabla en un div con overflow-x: auto para que sea deslizable en móvil. Alternativa avanzada: usa CSS Grid o Flexbox para reordenar la tabla verticalmente en móvil con data-attributes.