Las listas y tablas en HTML son las estructuras semánticas que nos permiten agrupar elementos o textos relacionados entre sí de forma secuencial.
Son una de las herramientas más potentes para organizar la información en vuestra página web. No solo hacen que el contenido sea mucho más fácil de leer visualmente, sino que ayuda a los motores de búsqueda y lectores de pantalla.
HTML nos proporciona herramientas específicas para elementos unidimensionales (las listas) y bidimensionales (las tablas).
Listas desordenadas (<ul>)
Las listas desordenadas son aquellas en las que el orden de los elemtos no importa (como nuestra lista de la compra).
Para crearlas, utilizamos la etiqueta contenedora <ul> (de Unordered List). Por defecto, el navegador dibujará un pequeño círculo negro (un “bullet” o viñeta) delante de cada elemento.
Pero el contenedor por sí solo no hace nada. Para añadir los elementos individuales dentro de la lista, debemos envolver cada uno de ellos en una etiqueta <li> (de List Item).
<p>Cosas que tengo que comprar hoy:</p>
<ul>
<li>Huevos</li>
<li>Leche</li>
<li>Manzanas</li>
<li>Papel higiénico</li>
</ul>
El único hijo directo permitido dentro de una etiqueta <ul> o <ol> es un <li>. Es un error insertar un <div>, un <h2> o un <p> flotando directamente dentro del contenedor de la lista. Si necesitáis un div, debéis meterlo dentro del <li>.
Listas ordenadas (<ol>)
Cuando la secuencia de los datos sí importa y altera el significado del contenido (como los pasos de un tutorial técnico, un ranking de puntuación o un recetario), abandonamos el <ul> y utilizamos el contenedor <ol> (Ordered List).
El navegador, de forma completamente automática, inyectará números ascendentes (1., 2., 3.) delante de cada nodo <li>. Si el día de mañana añadís un nuevo paso en el medio del código, el navegador recalculará todos los números siguientes al instante.
<h3>Pasos para desplegar la web:</h3>
<ol>
<li>Comprobar que el código no tiene errores.</li>
<li>Subir los archivos al servidor remoto.</li>
<li>Configurar el dominio DNS.</li>
</ol>
Tablas (<table>): Datos bidimensionales
Mientras que las listas resuelven el problema de los datos secuenciales, a veces necesitamos cruzar información en filas y columnas, como haríamos en una hoja de cálculo de Excel.
Para esto existe la etiqueta <table>. La estructura de una tabla en HTML es mucho más estricta y verbosa que la de una lista. Requiere varios niveles de anidamiento para que el navegador pueda trazar la cuadrícula correctamente.
<table>: El contenedor maestro.<thead>y<tbody>: Agrupan semánticamente la cabecera de la tabla y el cuerpo de los datos, respectivamente.<tr>(Table Row): Define una fila horizontal entera.<th>(Table Heading): Define una celda de cabecera. Va dentro de un<tr>.<td>(Table Data): Define una celda de datos normal. Va dentro de un<tr>.
<table>
<thead>
<tr>
<th>Usuario</th>
<th>Rol</th>
<th>Estado</th>
</tr>
</thead>
<tbody>
<tr>
<td>admin_luis</td>
<td>Administrador</td>
<td>Activo</td>
</tr>
<tr>
<td>invitado_01</td>
<td>Lector</td>
<td>Baneado</td>
</tr>
</tbody>
</table>
Un poco de historia oscura de la Web: A finales de los años 90 y principios de los 2000, antes de que existiera CSS Flexbox o Grid, los desarrolladores usaban las tablas para maquetar la estructura entera de la página web.
Esta práctica hoy en día es una aberración absoluta. Las tablas deben usarse única y exclusivamente para mostrar datos tabulares (facturas, horarios, especificaciones técnicas). Nunca para diseñar el layout de la web.
