Atributas rowspan

Atributas rowspan valdo eilučių sujungimą HTML lentelėje. Taikomas žymėms th ir td.

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

Kaip naudoti: pridedame šį atributą prie bet kurios langelio td ar th. Jei, pavyzdžiui, nustatysite rowspan reikšmę 2 - tai langelis, kuriam tai nustatyta, užims dvi eilutes lentelės aukščio. Tuo tarpu langeliai iš žemiau esančios eilės niekur nedings, mūsų išsiplėtęs langelis juos išstums ir lentelė subyra. Kad tai neįvyktų, reikia pašalinti vieną iš langelių iš žemiau esančios eilės. Žiūrėkite pavyzdžius norėdami geriau suprasti.

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į dviem eilutėms

O dabar išplėskime langelį 1 dviem eilutėms, nustatydami jam atributą rowspan reikšmę 2. Pamatysime, kad jis išstumia langelius iš po juo esančios eilutės ir lentelė subyra:

<table>
	<tr>
		<td rowspan="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 subyrėjimo

Kad išspręstume lentelės subyrėjimo problemą iš ankstesnio pavyzdžio, pabandykime pašalinti vieną iš langelių iš antros eilutės (ir tai nebūtinai langelį 4, kuris yra tiesiai po mūsų langeliu 1, galima šalinti bet kurį, mes pašalinsime langelį su numeriu 5):

<table>
	<tr>
		<td rowspan="2">cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</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į `3` eilutėms

O čia išplėskime mūsų langelį ne dviem eilutėm, o 3, nustatykime jam rowspan reikšmę 3. Tuo pačiu pašalinkime vieną iš langelių iš trečios eilutės (langelį 7, 8 ar 9 - nesvarbu), kad lentelė nesubyrautų:

<table>
	<tr>
		<td rowspan="3">cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell9</td>
	</tr>
</table>

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

Pavyzdys . Išplėskime dar `2` stulpeliams

Išplėskime dar ir langelį 2 2 stulpeliams papildomai prie pirmojo langelio. Tam langeliui 2 pridedame colspan reikšmę 2. Tuo pačiu pašalinsime langelį 3, kad lentelė nesubyrautų:

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

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

Taip pat žiūrėkite

atributą colspan,
kuris sujungia lentelės stulpelius