Hoy · Hoja de ruta
- 1. Aprende: Cómo
colspanyrowspanocupan la cuadrícula, y cómo se comprueba que no la han roto. - 2. Haz: Construye el horario semanal de tu grupo con una fila combinada.
- 3. Comprueba: Todas las filas suman el mismo número de columnas.
Antes de empezar · 5 minutos, sin apuntes
- ¿Qué relación expresan
thead,tbodyycaption? - ¿Para qué sirve
scope="col"? - Detecta el error conceptual: usar una tabla para colocar una imagen junto a un texto.
Una tabla es una cuadrícula, aunque no lo parezca
colspan y rowspan no «juntan» celdas: hacen que una celda ocupe el sitio de varias. La cuadrícula sigue existiendo debajo, con el mismo número de columnas en todas las filas.
<tr>
<th scope="row">11:00</th>
<td colspan="5">Recreo</td>
</tr>Esa fila parece tener dos celdas, pero ocupa seis columnas. Si la tabla tiene seis, es correcta. Si tiene siete, acabas de dejar un hueco, y el navegador dibujará algo raro sin decirte nada.
La comprobación que evita el 90 % de los fallos
Recorre la tabla fila a fila y suma, en cada una, el colspan de sus celdas (una celda normal cuenta 1). Todas las filas tienen que dar el mismo total. Si una da distinto, ahí está el error, y lo has localizado sin abrir el navegador.
Con rowspan, recuerda que una celda que baja invade la fila siguiente: esa fila tendrá una celda escrita menos, porque una de sus posiciones ya está ocupada desde arriba.
Cuándo empieza a ser mala idea
Una celda combinada aislada se entiende bien. Una tabla con combinaciones en varias direcciones a la vez se vuelve difícil de recorrer para quien la escucha, porque deja de estar claro qué encabezado gobierna cada celda.
Si tu tabla necesita ese nivel de combinación, casi siempre lo correcto es partirla en dos tablas más simples, cada una con su caption. Profesionalmente, rowspan y colspan tienen bastante menos recorrido del que parece: conviene conocerlos y no abusar.
Tarea 10 · El horario de clase
Construye una tabla con el horario semanal de tu grupo: de lunes a viernes, seis periodos lectivos y un recreo intermedio.
<caption>que identifique de qué grupo es el horario.- Los días como
<th scope="col">. - La hora de cada franja como
<th scope="row">. - El recreo en una fila combinada que abarque los cinco días.
- Aplica la comprobación de sumas antes de darlo por bueno.
Estoy atascado · no me cuadran las columnas
Cuenta primero cuántas columnas tiene la tabla en total, incluida la de las horas. Si son cinco días más la columna de horas, son seis columnas. Entonces la fila del recreo puede ser un th con la hora más un td colspan="5", o bien una sola celda con colspan="6". Ese despiste de una columna es prácticamente el único fallo que da esta tarea.
Antes de cerrar · 2 minutos, sin mirar
- ¿Qué hace exactamente
colspan="3"? - ¿Cómo compruebas una tabla con celdas combinadas sin abrir el navegador?
- ¿Qué haces si una tabla necesita combinaciones en las dos direcciones?
Ver respuestas
1 · Que esa celda ocupe la posición de tres columnas de la cuadrícula.
2 · Sumando por filas: cada celda cuenta su colspan, y todas las filas deben dar el mismo total.
3 · Partirla en dos tablas más simples, cada una con su propio caption.