Listas y tablas

Las listas organizan información en secuencia y las tablas presentan datos en filas y columnas. En esta lección aprenderás los tres tipos de listas y a construir tablas completas, accesibles y fáciles de leer.

Concepto

• Una lista es como la lista del súper o los pasos de una receta.
• Una tabla es como una hoja de Excel: cada celda cruza una fila con una columna.

Ambas tienen un uso muy específico. Un error clásico de principiantes (y de sitios de los años 2000) es usar tablas para maquetar la página. Hoy eso se hace con CSS (Flexbox y Grid); las tablas son solo para datos tabulares.

Listas desordenadas: ul

Para elementos donde el orden no importa:

<ul>
  <li>Wifi gratis</li>
  <li>Enchufes en cada mesa</li>
  <li>Acceso para sillas de ruedas</li>
</ul>

<ul> (unordered list) es el contenedor y cada <li> (list item) es un elemento. Solo puede haber <li> como hijos directos de <ul> u <ol>.

Los menús son listas

Los menús de navegación se escriben tradicionalmente como <ul> dentro de <nav>. Los lectores de pantalla anuncian "lista, 4 elementos", lo que ayuda a orientarse. Con CSS les quitas las viñetas y los pones en horizontal.

<nav>
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/menu">Menú</a></li>
    <li><a href="/contacto">Contacto</a></li>
  </ul>
</nav>

Listas ordenadas: ol

Para elementos donde el orden sí importa: pasos, rankings, instrucciones.

<ol>
  <li>Calienta el agua a 92 °C.</li>
  <li>Muele 18 g de café.</li>
  <li>Vierte el agua lentamente durante 3 minutos.</li>
</ol>

<!-- Atributos útiles -->
<ol start="5">          <!-- empieza en 5 -->
  <li>Quinto paso</li>
</ol>

<ol reversed>           <!-- cuenta regresiva: 3, 2, 1 -->
  <li>Bronce</li>
  <li>Plata</li>
  <li>Oro</li>
</ol>

<ol type="A">           <!-- A, B, C (también: a, I, i, 1) -->
  <li>Opción A</li>
  <li>Opción B</li>
</ol>

Listas anidadas

Una sublista va dentro de un <li>, nunca directamente dentro de <ul>:

<ul>
  <li>Bebidas calientes
    <ul>
      <li>Espresso</li>
      <li>Latte</li>
    </ul>
  </li>
  <li>Bebidas frías</li>
</ul>

Listas de descripción: dl

Para pares término–descripción: glosarios, fichas técnicas, preguntas frecuentes sencillas, horarios.

<dl>
  <dt>Espresso</dt>
  <dd>Café concentrado preparado a presión.</dd>

  <dt>Latte</dt>
  <dd>Espresso con leche texturizada y poca espuma.</dd>

  <dt>Horario</dt>
  <dd>Lunes a viernes: 7:00 – 21:00</dd>
  <dd>Sábado y domingo: 8:00 – 22:00</dd>
</dl>

• <dl>: lista de descripción.
• <dt>: término.
• <dd>: descripción (puede haber varias por término).

Tablas

Estructura básica

<table>
  <tr>
    <th>Producto</th>
    <th>Precio</th>
  </tr>
  <tr>
    <td>Latte</td>
    <td>$55</td>
  </tr>
</table>

• <table>: la tabla.
• <tr> (table row): una fila.
• <th> (table header): celda de encabezado.
• <td> (table data): celda de dato.

Tabla completa y accesible

<table>
  <!-- caption: título de la tabla (lo anuncian los lectores de pantalla) -->
  <caption>Pedidos de la semana – Cafetería Aroma</caption>

  <!-- thead: encabezados de columna -->
  <thead>
    <tr>
      <th scope="col">Producto</th>
      <th scope="col">Categoría</th>
      <th scope="col">Unidades</th>
      <th scope="col">Total</th>
    </tr>
  </thead>

  <!-- tbody: los datos -->
  <tbody>
    <tr>
      <!-- th con scope="row": encabezado de fila -->
      <th scope="row">Latte</th>
      <!-- rowspan: esta celda ocupa 2 filas -->
      <td rowspan="2">Bebidas calientes</td>
      <td>120</td>
      <td>$5,400</td>
    </tr>
    <tr>
      <th scope="row">Capuchino</th>
      <!-- aquí no va la celda de categoría: la ocupa el rowspan de arriba -->
      <td>95</td>
      <td>$4,275</td>
    </tr>
    <tr>
      <th scope="row">Frappé</th>
      <td>Bebidas frías</td>
      <td>60</td>
      <td>$3,300</td>
    </tr>
  </tbody>

  <!-- tfoot: totales o resumen -->
  <tfoot>
    <tr>
      <!-- colspan: esta celda ocupa 2 columnas -->
      <th scope="row" colspan="2">Total semanal</th>
      <td>275</td>
      <td>$12,975</td>
    </tr>
  </tfoot>
</table>

Tabla con thead, tbody, tfoot, colspan y rowspan

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Qué aporta cada parte

Elemento o atributo	Para qué sirve
<caption>	Título de la tabla; debe ser el primer hijo de <table>.
<thead>, <tbody>, <tfoot>	Agrupan filas; facilitan el estilo y, al imprimir, el encabezado se repite en cada hoja.
scope="col"	Indica que el <th> es encabezado de su columna.
scope="row"	Indica que el <th> es encabezado de su fila.
colspan="n"	La celda se extiende n columnas.
rowspan="n"	La celda se extiende n filas.

Gracias a scope, un lector de pantalla puede decir "Capuchino, Unidades: 95" en lugar de solo "95". Para alguien que no ve la tabla, eso es la diferencia entre entenderla o no.

Error común

Al usar colspan o rowspan, olvidar quitar las celdas que ahora ocupa la celda expandida. Cada fila debe "sumar" el mismo número de columnas. Si una fila tiene una celda de más, la tabla se desalinea.

Tablas responsivas

Las tablas no se encogen bien en celulares. La solución más simple y robusta es envolverlas en un contenedor con scroll horizontal:

<div class="tabla-scroll">
  <table>...</table>
</div>

.tabla-scroll {
  overflow-x: auto; /* scroll horizontal solo si no cabe */
}

Cuándo NO usar tablas

• Para acomodar columnas de una página (usa CSS Grid o Flexbox; lo verás en el curso de CSS).
• Para una galería de tarjetas o productos.
• Para un formulario.

Sí usa tablas para: precios comparativos, horarios de clases, calendarios de eventos, especificaciones técnicas, reportes, resultados.

Casos de uso reales

• Gimnasio: horario semanal de clases en tabla (días en columnas, horas en filas).
• Agencia: tabla comparativa de planes "Básico / Pro / Empresarial".
• Receta: ingredientes en <ul> y preparación en <ol>.
• Ficha de producto: especificaciones en <dl> (Material, Capacidad, Peso).

Ejercicios

1. Escribe una receta de café de olla con lista de ingredientes (desordenada) y pasos (ordenada).
2. Crea una ficha técnica de una cafetera con <dl>: marca, capacidad, potencia y garantía.
3. Crea una tabla de horarios de un gimnasio con caption, thead y tbody, con columnas Lunes, Miércoles y Viernes, y filas para las 7:00 y las 19:00. La clase de las 19:00 es "Zumba" los tres días (usa colspan).

Ver solución

<!-- Ejercicio 1 -->
<h2>Café de olla</h2>
<h3>Ingredientes</h3>
<ul>
  <li>1 litro de agua</li>
  <li>4 cucharadas de café molido</li>
  <li>1 cono de piloncillo</li>
  <li>1 raja de canela</li>
</ul>
<h3>Preparación</h3>
<ol>
  <li>Hierve el agua con la canela y el piloncillo.</li>
  <li>Cuando el piloncillo se disuelva, apaga el fuego.</li>
  <li>Agrega el café, tapa y deja reposar 5 minutos.</li>
  <li>Cuela y sirve en jarritos de barro.</li>
</ol>

<!-- Ejercicio 2 -->
<dl>
  <dt>Marca</dt><dd>Barista Pro</dd>
  <dt>Capacidad</dt><dd>1.5 litros</dd>
  <dt>Potencia</dt><dd>1200 W</dd>
  <dt>Garantía</dt><dd>2 años</dd>
</dl>

<!-- Ejercicio 3 -->
<table>
  <caption>Horario de clases</caption>
  <thead>
    <tr>
      <th scope="col">Hora</th>
      <th scope="col">Lunes</th>
      <th scope="col">Miércoles</th>
      <th scope="col">Viernes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">7:00</th>
      <td>Yoga</td>
      <td>Spinning</td>
      <td>Yoga</td>
    </tr>
    <tr>
      <th scope="row">19:00</th>
      <td colspan="3">Zumba</td>
    </tr>
  </tbody>
</table>

Resumen

• <ul> cuando el orden no importa; <ol> cuando sí; <dl> para pares término–descripción.
• Solo <li> puede ser hijo directo de <ul> u <ol>; las sublistas van dentro de un <li>.
• Las tablas son para datos, nunca para maquetar.
• Usa <caption>, <thead>, <tbody>, <tfoot> y scope para tablas accesibles.
• colspan y rowspan combinan celdas; revisa que cada fila sume las mismas columnas.
• Envuelve las tablas en un contenedor con overflow-x: auto para móviles.