colspan atribūts

Atribūts colspan kontrolē HTML tabulas kolonnu apvienošanu. Attiecas uz tagiem th un td.

Pieņemtā vērtība: vesels skaitlis sākot no 1.

Kā lietot: pievienojam šo atribūtu jebkurai td vai th šūnai. Ja, piemēram, iestatīt colspan uz vērtību 2 - tad šūna, kurai tas tika iestatīts, aizņems divas tabulas kolonnas. Tajā pašā laikā blakus esošās šūnas labajā pusē nekur nepazudīs, mūsu paplašinātā šūna tās izspiedīs prom un tabula sabruks. Lai tas nenotiktu, ir jāizdzēš viena no šūnām labajā pusē. Skatiet piemērus lai labāk saprastu.

Piemērs . Tabulā bez apvienošanas

Apskatīsim tabulu bez apvienošanas, ar kuru mēs strādāsim tālāk:

<table>
	<tr>
		<td>šūna1</td>
		<td>šūna2</td>
		<td>šūna3</td>
	</tr>
	<tr>
		<td>šūna4</td>
		<td>šūna5</td>
		<td>šūna6</td>
	</tr>
	<tr>
		<td>šūna7</td>
		<td>šūna8</td>
		<td>šūna9</td>
	</tr>
</table>

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

Piemērs . Paplašināsim šūnu uz divām kolonnām

Mēģināsim paplašināt šūnu 1 uz divām kolonnām, iestatot tai atribūtu colspan ar vērtību 2. Tajā pašā laikā tā izspiedīs prom šūnas labajā pusē un tabula sabruks:

<table>
	<tr>
		<td colspan="2">šūna1</td>
		<td>šūna2</td>
		<td>šūna3</td>
	</tr>
	<tr>
		<td>šūna4</td>
		<td>šūna5</td>
		<td>šūna6</td>
	</tr>
	<tr>
		<td>šūna7</td>
		<td>šūna8</td>
		<td>šūna9</td>
	</tr>
</table>

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

Piemērs . Paplašināsim šūnu bez tabulas sabrukšanas

Tagad mēģināsim izlabot problēmu ar tabulas sabrukšanu no iepriekšējā piemēra, izdzēsīsim vienu no šūnām labajā pusē no mūsējās (tā ir šūna 2 vai 3 - nav nozīmes):

<table>
	<tr>
		<td colspan="2">šūna1</td>
		<td>šūna2</td>
	</tr>
	<tr>
		<td>šūna4</td>
		<td>šūna5</td>
		<td>šūna6</td>
	</tr>
	<tr>
		<td>šūna7</td>
		<td>šūna8</td>
		<td>šūna9</td>
	</tr>
</table>

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

Piemērs . Paplašināsim šūnu uz trim kolonnām

Paplašināsim šūnu 1 uz 3 kolonnām un iestatīsim tai atribūtu colspan ar vērtību 3. Tajā pašā laikā izdzēsīsim vēl vienu šūnu labajā pusē, lai tabula nesabruktu:

<table>
	<tr>
		<td colspan="3">šūna1</td>
	</tr>
	<tr>
		<td>šūna4</td>
		<td>šūna5</td>
		<td>šūna6</td>
	</tr>
	<tr>
		<td>šūna7</td>
		<td>šūna8</td>
		<td>šūna9</td>
	</tr>
</table>

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

Piemērs . Vienlaicīgi colspan un rowspan

Mēģināsim apvienot šūnas ar numuriem 4, 5, 7 un 8, izmantojot atribūtus colspan un rowspan (iepriekšējos apvienojumus noņemsim no tabulas):

<table>
	<tr>
		<td colspan="3">šūna1</td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">šūna4</td>
		<td>šūna6</td>
	</tr>
	<tr>
		<td>šūna9</td>
	</tr>
</table>

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

Skatiet arī

atribūts rowspan,
kas apvieno tabulas rindas