Cover Image

Cómo crear una tabla en HTML para mostrar datos (paso a paso)
Marzo 24, 2025 - Tiempo de lectura: 12 minutos

Si estás aprendiendo HTML y necesitas mostrar información como listas, productos, notas o cualquier otro tipo de datos organizados, las tablas son una herramienta esencial.

Hoy te muestro cómo crear una tabla en HTML, qué etiquetas se usan, y cómo darle un poco de estilo para que se vea bonita.

🔧 ¿Qué es una tabla en HTML?

Una tabla en HTML se compone de filas y columnas. Cada celda se define con etiquetas específicas que te permiten organizar y mostrar información estructurada.

✍️ Estructura básica de una tabla

Aquí tienes el código mínimo para una tabla:

<table border="1"> <tr> <th>Nombre</th> <th>Edad</th> <th>País</th> </tr> <tr> <td>Ana</td> <td>25</td> <td>Perú</td> </tr> <tr> <td>Luis</td> <td>30</td> <td>México</td> </tr> </table>

🧩 Explicación rápida

  • <table>: Contenedor de toda la tabla.

  • <tr>: "Table row", define una fila.

  • <th>: "Table header", es una celda de encabezado (en negrita).

  • <td>: "Table data", celda normal con datos.

🎨 Agregando estilo con CSS

Ahora vamos a mejorar su apariencia con un poco de estilo:

<style> table { border-collapse: collapse; width: 70%; margin: 20px auto; font-family: Arial, sans-serif; } th, td { border: 1px solid #999; padding: 10px; text-align: center; } th { background-color: #f2f2f2; } </style>

Y lo aplicas al mismo <table> de antes.

🧠 ¿Para qué puedes usar tablas?

  • Mostrar usuarios registrados

  • Listar productos o precios

  • Boletas de calificaciones

  • Informes y estadísticas

Categories