Cómo crear tablas en HTML y cuándo usarlas

Las tablas en HTML son una herramienta fundamental para organizar y presentar datos de forma clara y estructurada en una página web. Desde listas de precios hasta horarios o comparativas, las tablas facilitan la visualización y comprensión de información tabular.

En este artículo te explicamos cómo crear tablas en HTML paso a paso y en qué situaciones es recomendable usarlas para mejorar la experiencia del usuario.

¿Qué es una tabla en HTML?

Una tabla en HTML es un conjunto de filas y columnas que permiten mostrar datos organizados en celdas. Se crea usando la etiqueta <table> y sus elementos asociados:

<tr>: define una fila (table row).
<th>: define una celda de encabezado (table header).
<td>: define una celda de datos (table data).

Cómo crear una tabla básica en HTML

Aquí tienes un ejemplo simple de tabla con encabezados y filas de datos:

<table border="1">
  <tr>
    <th>Producto</th>
    <th>Precio</th>
    <th>Cantidad</th>
  </tr>
  <tr>
    <td>Teclado</td>
    <td>$25</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Mouse</td>
    <td>$15</td>
    <td>20</td>
  </tr>
</table>

Este código crea una tabla con tres columnas y dos filas de datos. El atributo border="1" añade un borde visible para facilitar su visualización (aunque en práctica se recomienda usar CSS para estilos).

Explicación de las etiquetas usadas

<table>: Define la tabla completa.
<tr>: Cada fila dentro de la tabla.
<th>: Celdas de encabezado, generalmente en negrita y centradas.
<td>: Celdas de contenido o datos.

Cómo mejorar la tabla con CSS

Para un diseño más profesional, evita usar el atributo border en HTML y aplica estilos con CSS. Por ejemplo:

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
</style>

Este código CSS mejora la presentación con bordes más suaves, espaciado y colores de fondo para encabezados.

¿Cuándo usar tablas en HTML?

Usa tablas cuando necesitas mostrar datos tabulares que tengan sentido en filas y columnas. Algunos ejemplos incluyen:

Horarios o calendarios.
Listas de precios o productos.
Resultados deportivos o estadísticas.
Comparativas entre características o productos.

¿Cuándo NO usar tablas?

Evita usar tablas para organizar el diseño general de una página web (como columnas o layout). Para eso existen CSS con Flexbox o Grid, que son más flexibles y accesibles.

Usar tablas solo para el diseño puede dificultar la accesibilidad y el SEO, además de complicar la adaptación para dispositivos móviles.

Consejos para tablas accesibles

Usa <th> para encabezados y asócialos correctamente con filas o columnas.
Agrega el atributo scope para mejorar la navegación por lectores de pantalla:

<th scope="col">Producto</th>
<th scope="row">Teclado</th>

Evita tablas muy aLas tablas en HTML son ideales para presentar datos organizados y facilitar la comprensión. Crearlas es sencillo con las etiquetas <table>, <tr>, <th> y <td>, pero es fundamental usarlas solo cuando la información realmente lo amerite y cuidar su accesibilidad y diseño con CSS.

Si quieres que tus datos se vean claros, ordenados y profesionales, dominar las tablas HTML es imprescindible.nchas o con demasiadas columnas en dispositivos móviles.

Ciberseguridad