Generador de tablas HTML
Escribe o pega tus datos en la cuadrícula, elige un estilo y obtén código de tabla HTML limpio y accesible con el CSS correspondiente y una vista previa en vivo. No se sube nada: la tabla se crea en tu navegador.
Última actualización:
Haz clic en una celda para escribir. Intro baja, Shift+Intro añade un salto de línea y Tab va a la derecha. Al pegar varias celdas de una hoja de cálculo se llena la cuadrícula.
Vista previa en vivo
Cómo usar Generador de tablas HTML
- Ingresa tus datos: haz clic en una celda y escribe, o pega un bloque de celdas copiado de Excel o Google Sheets. Usa Pegar CSV / Excel para importar el texto de un archivo completo.
- Ajusta la estructura con + Fila, + Columna, − Fila y − Columna; actúan sobre la celda seleccionada.
- Elige el aspecto: estilo predefinido, bordes, alineación, relleno, fila o columna de encabezado, filas alternas y resaltado.
- Elige la salida CSS: una clase con bloque de estilos, estilos en línea para emails y editores de CMS, o HTML simple para tu propia hoja de estilos.
- Copia el código con Copiar HTML y Copiar CSS, o descarga una página HTML completa.
Anatomía de una tabla HTML accesible
El generador produce marcado semántico que entienden los navegadores, los buscadores y los lectores de pantalla:
| Elemento | Función |
|---|---|
<table> | El contenedor de los datos tabulares. |
<caption> | Un título visible para la tabla; los lectores de pantalla lo anuncian primero. |
<thead>, <tbody> | Agrupan las filas de encabezado y las de datos. Los navegadores pueden repetir thead en cada página impresa. |
<tr> | Una fila de la tabla. |
<th scope="col"> | Una celda de encabezado de columna. |
<th scope="row"> | Una celda de encabezado de fila (la opción Columna de encabezado). |
<td> | Una celda de datos. |
Consejos para dar estilo a tablas
- Usa
border-collapse: collapsepara que los bordes de celdas contiguas se fusionen en líneas simples. Sin esto, cada celda dibuja su propio borde con un hueco entre ellos. - Alinea los números a la derecha y usa
font-variant-numeric: tabular-numspara que los dígitos queden alineados y las cantidades sean fáciles de comparar. El generador detecta automáticamente columnas numéricas como precios, porcentajes y recuentos. - Las filas alternas tipo cebra (
tr:nth-child(even)) ayudan a seguir filas largas; un color de resaltado sutil al pasar el cursor hace lo mismo en el escritorio. - Mantén legible el encabezado: un contraste fuerte entre el texto del encabezado y el fondo (los estilos Encabezado verde y Encabezado oscuro usan texto blanco sobre un relleno oscuro).
- Tablas anchas en teléfonos: envuelve la tabla en un contenedor con
overflow-x: autoen lugar de reducir el texto. - Emails: muchos clientes de email ignoran los bloques
<style>, así que elige Estilos en línea para los boletines y usa anchos sencillos.
Importar datos
El importador acepta texto separado por comas, punto y coma, tabulaciones y barras verticales, y detecta el separador a partir de la primera línea. Los campos CSV entre comillas pueden contener comas, saltos de línea y comillas dobles duplicadas ("He said ""hi"""). También se importan tablas Markdown (| a | b |), omitiendo la línea divisoria |---|. ¿Necesitas otro formato? Convierte CSV a JSON con el convertidor de CSV a JSON, o explora primero un archivo grande en el visor de CSV.
Preguntas frecuentes
¿Cómo creo una tabla en HTML?
Una tabla es un elemento <table> que contiene filas (<tr>) formadas por celdas de encabezado (<th>) y celdas de datos (<td>). Pon la fila de encabezado en <thead> y las filas de datos en <tbody>, añade un <caption> para describir la tabla y da a las celdas de encabezado scope="col" o scope="row" para que los lectores de pantalla puedan anunciarlas. Este generador escribe esa estructura por ti.
¿Cómo convierto una hoja de Excel en una tabla HTML?
Selecciona las celdas en Excel o Google Sheets, cópialas, haz clic en la primera celda de la cuadrícula de aquí y pega. Los datos separados por tabulaciones llenan la cuadrícula y el HTML se actualiza al instante. También puedes pegar texto CSV en el panel Pegar CSV / Excel.
¿Debo usar estilos en línea o una clase CSS?
Usa una clase con un bloque de estilos o una hoja de estilos para sitios web: mantiene el HTML pequeño y te permite cambiar el estilo de todas las tablas a la vez. Usa estilos en línea cuando el destino elimina las etiquetas <style>, como muchos clientes de email y algunos editores de CMS. Los efectos al pasar el cursor necesitan CSS, así que solo están disponibles con la opción de clase.
¿Cómo hago una tabla HTML responsive?
Mantén activada la opción Contenedor con desplazamiento responsive. Envuelve la tabla en un <div> con overflow-x: auto, de modo que las tablas anchas se desplazan de lado en los teléfonos en lugar de romper el diseño de la página.
¿Cómo combino celdas (colspan y rowspan)?
La cuadrícula crea una tabla normal sin celdas combinadas. Después de copiar el código, añade colspan="2" o rowspan="2" a la celda que debe abarcar varias y elimina las celdas que cubre. Usa las celdas combinadas lo menos posible, porque hacen que las tablas sean más difíciles de leer para los lectores de pantalla.
¿Las tablas son malas para maquetar?
Las tablas son el elemento correcto para datos tabulares como precios, horarios y comparaciones. No las uses para maquetar secciones de la página; para eso usa CSS grid o flexbox.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.
Herramientas relacionadas
Ver todas las de Conversores de datos y formatos de archivo →