Como crear tablas en HTML y Markdown: guia completa con generador gratis

Una tabla HTML se compone de etiquetas anidadas:

<table>
  <thead>
    <tr><th>Nombre</th><th>Edad</th></tr>
  </thead>
  <tbody>
    <tr><td>Ana</td><td>28</td></tr>
    <tr><td>Luis</td><td>35</td></tr>
  </tbody>
</table>

Elementos clave:

• <table> — Contenedor de la tabla
• <thead> — Encabezado (headers)
• <tbody> — Cuerpo de datos
• <tr> — Fila (table row)
• <th> — Celda de encabezado (table header)
• <td> — Celda de datos (table data)

Genera tablas visualmente con el generador de tablas de NexTools.

Markdown usa una sintaxis con pipes (|) y guiones (-):

| Nombre | Edad | Ciudad |
|--------|------|--------|
| Ana | 28 | Madrid |
| Luis | 35 | Lima |

Alineacion:

• :---| izquierda (default)
• :---:| centrado
• ---:| derecha

Limitaciones de Markdown: No soporta celdas combinadas (colspan/rowspan), colores, bordes personalizados ni filas anidadas. Para tablas complejas, usa HTML dentro del Markdown.

Para escribir Markdown, consulta nuestra guia de Markdown.

El generador de NexTools:

Paso 1: Define filas y columnas.

Paso 2: Ingresa los datos en el editor visual (tipo spreadsheet).

Paso 3: Elige formato de salida: HTML o Markdown.

Paso 4: Copia el codigo generado.

Util para: crear tablas rapidas para blogs, documentacion, emails, y cualquier contexto donde escribir HTML manualmente es tedioso.

Tabla basica con bordes:

table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ddd; padding: 8px 12px; text-align: left; }
th { background-color: #f2f2f2; font-weight: bold; }
tr:hover { background-color: #f5f5f5; }

Tabla zebra (filas alternas):

tr:nth-child(even) { background-color: #f9f9f9; }

Tabla con borde redondeado:

table { border-collapse: separate; border-spacing: 0; border-radius: 8px; overflow: hidden; }

Para sombras en tu tabla, usa el generador de box-shadow de NexTools.

Las tablas anchas se rompen en pantallas pequenas. Soluciones:

1. Scroll horizontal:

.table-wrapper { overflow-x: auto; }
<div class="table-wrapper"><table>...</table></div>

2. Cards en movil (CSS): Convertir filas en cards apiladas para pantallas <768px. Cada celda muestra su label.

3. Ocultar columnas: Con media queries, ocultar columnas menos importantes en movil.

4. Usar librerias: TanStack Table (React), AG Grid, DataTables (jQuery) manejan responsividad automaticamente.

Verifica las dimensiones con la calculadora de porcentajes de NexTools para calcular anchos proporcionales.

1. Siempre usa <thead> y <th>. Los screen readers usan estos elementos para anunciar las columnas. Sin ellos, la tabla es innavegable para usuarios ciegos.

2. Atributo scope. <th scope="col"> para headers de columna, <th scope="row"> para headers de fila.

3. Caption. <caption>Tabla de precios 2026</caption> describe el proposito de la tabla.

4. No uses tablas para layout. Las tablas son para DATOS tabulares. Para layout, usa CSS Grid o Flexbox.

Tabla HTML (<table>): Para datos tabulares (precios, comparativas, estadisticas, horarios). Semanticamente correcto y accesible.

CSS Grid: Para layouts de pagina (grids de cards, galerias, dashboards). No es una tabla aunque se vea como una.

Flexbox: Para alineacion en una dimension (barras de navegacion, botones en fila). No para tablas.

Error comun: Usar <div> + CSS Grid para crear algo que visualmente parece tabla. Los screen readers no lo reconocen como tabla. Si los datos son tabulares, usa <table>.

React (TanStack Table v8): La libreria de tablas mas usada en React. Sorting, filtering, pagination, virtualizacion. Headless (tu controlas el render).

Tailwind CSS: Clases para tablas: table-auto, border-collapse, divide-y. Sin JavaScript, solo estilos.

shadcn/ui: Componente Table pre-estilizado con Radix + Tailwind.

AG Grid: Para tablas enterprise con millones de filas. Virtualizacion, Excel export, pivoting.

Valida tus datos JSON antes de renderizarlos en tabla con el validador JSON de NexTools.