Las tablas HTML se utilizan para estructurar y presentar datos en la web. Aunque su equivalente en CSS (como los grids o los flexbox) son a menudo preferidos por ser más modernos, las tablas HTML siguen siendo ideales para organizar información en forma de tabla.
Permiten presentar los datos de manera estructurada organizándolos en filas y columnas. Esto facilita la presentación de datos complejos y permite al usuario comprender mejor la información proporcionada. A menudo se utilizan para tablas de comparación, informes financieros o simplemente para mostrar información bien ordenada.
¿Cómo es la estructura de una Tabla HTML?
Las tablas HTML se construyen utilizando etiquetas anidadas que definen los diferentes niveles de la estructura. Aquí están los principales elementos que puedes usar para construir una tabla.
1. <table > : El contenedor principal
Esta etiqueta es el contenedor principal de toda tabla HTML. Contiene todos los elementos de la tabla, incluidos las filas, columnas y celdas. Por defecto, una tabla no tiene un borde visible. Para añadirle uno, es posible utilizar el atributo border.
2. <thead >, <tbody > et <tfoot > : Organización de la tabla
- <thead> : Contiene los encabezados de las columnas. Usar esta etiqueta permite agrupar los elementos que sirven como encabezado de la tabla. Las etiquetas en <thead> son a menudo <th> (table headers).
- <tbody> : Contiene el cuerpo principal de la tabla, es aquí donde los datos generalmente se colocan. Las filas de datos se crean con la etiqueta <tr>.
- <tfoot> : Se utiliza para agrupar la información que va al final de la tabla, como un resumen o totales.
Aquí un ejemplo de una tabla:
<table border="1">
<thead>
<tr>
<th>Variable</th>
<th>Tipo</th>
<th>Descripción</th>
</tr>
</thead>
<tbody>
<tr>
<td>Edad</td>
<td>Entero</td>
<td>Representa la edad de una persona en años</td>
</tr>
<tr>
<td>Ingreso</td>
<td>Flotante</td>
<td>Representa el ingreso anual en euro</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Número total de variables</td>
<td>2</td>
</tr>
</tfoot>
</table>
Aquí, <tr>, <th>, y <td> crean respectivamente filas, celdas de encabezado (a menudo estilizadas en negrita por defecto) y celdas de datos.
Aquí está esta simple tabla concretamente:
| Variable | Tipo | Descripción |
|---|---|---|
| Edad | Entero | Representa la edad de una persona en años |
| Ingreso | Flotante | Representa el ingreso anual en euros |
| Número total de variables | 2 | |
¿Cómo manejar tablas complejas?
Las tablas HTML pueden volverse bastante complejas cuando deben representar grandes cantidades de datos o relaciones más detalladas entre las diferentes columnas y filas. Aquí un ejemplo de una tabla compleja que utiliza columnas fusionadas y filas fusionadas:
<table id="miTabla" border="1">
<thead>
<tr>
<th rowspan="2">Nombre</th>
<th colspan="2">Información Profesional</th>
<th rowspan="2">Salario (€)</th>
</tr>
<tr>
<th>Trabajo</th>
<th>Nivel</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob Sponge</td>
<td>Data Analyst</td>
<td>Junior</td>
<td>45 000</td>
</tr>
<tr>
<td>Alice Wonderland</td>
<td>Data Scientist</td>
<td>Senior</td>
<td>60 000</td>
</tr>
<tr>
<td>Bart Simpson</td>
<td>Data Engineer</td>
<td>Intermédiaire</td>
<td>55 000</td>
</tr>
<tr>
<td>Rick Sanchez</td>
<td>Architecte Big Data</td>
<td>Expert</td>
<td>75 000</td>
</tr>
<tr>
<td>Morty Smith</td>
<td>Machine Learning Engineer</td>
<td>Junior</td>
<td>70 000</td>
</tr>
</tbody>
</table>
- Fusión de columnas colspan : En el encabezado <thead>, la celda «Información Profesional» cubre dos columnas («Trabajo» y «Nivel»). Esto se realiza gracias al atributo colspan=«2».
- Fusión de filas rowspan : La celda «Nombre» está fusionada sobre dos filas de encabezado, gracias a rowspan=«2», para indicar que el nombre de cada persona es independiente de las subcategorías (trabajo y nivel).
- Estructura más compleja : Este tipo de tabla es particularmente útil para presentar datos con subcategorías, como el nivel de competencia o detalles adicionales sobre cada entrada.
- Usando técnicas avanzadas como colspan y rowspan, puedes crear tablas que no solo estructuran tus datos de manera clara, sino que también proporcionan un nivel de información más complejo, manteniéndose fácil de leer para los usuarios.
El resultado es el siguiente:
| Nombre | Información Profesional | Salario (€) | |
|---|---|---|---|
| Trabajo | Nivel | ||
| Bob Sponge | Data Analyst | Junior | 45 000 |
| Alice Wonderland | Data Scientist | Senior | 60 000 |
| Bart Simpson | Data Engineer | Intermedio | 55 000 |
| Rick Sanchez | Arquitecto Big Data | Experto | 75 000 |
| Morty Smith | Machine Learning Engineer | Junior | 70 000 |
¿Cómo estilizar las tablas HTML?
Aunque algunas propiedades pueden permitir personalizar una tabla HTML, el método preferido a menudo es el CSS.
El siguiente ejemplo muestra una personalización relativamente simple de una tabla HTML:
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Trabajo</th>
<th>Salario (€)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob Sponge</td>
<td>Data Analyst</td>
<td>45 000</td>
</tr>
<tr>
<td>Alice Wonderland</td>
<td>Data Scientist</td>
<td>60 000</td>
</tr>
<tr>
<td>Bart Simpson</td>
<td>Data Engineer</td>
<td>55 000</td>
</tr>
<tr>
<td>Rick Sanchez</td>
<td>Architecte Big Data</td>
<td>75 000</td>
</tr>
<tr>
<td>Morty Smith</td>
<td>Machine Learning Engineer</td>
<td>70 000</td>
</tr>
</tbody>
</table>
El resultado ya parece menos austero:
| Nombre | Trabajo | Salario (€) |
|---|---|---|
| Bob Sponge | Data Analyst | 45 000 |
| Alice Wonderland | Data Scientist | 60 000 |
| Bart Simpson | Data Engineer | 55 000 |
| Rick Sanchez | Arquitecto Big Data | 75 000 |
| Morty Smith | Machine Learning Engineer | 70 000 |
Combinando el uso fino del CSS con las tablas, será posible obtener resultados visualmente muy atractivos, resaltar ciertos elementos, y mucho más.
¿Cómo garantizar la accesibilidad y seguir buenas prácticas?
Las tablas pueden plantear problemas de accesibilidad si no están bien estructuradas. Esto puede ser aún más impactante según los navegadores, pero especialmente en lo que respecta a los usuarios que usan lectores de pantalla. Se trata de softwares que permiten a las personas con discapacidades visuales navegar por un sitio web. Este software convierte lo que se ve en la pantalla en salida de audio o braille.
Aquí algunas buenas prácticas para hacer tus tablas accesibles:
- Usa encabezados claros : Las etiquetas <th> ayudan a los lectores de pantalla a comprender los encabezados de columna. Cada encabezado debe describir con precisión el contenido de la columna o de la fila, para que los usuarios puedan navegar fácilmente dentro de la tabla.
- Agrega atributos scope : Usa scope=«col» o scope= «row» para indicar a qué columna o fila pertenece un encabezado. Esto ayuda a los lectores de pantalla a asociar cada celda de datos con su encabezado correspondiente. Por ejemplo:
<table border="1">
<thead>
<tr>
<th scope="col">Nombre</th>
<th scope="col">Trabajo</th>
<th scope="col">Salario (€)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice Wonderland</td>
<td>Data Scientist</td>
<td>60 000</td>
</tr>
</tbody>
</table>
Agrega un <caption> : Esta etiqueta se puede usar para proporcionar un título descriptivo a la tabla. Esto permite a los usuarios, incluidos aquellos que usan lectores de pantalla, comprender rápidamente el propósito de la tabla. Por ejemplo:
<table border="1">
<caption>Tabla de salarios de los empleados del área de Datos</caption>
<thead>
<tr>
<th scope="col">Nombre</th>
<th scope="col">Trabajo</th>
<th scope="col">Salario (€)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice Wonderland</td>
<td>Data Scientist</td>
<td>60 000</td>
</tr>
</tbody>
</table>
- Prioriza el CSS para la personalización : Mantén el HTML simple y usa el CSS para la personalización. Esto mejora el mantenimiento y hace que el código sea más accesible. Por ejemplo, puedes estilizar tus tablas con CSS para hacerlas más atractivas sin sobrecargar el HTML.
- Tablas complejas y asociación de encabezados y celdas : Cuando trabajas con tablas complejas, donde los datos se organizan en varios niveles, es útil asociar cada celda de datos con su encabezado utilizando los atributos headers e id. Esto garantiza una mejor navegación para los usuarios de lectores de pantalla. Por ejemplo:
<table border="1">
<thead>
<tr>
<th id="nombre">Nombre</th>
<th id="trabajo">Trabajo</th>
<th id="salario">Salario Promedio (€)</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="nombre">Alice Wonderland</td>
<td headers="trabajo">Data Scientist</td>
<td headers="salario">45 000</td>
</tr>
</tbody>
</table>
Tablas y datos dinámicos
Puede ser útil añadir dinamismo a las tablas propuestas. Con JavaScript, puede añadir o eliminar filas de forma dinámica, lo que hace que las interfaces sean más interactivas.
He aquí un ejemplo de un sencillo script que añade una fila a una tabla:
<button onclick="añadirFila()">Añadir una fila</button>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
<table id=«miTabla« border=«1»>
<thead>
<tr>
<th>Nombre</th>
<th>Trabajo</th>
<th>Salario (€)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice Wonderland</td>
<td>Data Scientist</td>
<td>60 000</td>
</tr>
</tbody>
</table>
<script>
function añadirFila() {
var table = document.getElementById(«miTabla»).getElementsByTagName(‘tbody’)[0];
var nuevaFila = table.insertRow();
var celda1 = nuevaFila.insertCell(0);
var celda2 = nuevaFila.insertCell(1);
var celda3 = nuevaFila.insertCell(2);
celda1.innerHTML = «Nombre Apellido«;
celda2.innerHTML = «Data Engineer»;
celda3.innerHTML = «55 000»;
}
</script>
El botón se utilizará para añadir una nueva línea, en este ejemplo con valores por defecto.
| Nombre | Trabajo | Salario (€) |
|---|---|---|
| Alice Wonderland | Data Scientist | 60 000 |
Conclusión
Las tablas HTML son herramientas poderosas para presentar datos de forma estructurada, facilitando la legibilidad y la comprensión de la información. Conociendo los elementos básicos como <table>, <thead>, <tbody>, <tr>, <th> y <td>, así como conceptos más avanzados como colspan y rowspan, podrás crear tablas sofisticadas y accesibles. Además, al combinar CSS para la personalización gráfica y JavaScript para agregar interactividad, tus tablas podrán ser más dinámicas y funcionales. Siguiendo buenas prácticas, especialmente relacionadas con la accesibilidad, tus tablas serán utilizables por una amplia variedad de usuarios y en una gran cantidad de navegadores.
