¿Cómo crear tablas en HTML?

Las tablas en HTML son una herramienta fundamental para organizar y presentar datos en filas y columnas dentro de una página web.

Aprender a crear tablas en HTML, y aplicarles estilos con CSS, es esencial para mejorar la presentación y usabilidad de los datos estructurados en tus proyectos.

¿Qué son las tablas HTML?

Las tablas en HTML son estructuras utilizadas para mostrar información de manera tabular, es decir, en un formato de filas y columnas. Se componen de etiquetas específicas que ayudan a organizar y estructurar los datos de forma clara y accesible.

Como ventaja de usar HTML para crear tablas tendrás la limpieza de código, que será siempre más limpio que otro tipo de tablas que se suelen ven en CMS como WordPress, que con la ayuda de plugins, puedes crear tablas en WordPress, pero añaden bastante JS y código extra que puede bajar el nivel de velocidad de nuestra web.

Etiquetas principales de las tablas HTML

Las siguientes etiquetas son esenciales para crear una tabla en HTML:

• <table>: Define el inicio y el fin de la tabla.
• <tr>: Define una fila dentro de la tabla.
• <th>: Define una celda de encabezado (generalmente en negrita y centrada).
• <td>: Define una celda de datos dentro de una fila.
• <caption>: Añade un título descriptivo a la tabla (opcional).

Ejemplo básico de una tabla en HTML:

    <table border="1">
<caption>Mi primera tabla</caption>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>País</th>
</tr>
<tr>
<td>Juan</td>
<td>25</td>
<td>España</td>
</tr>
<tr>
<td>María</td>
<td>30</td>
<td>México</td>
</tr>
</table>
    
  

Representación gráfica de la tabla:

Mi primera tabla

Nombre	Edad	País
Juan	25	España
María	30	México

 

¿Qué hace cada una de estas etiquetas HTML?

• <table>: Define el inicio y fin de la tabla.
• <tr>: Define una fila de la tabla.
• <th>: Define una celda de encabezado (generalmente en negrita y centrada).
• <td>: Define una celda de datos dentro de una fila.
• <caption>: Añade un título descriptivo a la tabla.

Ejemplo de tabla HTML con CSS:

Además de crear tablas con HTML, podemos mejorarlas visualmente utilizando CSS. El uso de CSS permite hacer que la tabla sea más atractiva y fácil de leer, añadiendo colores, bordes y espaciado.

Tabla HTML con estilo CSS añadido:

    
<table style="border-collapse: collapse; width: 100%; font-family: Arial, sans-serif; font-size: 16px;">
<caption style="font-weight: bold; margin-bottom: 10px; text-align: left;">Productos y precios</caption>
<!-- Definir estilos por columna -->
<colgroup>
<col style="background-color: #D8F3DC; font-weight: bold;" />
<col style="background-color: #FFDDD2;" />
<col style="background-color: #CAF0F8;" />
</colgroup>
<!-- Encabezado de la tabla -->
<thead>
<tr>
<th style="border: 1px solid #aaa; padding: 10px; text-align: left;">Producto</th>
<th style="border: 1px solid #aaa; padding: 10px; text-align: left;">Precio</th>
<th style="border: 1px solid #aaa; padding: 10px; text-align: left;">Cantidad</th>
</tr>
</thead>
<!-- Cuerpo de la tabla -->
<tbody>
<tr>
<td style="border: 1px solid #aaa; padding: 10px;">Manzanas</td>
<td style="border: 1px solid #aaa; padding: 10px;">1.00 €</td>
<td style="border: 1px solid #aaa; padding: 10px;">10</td>
</tr>
<tr>
<td style="border: 1px solid #aaa; padding: 10px;">Plátanos</td>
<td style="border: 1px solid #aaa; padding: 10px;">0.50 €</td>
<td style="border: 1px solid #aaa; padding: 10px;">20</td>
</tr>
<tr>
<td style="border: 1px solid #aaa; padding: 10px;">Naranjas</td>
<td style="border: 1px solid #aaa; padding: 10px;">0.75 €</td>
<td style="border: 1px solid #aaa; padding: 10px;">15</td>
</tr>
</tbody>
</table>
    
  

Representación gráfica de la tabla con estilos:

Productos y precios

Producto	Precio	Cantidad
Manzanas	1.00 €	10
Plátanos	0.50 €	20
Naranjas	0.75 €	15

 

Explicación del CSS añadido

A continuación, te explico el CSS utilizado para mejorar el diseño de la tabla:

1. border-collapse: collapse;: Este estilo hace que los bordes de las celdas se “colapsen” en un solo borde, eliminando el espacio entre ellos y proporcionando un aspecto más limpio y organizado.
2. width: 100%;: La tabla ocupará el 100% del ancho disponible en su contenedor, adaptándose a la pantalla de forma flexible.
3. font-family: Arial, sans-serif;: Se establece la fuente “Arial” (con una fuente alternativa sans-serif si no está disponible) para hacer que el texto sea más legible.
4. font-size: 16px;: El tamaño de la fuente se establece en 16 píxeles, lo que es un tamaño cómodo para leer.
5. caption: Se aplica un estilo al título de la tabla, poniéndolo en negrita (font-weight: bold), añadiendo un margen en la parte inferior (margin-bottom: 10px) y alineando el texto a la izquierda (text-align: left).
6. colgroup y col: Estos elementos permiten aplicar estilos a las columnas de manera individual. Se utilizan para darle a cada columna un color de fondo diferente y resaltar ciertos datos.
7. th, td: Se aplican estilos comunes a las celdas de encabezado (<th>) y celdas de datos (<td>), incluyendo bordes, espaciado (padding) y alineación del texto.
8. background-color: Se utilizan colores de fondo para diferenciar las filas de encabezado y las filas de datos, lo que mejora la visibilidad de la tabla.

Otra forma de añadir estilos CSS a una tabla HTML

También puedes añadir estilos CSS de manera externa o en la sección <style> del documento, en lugar de usarlos directamente dentro de las etiquetas HTML. Esto permite tener un código más limpio y fácil de gestionar.

    
<table style="border-collapse: collapse; width: 100%; font-family: Arial, sans-serif; margin-top: 20px;">
<thead>
<tr>
<th style="border: 1px solid #000; padding: 8px; text-align: left; background-color: #ffb4a2;">Nombre</th>
<th style="border: 1px solid #000; padding: 8px; text-align: left; background-color: #ffb4a2;">Edad</th>
<th style="border: 1px solid #000; padding: 8px; text-align: left; background-color: #ffb4a2;">País</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border: 1px solid #000; padding: 8px;">Juan</td>
<td style="border: 1px solid #000; padding: 8px;">25</td>
<td style="border: 1px solid #000; padding: 8px;">España</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px;">María</td>
<td style="border: 1px solid #000; padding: 8px;">30</td>
<td style="border: 1px solid #000; padding: 8px;">México</td>
</tr>
</tbody>
</table>

    
  

Representación gráfica de la tabla con estilos:

Nombre	Edad	País
Juan	25	España
María	30	México

 

Conclusión

Las tablas en HTML son una forma eficiente de organizar datos en una página web. Al aplicarles estilos con CSS, puedes mejorar su apariencia y legibilidad, haciendo que la presentación de los datos sea más atractiva y profesional.

Con el uso adecuado de estas herramientas, puedes crear tablas dinámicas y bien diseñadas que se adapte a tu sitio web.

Puedes ayudarte de herramientas como editores de HTML o editores de código para poder crear tus tablas antes de añadilas a tu página web.