rowspan atributi

rowspan atributi qatorlarni HTML jadvalida birlashtirishni boshqaradi. th va td teglariga qo'llaniladi.

Qabul qilinadigan qiymat: butun son 1 dan boshlab.

Qanday foydalanish: ushbu atributni istalil td yoki th katagiga qo'shamiz. Agar, masalan, rowspan ni 2 qiymatiga o'rnatsak - bu o'rnatilgan katak jadval balandligida ikkita qatorni egallaydi. Bunda pastki qatordagi kataklar yo'qolmaydi, bizning kengaygan katagimiz ularni siqib chiqaradi va jadval buziladi. Buning oldini olish uchun pastki qatordagi kataklardan birini o'chirish kerak. Yaxshiroq tushunish uchun misollarni ko'ring.

Misol . Birlashtirmasdan jadval

Keling, birlashtirmasdan jadvalni ko'rib chiqaylik, biz keyinroq shu bilan ishlaymiz:

<table>
	<tr>
		<td>katak1</td>
		<td>katak2</td>
		<td>katak3</td>
	</tr>
	<tr>
		<td>katak4</td>
		<td>katak5</td>
		<td>katak6</td>
	</tr>
	<tr>
		<td>katak7</td>
		<td>katak8</td>
		<td>katak9</td>
	</tr>
</table>

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

Misol . Katakni ikkita qatorga kengaytiramiz

Keling 1 katagini ikkita qatorga kengaytiramiz, unga rowspan atributini 2 qiymatida o'rnatamiz. Biz ko'ramizki, u kataklarni o'zining pastidagi qatordan siqib chiqaradi va jadval buziladi:

<table>
	<tr>
		<td rowspan="2">katak1</td>
		<td>katak2</td>
		<td>katak3</td>
	</tr>
	<tr>
		<td>katak4</td>
		<td>katak5</td>
		<td>katak6</td>
	</tr>
	<tr>
		<td>katak7</td>
		<td>katak8</td>
		<td>katak9</td>
	</tr>
</table>

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

Misol . Jadvalni buzilishisiz katakni kengaytiramiz

Oldingi misoldagi jadvalning buzilishi muammosini tuzatish uchun keling ikkinchi qatordagi kataklardan birini o'chirib ko'ramiz (va bu albatta 1 katagimizning ostida joylashgan 4 katagi bo'lishi shart emas, har qandayini o'chirish mumkin, biz 5 raqamli katakni o'chiramiz):

<table>
	<tr>
		<td rowspan="2">katak1</td>
		<td>katak2</td>
		<td>katak3</td>
	</tr>
	<tr>
		<td>katak4</td>
		<td>katak6</td>
	</tr>
	<tr>
		<td>katak7</td>
		<td>katak8</td>
		<td>katak9</td>
	</tr>
</table>

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

Misol . Katakni `3` qatorga kengaytiramiz

Bu yerda katagimizni ikkita qator emas, balki 3 qatorga kengaytiramiz, unga rowspan ni 3 qiymatida o'rnatamiz. Bunda uchinchi qatordagi kataklardan birini (7, 8 yoki 9 kataklaridan - fargi yo'q) o'chiramiz, jadval buzilmasligi uchun:

<table>
	<tr>
		<td rowspan="3">katak1</td>
		<td>katak2</td>
		<td>katak3</td>
	</tr>
	<tr>
		<td>katak4</td>
		<td>katak6</td>
	</tr>
	<tr>
		<td>katak7</td>
		<td>katak9</td>
	</tr>
</table>

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

Misol . Yana `2` ustunga kengaytiramiz

Keling birinchi katakga qo'shimcha ravishda 2 katagini ham 2 ustunga kengaytiramiz. Buning uchun 2 katagiga colspan ni 2 qiymatida qo'shamiz. Bunda 3 katagini o'chiramiz, jadval buzilmasligi uchun:

<table>
	<tr>
		<td rowspan="3">katak1</td>
		<td colspan="2">katak2</td>
	</tr>
	<tr>
		<td>katak4</td>
		<td>katak6</td>
	</tr>
	<tr>
		<td>katak7</td>
		<td>katak9</td>
	</tr>
</table>

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

Shuningdek ko'ring

colspan atributi,
bu jadval ustunlarini birlashtiradi