Атрибут colspan

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

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

Қандай ишлатиш керак: бу атрибутни istalgan td ёки th ҳужайрасига қўшамиз. Агар, масалан, colspan атрибутига 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-ҳужайрани икки устунга кенгайтириб кўрайлик, унинг colspan атрибутига 2 қийматини берамиз. Бу ҳолда у ўнг томондаги ҳужайраларни сиқиб чиқаради ва жадвал ишдан чиқади:

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

Мисол . Ҳужайрани жадвални бузмай кенгайтирамиз

Олдинги мисолдаги жадвалнинг ишдан чиқиши муаммосини тузатамиз, бизнинг ҳужайрамиздан ўнг томондаги ҳужайралардан бирини ўчирамиз (бу 2 ёки 3-ҳужайра - фарқи йўқ):

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

Мисол . Ҳужайрани уч устунга кенгайтирамиз

1-ҳужайрани 3 та устунга кенгайтирамиз ва унинг colspan атрибутига 3 қийматини берамиз. Бу ҳолда жадвал ишдан чиқмаслиги учун яна бир ўнг томондаги ҳужайрани ўчирамиз:

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

Мисол . Бир вақтда colspan ва rowspan

4, 5, 7 ва 8-ҳужайраларни бирлаштириб кўрайлик, colspan ва rowspan атрибутларидан фойдаланамиз (олдинги бирлаштиришларни жадвалдан олиб ташлаймиз):

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

Шунингдек қаранг

атрибут rowspan,
у жадвалнинг қаторларини бирлаштиради