Listas y tablas

Aprende a estructurar información con listas ordenadas, desordenadas y de definición, y a crear tablas accesibles para datos tabulares.

Las listas y las tablas son dos formas de organizar información estructurada. Cada una tiene su contexto: las listas para enumeraciones, las tablas para datos con filas y columnas relacionadas entre sí.

Listas

Lista desordenada: `<ul>`

Para elementos sin un orden específico — los puntos con viñeta del HTML:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Lista ordenada: `<ol>`

Para pasos, rankings o cualquier cosa donde el orden importa:

<ol>
  <li>Escribe el HTML</li>
  <li>Añade los estilos CSS</li>
  <li>Añade la lógica JavaScript</li>
</ol>

<ol> admite atributos extra:

<!-- Empieza desde el 3 -->
<ol start="3">
  <li>Tercer paso</li>
  <li>Cuarto paso</li>
</ol>

<!-- Orden inverso -->
<ol reversed>
  <li>Lo más importante</li>
  <li>Lo segundo</li>
</ol>

Lista de definición: `<dl>`

Para glosarios, metadatos o pares clave-valor:

<dl>
  <dt>HTML</dt>
  <dd>Lenguaje de marcado para estructurar páginas web.</dd>

  <dt>CSS</dt>
  <dd>Lenguaje de estilos para diseñar páginas web.</dd>
</dl>

Listas anidadas

Puedes meter una lista dentro de un <li> para crear submenús o jerarquías:

<ul>
  <li>
    Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>
    Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

Tablas

Las tablas son para datos tabulares — información que tiene sentido en filas y columnas con relación entre sí. No son para maquetar páginas (eso es trabajo de CSS).

Tabla básica

<table>
  <thead>
    <tr>
      <th>Lenguaje</th>
      <th>Tipo</th>
      <th>Año</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Marcado</td>
      <td>1993</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>Estilos</td>
      <td>1996</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>Programación</td>
      <td>1995</td>
    </tr>
  </tbody>
</table>

<thead> → cabecera de la tabla
<tbody> → cuerpo de datos
<tr> → fila (table row)
<th> → celda de cabecera (table header) — negrita y centrada por defecto
<td> → celda de datos (table data)

Pie de tabla: `<tfoot>`

<table>
  <thead>
    <tr><th>Producto</th><th>Precio</th></tr>
  </thead>
  <tbody>
    <tr><td>HTML Book</td><td>15€</td></tr>
    <tr><td>CSS Book</td><td>18€</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>33€</td></tr>
  </tfoot>
</table>

Celdas que abarcan varias columnas o filas

<table>
  <tr>
    <!-- Esta celda ocupa 2 columnas -->
    <th colspan="2">Información personal</th>
  </tr>
  <tr>
    <td>Nombre</td>
    <td>Ana García</td>
  </tr>
  <tr>
    <!-- Esta celda ocupa 2 filas -->
    <td rowspan="2">Contacto</td>
    <td>email@ejemplo.com</td>
  </tr>
  <tr>
    <td>+34 600 000 000</td>
  </tr>
</table>

Accesibilidad en tablas

<!-- caption: título visible de la tabla, importante para lectores de pantalla -->
<table>
  <caption>Comparativa de lenguajes web</caption>
  <thead>
    <tr>
      <!-- scope indica si el th es cabecera de columna o de fila -->
      <th scope="col">Lenguaje</th>
      <th scope="col">Uso principal</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">HTML</th>
      <td>Estructura</td>
    </tr>
  </tbody>
</table>

En la siguiente lección aprendemos a crear formularios: la forma en que los usuarios envían datos a una web.