colspan atributi

colspan atributi HTML jadvalining ustunlarini birlashtirishni boshqaradi. th va td teglariga qo‘llaniladi.

Qabul qilinadigan qiymat: 1 dan boshlab butun son.

Qanday foydalaniladi: ushbu atribut istalgan td yoki th katagiga qo‘shiladi. Agar, masalan, colspan ga 2 qiymati berilsa, unda ushbu atribut berilgan katak jadvalning ikkita ustunini egallaydi. Bunda, o‘ng tomondagi qo‘shni kataklar yo‘qolmaydi, lekin bizning kengaygan katagimiz ularni siqib chiqaradi va jadval buziladi. Buning oldini olish uchun o‘ng tomondagi kataklardan birini olib tashlash kerak. Yaxshiroq tushunish uchun misollarni ko‘rib chiqing.

Misol . Birlashtirmasdan jadval

Keyinroq ishlaydigan, birlashtirilmagan jadvalni ko‘rib chiqamiz:

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

Misol . Katakni ikkita ustunga kengaytiramiz

Keling, 1-katakni ikkita ustunga kengaytirishga harakat qilaylik, unga colspan atributini 2 qiymatida beramiz. Bunda u o‘ng tomondagi kataklarni siqib chiqaradi va jadval buziladi:

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

Misol . Jadvalni buzilishisiz katakni kengaytiramiz

Keling, oldingi misoldagi jadvalning buzilishi muammosini tuzatishga harakat qilaylik, bizning katagimizning o‘ng tomonidagi kataklardan bittasini olib tashlaymiz (bu 2 yoki 3 - katagi, farqi yo‘q):

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

Misol . Katakni uchta ustunga kengaytiramiz

Keling, 1-katakni 3 ta ustunga kengaytiramiz va unga colspan atributini 3 qiymatida beramiz. Bunda jadval buzilmasligi uchun o‘ng tomondan yana bitta katakni olib tashlaymiz:

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

Misol . Bir vaqtning o‘zida colspan va rowspan

Keling, 4, 5, 7 va 8 raqamli kataklarni colspan va rowspan atributlaridan foydalanib birlashtirishga harakat qilaylik (oldingi birlashtirishlarni jadvaldan olib tashlaymiz):

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

Shuningdek qarang

jadval qatorlarini birlashtiradigan rowspan atributi