Listas y tablas
Las listas y las tablas son de esas etiquetas que usas constantemente. Menús de navegación, listados de características, tablas de precios, rankings, especificaciones técnicas... Saber cuándo usar cada una y cómo estructurarlas bien es clave.
Listas desordenadas: <ul>
Se usan cuando el orden de los elementos no importa. El navegador muestra cada elemento con un bullet point:
<h2>Ingredientes para ramen casero</h2>
<ul>
<li>Fideos de ramen frescos (200g)</li>
<li>Caldo dashi (800ml)</li>
<li>Salsa de soja (3 cucharadas)</li>
<li>Huevo marinado en soja</li>
<li>Cebolleta picada</li>
<li>Nori (alga seca)</li>
<li>Chashu (cerdo braseado)</li>
</ul><ul> (unordered list) contiene los elementos <li> (list item). Los <li> solo pueden ir directamente dentro de <ul> o <ol>.
Listas ordenadas: <ol>
Se usan cuando el orden sí importa: pasos, rankings, instrucciones. El navegador numera los elementos automáticamente:
<h2>Top 5 lenguajes en GitHub (2026)</h2>
<ol>
<li>Python</li>
<li>JavaScript</li>
<li>TypeScript</li>
<li>Java</li>
<li>C#</li>
</ol>Atributos útiles de <ol>
<!-- Empezar desde un número específico -->
<ol start="5">
<li>Rust</li>
<li>Go</li>
<li>PHP</li>
</ol>
<!-- Orden inverso -->
<ol reversed>
<li>Bronce: equipo C</li>
<li>Plata: equipo B</li>
<li>Oro: equipo A</li>
</ol>
<!-- Usar letras o números romanos (con CSS) -->
<!-- El estilo de numeración se controla con CSS: list-style-type -->Listas anidadas
Puedes meter una lista dentro de otra. Esto es habitual en menús de navegación con submenús o en índices de contenido:
<h2>Roadmap del curso</h2>
<ol>
<li>HTML
<ul>
<li>Estructura básica</li>
<li>Etiquetas de texto</li>
<li>Formularios</li>
</ul>
</li>
<li>CSS
<ul>
<li>Selectores</li>
<li>Flexbox y Grid</li>
<li>Responsive design</li>
</ul>
</li>
<li>JavaScript
<ul>
<li>Variables y funciones</li>
<li>DOM y eventos</li>
<li>Fetch y APIs</li>
</ul>
</li>
</ol>La lista anidada va dentro del <li> que la contiene, no fuera. Este es un error común.
Listas de descripción: <dl>
Son menos conocidas, pero perfectas para pares término-definición: glosarios, especificaciones técnicas, FAQs:
<h2>Especificaciones del MacBook Pro M4</h2>
<dl>
<dt>Procesador</dt>
<dd>Apple M4 Pro, 14 núcleos (10 rendimiento + 4 eficiencia)</dd>
<dt>Memoria RAM</dt>
<dd>24 GB de memoria unificada</dd>
<dt>Almacenamiento</dt>
<dd>1 TB SSD</dd>
<dt>Pantalla</dt>
<dd>16,2 pulgadas Liquid Retina XDR, 3456 × 2234 píxeles</dd>
<dt>Batería</dt>
<dd>Hasta 24 horas de reproducción de vídeo</dd>
</dl><dl>: description list, el contenedor.<dt>: description term, el término.<dd>: description details, la definición.
Tablas: datos tabulares
Las tablas son para datos que se organizan en filas y columnas. Precios, horarios, comparativas, estadísticas. No uses tablas para maquetar layouts — eso murió con HTML 4.
<table>
<caption>Planes de suscripción — actualizado marzo 2026</caption>
<thead>
<tr>
<th>Plan</th>
<th>Precio/mes</th>
<th>Proyectos</th>
<th>Almacenamiento</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hobby</td>
<td>Gratis</td>
<td>3</td>
<td>500 MB</td>
</tr>
<tr>
<td>Pro</td>
<td>12 €</td>
<td>Ilimitados</td>
<td>50 GB</td>
</tr>
<tr>
<td>Enterprise</td>
<td>49 €</td>
<td>Ilimitados</td>
<td>500 GB</td>
</tr>
</tbody>
</table>Anatomía de una tabla
| Etiqueta | Función |
|---|---|
<table> |
Contenedor de toda la tabla |
<caption> |
Título/descripción de la tabla (accesibilidad + SEO) |
<thead> |
Cabecera de la tabla (columnas) |
<tbody> |
Cuerpo de la tabla (datos) |
<tfoot> |
Pie de tabla (totales, resúmenes) |
<tr> |
Table row — una fila |
<th> |
Table header — celda de cabecera (negrita y centrada) |
<td> |
Table data — celda de datos |
Siempre usa
<thead>y<tbody>. Son opcionales técnicamente, pero hacen la tabla accesible y permiten que los lectores de pantalla distingan encabezados de datos.
Tabla con pie y celdas combinadas
<table>
<caption>Ventas trimestrales por región</caption>
<thead>
<tr>
<th>Región</th>
<th>Q1</th>
<th>Q2</th>
<th>Q3</th>
<th>Q4</th>
</tr>
</thead>
<tbody>
<tr>
<th>Europa</th>
<td>45.200 €</td>
<td>52.800 €</td>
<td>48.100 €</td>
<td>61.300 €</td>
</tr>
<tr>
<th>América</th>
<td>38.900 €</td>
<td>41.200 €</td>
<td>44.500 €</td>
<td>55.800 €</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td>84.100 €</td>
<td>94.000 €</td>
<td>92.600 €</td>
<td>117.100 €</td>
</tr>
</tfoot>
</table>Para combinar celdas, usa colspan (combinar columnas) y rowspan (combinar filas):
<tr>
<td colspan="4">Sin datos disponibles para este periodo</td>
</tr>Cuándo usar lista vs tabla
| Usa lista | Usa tabla |
|---|---|
| Menús de navegación | Comparativas de productos |
| Ingredientes de una receta | Precios con características |
| Pasos de un tutorial | Horarios |
| Tags o categorías | Estadísticas con varias dimensiones |
La regla es simple: si los datos tienen una sola dimensión (una lista de cosas), usa lista. Si tienen dos o más dimensiones (filas y columnas), usa tabla.
Crea la página de precios de una SaaS
Crea un archivo precios.html con la página de precios de una app SaaS inventada (un gestor de tareas, un editor de fotos online, una herramienta de email marketing...). Debe incluir:
- Una tabla comparativa con al menos 3 planes (Free, Pro, Enterprise)
- Al menos 5 características comparadas entre planes
<caption>,<thead>y<tbody>- Una lista
<ul>con las características destacadas del plan más popular - Una lista
<dl>con preguntas frecuentes (FAQ) sobre la suscripción
lightbulb Pistas
Usa <th> tanto en la fila de cabecera como en la primera columna de cada fila (el nombre de la característica). Eso mejora la accesibilidad. Para las FAQ, cada <dt> es la pregunta y cada <dd> es la respuesta.
