Cómo crear una tabla HTML, paso a paso

Las tablas en HTML son una de las formas más sencillas y efectivas de organizar información.
Sirven para presentar datos de forma clara, ya sea una lista de precios, un horario o una comparativa entre productos.

Aunque hace años se usaban para maquetar páginas web, hoy su función es puramente estructural: mostrar información ordenada en filas y columnas.
Y si estás empezando en desarrollo web, entender cómo funcionan es una base que te servirá siempre.

En esta guía te explico cómo crear una tabla HTML desde cero, con ejemplos reales, buenas prácticas y algunos trucos de estilo para dejarla visualmente profesional.

Si quieres seguir aprendiendo html, aquí te dejo una guía rápida de como poner negrita, cursiva y subrayado.

Qué es una tabla HTML y cómo se estructura

Una tabla en HTML está formada por un conjunto de etiquetas que el navegador interpreta para mostrar los datos correctamente.
Su estructura básica se compone de:

• <table> → Define el inicio y el final de la tabla.
• <tr> → Crea una fila (table row).
• <th> → Celda de encabezado (table header).
• <td> → Celda de datos (table data).

Cada fila <tr> contiene varias celdas <td> o <th>, y todas se agrupan dentro de <table>.

Cómo organizar filas y columnas

En una tabla, cada fila se define con <tr>, y dentro de ella van las celdas de datos o encabezados.
Por ejemplo:

<table>
  <tr>
    <th>Nombre</th>
    <th>Edad</th>
    <th>País</th>
  </tr>
  <tr>
    <td>María</td>
    <td>25</td>
    <td>España</td>
  </tr>
  <tr>
    <td>Carlos</td>
    <td>30</td>
    <td>México</td>
  </tr>
</table>

👉 Este código crea una tabla sencilla con tres columnas (Nombre, Edad, País) y dos filas de datos.

El resultado es una estructura limpia, fácil de leer y lista para personalizar con estilos.

Cómo dar estilo a una tabla HTML con CSS

En versiones antiguas de HTML se usaba border="1" para añadir bordes, pero hoy en día lo ideal es hacerlo con CSS, ya que ofrece un control total sobre el diseño y nos permite realizar más modificaciones de estilos.

Aquí tienes un ejemplo básico de estilo moderno:

<style>
  table {
    width: 60%;
    border-collapse: collapse;
    margin: 20px auto;
    font-family: Arial, sans-serif;
  }

  th, td {
    border: 1px solid #333;
    padding: 8px 12px;
    text-align: center;
  }

  th {
    background-color: #f4f4f4;
  }
</style>

✅ Este código mejora la legibilidad:

• border-collapse: collapse; elimina los espacios entre celdas.
• padding añade aire alrededor del texto.
• background-color diferencia visualmente los encabezados.

Combinar celdas con colspan y rowspan

HTML te permite unir celdas tanto en horizontal como en vertical.

Unir columnas con colspan

<tr>
  <th colspan="2">Información Personal</th>
</tr>

El atributo colspan="2" indica que la celda abarca dos columnas.

Unir filas con rowspan

<tr>
  <td rowspan="2">Juan</td>
  <td>25</td>
</tr>
<tr>
  <td>España</td>
</tr>

En este caso, rowspan="2" hace que la celda “Juan” se una con la fila siguiente.

Cómo hacer que una tabla HTML sea responsiva

Una tabla que se ve bien en ordenador puede romperse en móvil. Por eso es importante hacerla adaptable (responsive).

Opción 1: Convertirla en bloque desplazable

<div style="overflow-x:auto;">
  <table> ... </table>
</div>

👉 Esto permite hacer scroll horizontal en pantallas pequeñas.

Opción 2: Adaptarla con CSS y media queries

table {
  width: 100%;
  border-collapse: collapse;
}

@media (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
}

Con este método, la tabla se adapta al ancho del dispositivo mostrando cada fila como un bloque.

Buenas prácticas al crear tablas HTML

• Usa etiquetas semánticas como <thead>, <tbody> y <tfoot>.
• Añade un <caption> para dar contexto a la tabla.
• No uses tablas para maquetar: usa CSS Grid o Flexbox.
• Cuida la accesibilidad con textos claros y contraste suficiente.
• Revisa siempre que todas las etiquetas <tr> y <td> estén bien cerradas.

Herramientas útiles para crear tablas HTML

Existen muchas herramientas que te permiten realizar ensayos de prueba y error. Son de gran utilidad para practicar a crear tablas con html de forma rápida y segura.

HTML Table Generator → para crear tablas de forma visual.

W3Schools Table Editor → ideal para probar código en tiempo real.

¿Cómo dominar las tablas HTML?

Entender cómo funciona una tabla HTML te da más control sobre cómo presentas los datos.
Con unas pocas etiquetas y algo de CSS puedes pasar de una tabla básica a una presentación profesional, clara y perfectamente adaptada a tu diseño.

Desde mi experiencia, las tablas bien estructuradas no solo ayudan al usuario, sino también a Google a entender mejor la información.
Y en una web bien hecha, claridad y semántica son dos pilares tan importantes como el diseño.

Preguntas frecuentes sobre cómo crear una tabla HTML

José Manuel Castillejo

Soy José Manuel Castillejo Rodríguez, diseñador web y especialista SEO, aunque con el tiempo he acabado metiéndome en casi todo lo que tiene que ver con el marketing digital.

Hoy ayudo a marcas y profesionales a construir presencia digital con estrategia, tanto optimizando un sitio como analizando datos o ideando nuevas formas de hacer que un proyecto crezca.
Cuando no estoy frente al ordenador, me gusta desconectar saliendo al aire libre, improvisando alguna escapada o simplemente disfrutando de un buen café mientras pienso en la siguiente idea que voy a poner en marcha.