Atributo colspan

El atributo colspan controla la fusión de columnas en una tabla HTML. Se aplica a las etiquetas th y td.

Valor aceptado: número entero empezando desde 1.

Cómo usarlo: añadimos este atributo a cualquier celda td o th. Si, por ejemplo, establecemos colspan con el valor 2 - la celda a la que se lo aplicamos ocupará dos columnas de la tabla. Al hacerlo, las celdas adyacentes a la derecha no desaparecerán, nuestra celda expandida las desplazará y la tabla se desorganizará. Para evitar esto, es necesario eliminar una de las celdas de la derecha. Consulta los ejemplos para una mejor comprensión.

Ejemplo . Tabla sin fusiones

Echemos un vistazo a una tabla sin fusiones, con la que trabajaremos más adelante:

<table>
	<tr>
		<td>cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell5</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell8</td>
		<td>cell9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

Ejemplo . Expandamos la celda a dos columnas

Intentemos expandir la celda 1 a dos columnas, estableciendo su atributo colspan con el valor 2. Al hacerlo, desplazará las celdas de la derecha y la tabla se desorganizará:

<table>
	<tr>
		<td colspan="2">cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell5</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell8</td>
		<td>cell9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

Ejemplo . Expandamos la celda sin desorganizar la tabla

Ahora intentemos corregir el problema de desorganización de la tabla del ejemplo anterior, eliminando una de las celdas a la derecha de la nuestra (es la celda 2 o 3 - da igual):

<table>
	<tr>
		<td colspan="2">cell1</td>
		<td>cell2</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell5</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell8</td>
		<td>cell9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

Ejemplo . Expandamos la celda a tres columnas

Expandamos la celda 1 a 3 columnas y establezcamos su atributo colspan con el valor 3. Al hacerlo, eliminaremos otra celda a la derecha, para que la tabla no se desorganice:

<table>
	<tr>
		<td colspan="3">cell1</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell5</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell8</td>
		<td>cell9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

Ejemplo . Colspan y rowspan simultáneamente

Intentemos fusionar las celdas número 4, 5, 7 y 8, utilizando los atributos colspan y rowspan (eliminaremos las fusiones anteriores de la tabla):

<table>
	<tr>
		<td colspan="3">cell1</td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">cell4</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

Ver también

el atributo rowspan,
que fusiona filas de la tabla