Attributet colspan

Attributet colspan styr sammanslagning av kolumner i HTML-tabeller. Tillämpas på taggarna th och td.

Accepterat värde: heltal början från 1.

Hur man använder: lägg till detta attribut till val cell td eller th. Om, till exempel, sätt colspan till värdet 2 - då kommer cellen som detta satts på att uppta två kolumner i tabellen. Samtidigt kommer intilliggande celler till höger inte att försvinna, vår utökade cell kommer att tränga undan dem och tabellen kommer att kollapsa. För att förhindra detta måste man ta bort en av cellerna till höger. Se exemplen för bättre förståelse.

Exempel . Tabell utan sammanslagningar

Låt oss titta på en tabell utan sammanslagningar, som vi kommer att arbeta med senare:

<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;
}

Exempel . Utöka cellen till två kolumner

Låt oss försöka utöka cell 1 till två kolumner genom att sätta dess attribut colspan till värdet 2. Därmed kommer den att tränga undan cellerna till höger och tabellen kommer att kollapsa:

<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;
}

Exempel . Utöka cellen utan att tabellen kollapsar

Och låt oss nu försöka åtgärda problemet med kollaps av tabellen från föregående exempel, låt oss ta bort en av cellerna till höger om vår (det är cell 2 eller 3 - spelar ingen roll):

<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;
}

Exempel . Utöka cellen till tre kolumner

Låt oss utöka cell 1 till 3 kolumner och sätta dess attribut colspan till värdet 3. Därmed tar vi bort ytterligare en cell till höger, så att tabellen inte kollapsar:

<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;
}

Exempel . Samtidigt colspan och rowspan

Låt oss försöka slå ihop celler med nummer 4, 5, 7 och 8, genom att använda attributen colspan och rowspan (tidigare sammanslagningar tar vi bort från tabellen):

<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;
}

Se även

attributet rowspan,
som slår ihop rader i tabellen