Atributo HTML colspan
El atributo HTML colspan especifica cuántas columnas debe abarcar una celda. Descubre en qué elementos se puede utilizar el atributo colspan.
El atributo HTML colspan hace que una sola celda de tabla se extienda a lo largo de dos o más columnas. Es el equivalente en marcado de "combinar celdas" en una hoja de cálculo: en lugar de tener una celda por columna en una fila, se le asigna un colspan a una celda para que ocupe el espacio horizontal de varias. Así es como se construyen filas de resumen, encabezados agrupados y cualquier diseño donde un mismo contenido pertenece a más de una columna.
Esta página cubre los valores que acepta colspan, qué elementos lo admiten, cómo combinarlo con rowspan para abarcar columnas y filas al mismo tiempo, consideraciones de accesibilidad para celdas de encabezado y el CSS moderno que reemplaza el antiguo estilo border="1".
Elementos que admiten colspan
Solo puedes usar colspan en los dos elementos de celda de tabla:
<td>— una celda de datos estándar.colspanestablece cuántos espacios de columna ocupa la celda de datos.<th>— una celda de encabezado.colspanestablece cuántas columnas etiqueta el encabezado.
No es válido en <table>, <tr>, <col> ni en ningún otro elemento. Para controlar columnas enteras desde un único lugar, usa <col>/<colgroup> en su lugar — pero el comportamiento de expansión de celdas siempre reside en <td> o <th>.
Reglas del valor
El valor de colspan es un entero positivo (1, 2, 3, …):
colspan="1"es el valor predeterminado — una celda normal que abarca una sola columna. Rara vez es necesario escribirlo de forma explícita.- Cualquier valor mayor que
1hace que la celda abarque ese número de columnas. La celda consume espacios de columna de las demás en la misma fila, por lo que cadacolspanreduce la cantidad de celdas hermanas que esa fila debería contener. - El estándar HTML limita el valor a 1000; los números mayores se recortan automáticamente.
colspan="0"era una idea del antiguo HTML4 que significaba "abarcar todas las columnas restantes". No forma parte del estándar HTML vigente y no tiene soporte fiable en todos los navegadores, así que no lo uses — en su lugar, indica un entero positivo explícito.
Si estableces un colspan mayor que el número de columnas disponibles en la fila, el navegador simplemente se extiende hasta el borde de la tabla; no crea columnas adicionales.
Sintaxis
<td colspan="value"> ... </td>
<th colspan="value"> ... </th>Ejemplo del atributo HTML colspan en el elemento <td>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<table border="1">
<tr>
<th>Month</th>
<th>Salary</th>
</tr>
<tr>
<td>March</td>
<td>$100</td>
</tr>
<tr>
<td>April</td>
<td>$150</td>
</tr>
<tr>
<td colspan="2">Total: $250</td>
</tr>
</table>
</body>
</html>La última fila tiene un solo <td>, no dos, porque colspan="2" hace que esa celda única rellene tanto la columna "Month" como la columna "Salary". Si omitieras el colspan, a esa fila le faltaría una celda y el diseño de la tabla se rompería.
Ejemplo del atributo HTML colspan en el elemento <th>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="2">Month and Date</th>
</tr>
<tr>
<td>January</td>
<td>15</td>
</tr>
<tr>
<td>February</td>
<td>23</td>
</tr>
</table>
</body>
</html>Combinar colspan con rowspan
colspan abarca columnas (horizontalmente); su contraparte rowspan abarca filas (verticalmente). Casi siempre se enseñan juntos porque las tablas reales necesitan ambos — por ejemplo, un encabezado que etiqueta varias columnas por encima de subencabezados, o una celda de etiqueta que cubre varias filas a lo largo del lateral.
Puedes poner ambos atributos en la misma celda para hacer que abarque un bloque rectangular de columnas y filas a la vez. Al igual que con colspan solo, cada celda que otra celda "cubre" debe eliminarse del marcado de la fila en la que habría aparecido — de lo contrario, esa fila termina con demasiadas celdas.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<table>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Contact</th>
</tr>
<tr>
<th>Phone</th>
<th>Email</th>
</tr>
<tr>
<td>Anna</td>
<td>555-0101</td>
<td>[email protected]</td>
</tr>
</table>
</body>
</html>Aquí rowspan="2" hace que el encabezado "Name" se extienda hacia la segunda fila de encabezados, mientras que colspan="2" permite que el encabezado "Contact" quede sobre "Phone" y "Email". Puedes leer más sobre cómo construir estas estructuras en la página de Tablas HTML.
Estilo de bordes de tabla con CSS
El atributo border="1" utilizado en los ejemplos anteriores es la forma antigua de dibujar bordes en las celdas. Está obsoleto en el HTML moderno — usa CSS en su lugar. La propiedad clave es border-collapse: collapse, que fusiona los bordes dobles de las celdas en líneas compartidas únicas:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #666;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">Month and Date</th>
</tr>
<tr>
<td>January</td>
<td>15</td>
</tr>
</table>
</body>
</html>Esto te brinda control total sobre el color, el grosor y el espaciado del borde, algo que el atributo border no puede hacer.
Accesibilidad para celdas de encabezado que abarcan columnas
Cuando un <th> abarca varias columnas, los lectores de pantalla necesitan ayuda para entender qué celdas de datos describe. Añade una de las siguientes opciones:
- El atributo
scopeen el encabezado —scope="colgroup"para un encabezado que abarca varias columnas, oscope="col"para una sola columna. Esta es la opción más sencilla para tablas sencillas. - Para tablas complejas, asigna un
ida cada encabezado y haz referencia a esos ids desde las celdas de datos correspondientes con el atributoheaders(headers="h1 h2").
Por ejemplo, un encabezado de grupo de columnas debe marcarse como <th colspan="2" scope="colgroup">Contact</th> para que la tecnología de asistencia lo asocie con ambas columnas que abarca.