colspan: una celda a lo ancho de varias columnas
colspan="n" hace que una celda sea tan ancha como n columnas. La fila en la que está tiene entonces n - 1 celdas menos. Aquí el total ocupa las dos primeras columnas:
La última fila tiene dos celdas, pero la primera cuenta como dos, así que la fila sigue sumando tres columnas como las demás.
rowspan: una celda hacia abajo en varias filas
rowspan="n" hace que una celda sea tan alta como n filas. Las filas de debajo omiten esa columna, porque la celda alta ya la llena:
Las filas de Bob y Cy solo tienen un <td>: la columna Team ya está ocupada por "Design". Nada lo indica en el HTML, así que lee una tabla con rowspan de arriba abajo y lleva la cuenta de qué columnas siguen cubiertas.
colspan y rowspan juntos: un horario
Una celda puede extenderse en las dos direcciones. Un horario es el caso clásico, con algunas clases que duran dos franjas y otras que ocupan dos días:
Cuenta la fila de las 10:00: el encabezado de la hora, luego Mon está cubierto por HTML desde la fila de arriba, y después Lab llena Tue y Wed. A las 11:00, Mon vuelve a estar libre y Lab sigue cubriendo Tue y Wed, así que la fila tiene una celda de datos.
Contar celdas para que la tabla quede cuadrada
Todas las filas deben sumar el mismo número de columnas, contando el colspan de cada celda y las columnas cubiertas por celdas con rowspan de más arriba. Cuando una fila tiene una celda de más, el navegador añade una columna nueva para ella y la tabla queda con un borde irregular:
En la tabla incorrecta, la segunda fila olvidó que A cubre su primera columna, así que D cae en una tercera columna que ninguna otra fila tiene. La solución es borrar una celda. El mismo error con colspan es conservar todas las celdas originales en la fila que tiene la celda ancha.
Que falte una celda es el problema contrario: la fila termina antes y deja un hueco al final.
Encabezados agrupados con colspan
Un encabezado puede extenderse sobre las columnas que nombra, encima de una fila de encabezados más concretos. Márcalo con scope="colgroup" para que los lectores de pantalla lo apliquen a todas las columnas de debajo:
"City" ocupa las dos filas de encabezado con rowspan="2", y cada mes ocupa sus dos columnas con colspan="2". Los elementos <colgroup> definen los grupos de columnas a los que se refiere scope="colgroup". Un lector de pantalla en la celda 31 de Rome puede decir entonces "Rome, July, High, 31". Para el resto de la estructura de la tabla, consulta tablas en HTML.
Combina celdas solo cuando la estructura lo pide
Las celdas combinadas hacen que una tabla sea más difícil de leer con un lector de pantalla y más difícil de ordenar, filtrar o copiar a una hoja de cálculo. Úsalas donde los datos de verdad están agrupados (un total, un encabezado sobre subcolumnas, una clase que dura dos horas). Si una tabla necesita muchas celdas combinadas, dos tablas más sencillas suelen ser más claras.
Errores comunes
- Dejar las celdas cubiertas. Una celda con
colspan="2"reemplaza a dos celdas; borra una de las originales. - Olvidar las filas debajo de un
rowspan. Cada una necesita una celda menos. - Escribir
colspanen<tr>. Solo funciona en<td>y<th>. - Combinar celdas para el diseño visual, como una fila de banner en una tabla de maquetación. Usa CSS grid para el diseño.
colspan="100%"para indicar "todo el ancho". El navegador solo lee los dígitos iniciales, así que esta celda ocupa 100 columnas y añade columnas vacías a la tabla. El valor es un número entero de columnas.
Preguntas frecuentes
¿Qué hace colspan en HTML?
colspan hace que un <td> o <th> se extienda a lo ancho de varias columnas: <td colspan="3"> ocupa el lugar de tres celdas de su fila. Esa fila necesita entonces dos celdas menos que las demás.
¿Qué hace rowspan en HTML?
rowspan hace que una celda se extienda hacia abajo a lo largo de varias filas: <td rowspan="2"> llena su propia fila y la de debajo. La fila siguiente debe omitir esa columna, porque la celda de arriba ya la cubre.
¿Una celda puede usar colspan y rowspan a la vez?
Sí. <td colspan="2" rowspan="2"> cubre un bloque de dos columnas por dos filas. Cada fila por la que pasa necesita dos celdas propias menos.
¿Por qué mi tabla tiene una celda de más que sobresale?
Una fila tiene más celdas que las demás una vez contadas las combinaciones. Normalmente, una fila debajo de un rowspan sigue incluyendo una celda para la columna cubierta, o una fila con un colspan conservó todas sus celdas originales. Quita el <td> que sobra.
¿Cuál es el valor máximo de colspan?
Los navegadores limitan colspan a 1000 y rowspan a 65534. En colspan, un valor de 0 o uno que no empieza por un dígito se trata como 1.
