Attribuut colspan

Die attribuut colspan beheer die samesmelting van kolomme in 'n HTML tabel. Word toegepas op die tags th en td.

Aanvaarde waarde: 'n heelgetal beginnende met 1.

Hoe om dit te gebruik: voeg hierdie attribuut by aan enige sel td of th. As, byvoorbeeld, colspan op 'n waarde van 2 gestel word - dan sal die sel waaraan dit gestel is, twee kolomme van die tabel beslaan. In hierdie geval sal die aangrensende selle regs nie verdwyn nie, ons vergrote sel sal hulle verdring en die tabel sal uitmekaar val. Om dit te voorkom, moet een van die selle regs verwyder word. Kyk na die voorbeelde vir beter begrip.

Voorbeeld . Tabel sonder samesmeltings

Laat ons kyk na 'n tabel sonder samesmeltings, waarmee ons verder sal werk:

<table>
	<tr>
		<td>sel1</td>
		<td>sel2</td>
		<td>sel3</td>
	</tr>
	<tr>
		<td>sel4</td>
		<td>sel5</td>
		<td>sel6</td>
	</tr>
	<tr>
		<td>sel7</td>
		<td>sel8</td>
		<td>sel9</td>
	</tr>
</table>

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

Voorbeeld . Vergroot 'n sel oor twee kolomme

Kom ons probeer om sel 1 oor twee kolomme te vergroot, deur die attribuut colspan op 'n waarde van 2 te stel. In hierdie geval sal dit die selle regs verdring en die tabel sal uitmekaar val:

<table>
	<tr>
		<td colspan="2">sel1</td>
		<td>sel2</td>
		<td>sel3</td>
	</tr>
	<tr>
		<td>sel4</td>
		<td>sel5</td>
		<td>sel6</td>
	</tr>
	<tr>
		<td>sel7</td>
		<td>sel8</td>
		<td>sel9</td>
	</tr>
</table>

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

Voorbeeld . Vergroot 'n sel sonder dat die tabel uitmekaar val

Laat ons nou probeer om die probleem met die tabel wat uitmekaar val uit die vorige voorbeeld reg te stel, deur een van die selle regs van ons selle te verwyder (dit is sel 2 of 3 - maak nie saak nie):

<table>
	<tr>
		<td colspan="2">sel1</td>
		<td>sel2</td>
	</tr>
	<tr>
		<td>sel4</td>
		<td>sel5</td>
		<td>sel6</td>
	</tr>
	<tr>
		<td>sel7</td>
		<td>sel8</td>
		<td>sel9</td>
	</tr>
</table>

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

Voorbeeld . Vergroot 'n sel oor drie kolomme

Kom ons vergroot sel 1 oor 3 kolomme en stel die attribuut colspan op 'n waarde van 3. In hierdie geval verwyder ons nog 'n sel regs, sodat die tabel nie uitmekaar val nie:

<table>
	<tr>
		<td colspan="3">sel1</td>
	</tr>
	<tr>
		<td>sel4</td>
		<td>sel5</td>
		<td>sel6</td>
	</tr>
	<tr>
		<td>sel7</td>
		<td>sel8</td>
		<td>sel9</td>
	</tr>
</table>

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

Voorbeeld . Gelyktydig colspan en rowspan

Kom ons probeer om selle nommer 4, 5, 7 en 8 saam te voeg, deur die attribuut colspan en rowspan te gebruik (vorige samesmeltings word uit die tabel verwyder):

<table>
	<tr>
		<td colspan="3">sel1</td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">sel4</td>
		<td>sel6</td>
	</tr>
	<tr>
		<td>sel9</td>
	</tr>
</table>

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

Sien ook

die attribuut rowspan,
wat rye van die tabel saamvoeg