Атрибут rowspan

Атрибут rowspan HTML таблицасининг қаторларини бирлаштиришни бошқаради. th ва td тегларига қўлланилади.

Қабул қилинадиган қиймат: 1 дан бошланган бутун сон.

Қандай ишлатиш: бу атрибутни istalgan 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-ҳужайрани ўчириш, istalganini ўчириш мумкин, биз 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 атрибути,
таблица устунларини бирлаштиради