Listas y tablas
Casi cualquier información se puede organizar como una lista o como una tabla. En este módulo verás cómo estructurar ambas correctamente — y por qué las tablas nunca deben usarse para maquetar el diseño de una página.
Listas desordenadas: <ul>
Úsala cuando el orden de los elementos no importa: una lista de ingredientes, de características, de enlaces de navegación...
Contenedor de la lista ("unordered list"). Cada elemento dentro se marca con una viñeta por defecto.
Cada elemento individual de la lista ("list item"). Siempre va dentro de un <ul> o un <ol>.
Listas ordenadas: <ol>
Úsala cuando el orden sí importa: pasos de una receta, un ranking, instrucciones que hay que seguir en secuencia.
Igual que <ul>, pero numera automáticamente cada <li> ("ordered list").
Regla mental rápida: si al reordenar los elementos el significado cambiaría o
dejaría de tener sentido, usa <ol>. Si da igual
el orden, usa <ul>.
Listas anidadas
Puedes meter una lista dentro de un <li> de otra lista, para crear subniveles:
Tablas: para datos, no para maquetar
Hace muchos años, antes de que existiera CSS con garantías, la gente usaba tablas para colocar el contenido de una página en columnas. Hoy eso es un error grave: las tablas deben reservarse exclusivamente para datos tabulares (algo que naturalmente tiene filas y columnas, como un horario, un listado de precios o resultados de una consulta SQL).
Contenedor de toda la tabla.
Una fila ("table row").
Una celda de encabezado ("table header"). El navegador la muestra en negrita y centrada por defecto.
Una celda de datos normal ("table data").
Organizando la tabla en secciones
Para tablas más largas, conviene separar el encabezado, el cuerpo y (si hace falta) el pie en tres bloques distintos:
Agrupa la(s) fila(s) de encabezado.
Agrupa las filas con los datos propiamente dichos.
Agrupa una fila final, útil para totales o resúmenes.
Fíjate en colspan="2": hace que esa celda de encabezado
ocupe el espacio de dos columnas. Su pareja, rowspan,
hace lo mismo pero en vertical, fusionando varias filas.
Usar <table> para organizar el diseño general de
una página (menú a la izquierda, contenido a la derecha, etc.). Eso es trabajo de
CSS (Flexbox o Grid, que veremos en el curso de CSS). Reserva las tablas para datos
que realmente tengan estructura de filas y columnas.
Ponlo a prueba
Comprueba lo que has aprendido
1. ¿Cuándo deberías usar <ol> en vez de <ul>?
2. ¿Para qué deberían usarse las tablas HTML hoy en día?
3. ¿Qué hace el atributo colspan="2" en una <th>?