Atributas colspan

Atributas colspan valdo HTML lentelės stulpelių sujungimą. Taikomas žymėms th ir td.

Priimama reikšmė: sveikasis skaičius pradedant nuo 1.

Kaip naudotis: pridedame šį atributą prie bet kurios langelio td ar th. Jei, pavyzdžiui, nustatysite colspan reikšmę 2 - tai langelis, kuriam tai buvo nustatyta, užims du lentelės stulpelius. Tuo pačiu metu gretimi langeliai dešinėje niekur nedings, mūsų išsiplėtęs langelis juos išstums ir lentelė suskils. Kad tai neįvyktų, reikia pašalinti vieną iš dešinėje esančių langelių. Žiūrėkite pavyzdžius geresniam supratimui.

Pavyzdys . Lentelė be sujungimų

Pažiūrėkime į lentelę be sujungimų, su kuria dirbsime toliau:

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

Pavyzdys . Išplėskime langelį į du stulpelius

Pabandykime išplėsti langelį 1 į du stulpelius, nustatydami jam atributą colspan reikšme 2. Tuo pačiu jis išstums dešinėje esančius langelius ir lentelė suskils:

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

Pavyzdys . Išplėskime langelį be lentelės suskylimo

Dabar pabandykime išspręsti lentelės suskylimo problemą iš ankstesnio pavyzdžio, pašalinkime vieną iš dešinėje esančių langelių nuo mūsų (tai langelis 2 arba 3 - nesvarbu):

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

Pavyzdys . Išplėskime langelį į tris stulpelius

Išplėskime langelį 1 į 3 stulpelius ir nustatykime jam atributą colspan reikšme 3. Tuo pačiu pašalinkime dar vieną langelį dešinėje, kad lentelė nesuskiltų:

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

Pavyzdys . Vienu metu colspan ir rowspan

Pabandykime sujungti langelius su numeriais 4, 5, 7 ir 8, panaudodami atributus colspan ir rowspan (ankstesnius sujungimus pašalinsime iš lentelės):

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

Taip pat žiūrėkite

atributą rowspan,
kuris sujungia lentelės eilutes