rowspan атрибуты

rowspan атрибуты HTML қатарларын біріктіруді басқарады кестесінде. th және td тегтеріне қолданылады.

Қабылданатын мән: бүтін сан 1-ден бастап.

Қалай қолдану керек: бұл атрибутты кез келген td немесе th ұяшығына қосамыз. Егер, мысалы, rowspan мәнін 2 деп белгілесек - онда бұл белгіленген ұяшық кестенің биіктігі бойынша екі қатарды алады. Бұл ретте төменгі қатардағы ұяшықтар жоғалмайды, біздің кеңейген ұяшық оларды ығыстырып шығарады және кесте бұзылады. Мұның болмауы үшін төменгі қатардағы ұяшықтардың бірін жою керек. Жақсы түсіну үшін мысалдарды қараңыз.

Мысал . Біріктірілмеген кесте

Біз әрі қарай жұмыс істейтін, біріктірілмеген кестені қарастырайық:

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

Мысал . Ұяшықты екі қатарға кеңейтейік

Енді 1 ұяшығын екі қатарға кеңейтейік, оған rowspan атрибутын 2 мәнінде белгілей отырып. Біз оның астындағы қатардағы ұяшықтарды ығыстырып шығаратынын және кестенің бұзылатынын көреміз:

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

Мысал . Ұяшықты кестені бұзбай кеңейту

Алдыңғы мысалдағы кестенің бұзылу мәселесін түзету үшін, екінші қатардағы ұяшықтардың бірін жоюға тырысайық (және бұл міндетті түрде біздің 1 ұяшығымыздың астындағы 4 ұяшығы болуы шарт емес, кез келгенін жоюға болады, біз 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;
}

Мысал . Ұяшықты `3` қатарға кеңейтейік

Мұнда біздің ұяшығымызды екі қатарға емес, 3 қатарға кеңейтейік, оған rowspan атрибутын 3 мәнінде белгілейміз. Сонымен бірге үшінші қатардағы ұяшықтардың бірін (7, 8 немесе 9 ұяшықтарын - айырмашылығы жоқ) жоямыз, кесте бұзылмас үшін:

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

Мысал . Тағы да `2` бағанға кеңейтейік

Бірінші ұяшыққа қосымша 2 ұяшығын тағы да 2 бағанға кеңейтейік. Ол үшін 2 ұяшығына colspan атрибутын 2 мәнінде қосамыз. Сонымен бірге 3 ұяшығын жоямыз, кесте бұзылмас үшін:

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

Сондай-ақ қараңыз

colspan атрибуты,
ол кесте бағандарын біріктіреді