Todo lo que necesitas saber sobre la etiqueta `<table>` en HTML
En el desarrollo web, la etiqueta `<table>` es fundamental cuando necesitamos presentar datos estructurados en formato de tabla. Las tablas son indispensables cuando queremos mostrar información de manera clara y organizada.
En este artículo, exploraremos el uso de la etiqueta `<table>`, sus atributos, y cómo aplicarle estilos usando CSS para mejorar su presentación.
¿Qué es la etiqueta `<table>`?
La etiqueta `<table>` en HTML permite crear una tabla, es decir, una estructura de filas y columnas que organizan información en celdas. Cada tabla consta de varias partes importantes:
1. `<table>`: El contenedor principal que define la tabla.
2. `<tr>` (table row): Define una fila en la tabla.
3. `<th>` (table header): Define una celda de encabezado, la cual suele aparecer en la primera fila o columna.
4. `<td>` (table data): Define una celda de datos, es decir, cualquier celda que no sea un encabezado.
Veamos un ejemplo básico:
<table>
<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>Maria</td>
<td>30</td>
<td>México</td>
</tr>
</table>
Este código produce una tabla con tres columnas: "Nombre", "Edad" y "País", y dos filas de datos con información sobre "Juan" y "Maria".
Estructura básica de una tabla
1. `<table>`
La etiqueta `<table>` define el inicio de una tabla. Aunque por sí sola no contiene atributos obligatorios, es común usar atributos como `border` o aplicar clases para darle estilos.
2. `<tr>`
Cada fila de una tabla es representada por la etiqueta `<tr>`. Las filas pueden contener encabezados (`<th>`) o datos (`<td>`). Todos los elementos que quieras colocar en la tabla deben estar dentro de una fila `<tr>`.
3. `<th>` y `<td>`
Los elementos `<th>` son utilizados para los encabezados, y son importantes porque, por defecto, el texto que contienen se muestra en negrita y está centrado dentro de la celda. Además, los lectores de pantalla y herramientas de accesibilidad suelen identificar las celdas con `<th>` como encabezados de la tabla.
Los elementos `<td>`, por otro lado, representan los datos de la tabla. A diferencia de `<th>`, el contenido dentro de `<td>` no tiene un formato especial por defecto, pero puedes aplicarle estilos utilizando CSS.
Atributos y características de la etiqueta `<table>`
1. `border`
El atributo `border` define si la tabla tiene un borde visible. Especificar un valor como `border="1"` le añade un borde de un solo píxel a la tabla y a las celdas.
<table border="1">
<!-- Contenido de la tabla -->
</table>
Sin embargo, es más recomendable usar CSS para este propósito.
2. `cellspacing` y `cellpadding`
`cellspacing` define el espacio entre las celdas de la tabla, mientras que `cellpadding` controla el espacio interior entre el contenido de una celda y el borde de la misma.
<table border="1" cellspacing="10" cellpadding="5">
<!-- Contenido de la tabla -->
</table>
De nuevo, estos atributos se consideran obsoletos y es preferible usar CSS.
3. `colspan` y `rowspan`
A veces necesitamos que una celda se extienda a través de varias columnas o filas. Para ello, se utilizan los atributos `colspan` y `rowspan`:
- `colspan`: Hace que una celda ocupe más de una columna.
- `rowspan`: Hace que una celda abarque más de una fila.
<table border="1">
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>País</th>
</tr>
<tr>
<td colspan="2">Juan</td>
<td>España</td>
</tr>
<tr>
<td>Maria</td>
<td rowspan="2">30</td>
<td>México</td>
</tr>
<tr>
<td>Pedro</td>
<td>Argentina</td>
</tr>
</table>
En este ejemplo, la celda de "Juan" ocupa dos columnas gracias a `colspan="2"`, y la celda de "30" ocupa dos filas debido a `rowspan="2"`.
Mejorando el diseño de las tablas con CSS
Aunque la estructura básica de una tabla es clara y funcional, las tablas por defecto no son visualmente atractivas. Aquí es donde CSS entra en juego para mejorar su apariencia.
Estilos básicos para tablas
Podemos utilizar CSS para aplicar bordes, colores de fondo, y estilos de texto a las tablas. Aquí tienes un ejemplo básico de cómo mejorar el diseño de una tabla con CSS:
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
<table>
<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>Maria</td>
<td>30</td>
<td>México</td>
</tr>
</table>
En este ejemplo, se aplican varios estilos para mejorar la legibilidad de la tabla:
1. Bordes colapsados: El atributo `border-collapse` hace que los bordes de las celdas se combinen en un único borde.
2. Espaciado y alineación: Se añade relleno (`padding`) a las celdas y se alinea el texto a la izquierda.
3. Colores: El encabezado tiene un fondo gris claro, y las filas pares tienen un fondo alternativo para facilitar la lectura (usando `nth-child(even)`).
Partes adicionales de una tabla
Además de los elementos básicos como `<tr>`, `<th>` y `<td>`, HTML ofrece algunas etiquetas adicionales para mejorar la semántica de las tablas:
1. `<caption>`
La etiqueta `<caption>` añade un título o descripción a la tabla. Se coloca justo después de la etiqueta `<table>` y proporciona una manera accesible de describir el contenido de la tabla.
<table>
<caption>Lista de usuarios registrados</caption>
<!-- Contenido de la tabla -->
</table>
2. `<thead>`, `<tbody>`, y `<tfoot>`
Estas etiquetas permiten separar lógicamente las diferentes partes de la tabla. `<thead>` se utiliza para agrupar las filas del encabezado, `<tbody>` para los datos del cuerpo de la tabla, y `<tfoot>` para los totales o pies de página.
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>País</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan</td>
<td>25</td>
<td>España</td>
</tr>
<tr>
<td>Maria</td>
<td>30</td>
<td>México</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total de registros: 2</td>
</tr>
</tfoot>
</table>
El uso de estas etiquetas mejora la accesibilidad y facilita el diseño de tablas grandes.
La etiqueta `<table>` en HTML es una herramienta poderosa para mostrar datos tabulares. Aunque su uso ha disminuido en el diseño de sitios web, sigue siendo esencial para representar información estructurada.