rowspan atributu

rowspan atributu sətirlərin HTML cədvəlində birləşdirilməsini idarə edir. th və td teqlərinə tətbiq edilir.

Qəbul edilən dəyər: 1-dən başlayaraq tam ədəd.

Necə istifadə etməli: bu atributu istənilən td və ya th xanasına əlavə edirik. Əgər, məsələn, rowspan-ı 2 dəyərinə təyin etsək - bu təyin edilən xana cədvəlin hündürlüyündə iki sətrin yerini tutacaq. Eyni zamanda, aşağıdakı sətirdəki xanalar yox olmayacaq, genişlənmiş xanamız onları sıxışdıracaq və cədvəl dağılacaq. Bunun baş verməməsi üçün aşağıdakı sətirdən bir xananı silmək lazımdır. Daha yaxşı başa düşmək üçün nümunələrə baxın.

Nümunə . Birləşdirmələri olmayan cədvəl

Gəlin, daha sonra işləyəcəyimiz, birləşdirmələri olmayan cədvələ baxaq:

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

Nümunə . Xananı iki sətirə genişləndirək

İndi gəlin 1 nömrəli xananı iki sətirə genişləndirək, ona rowspan atributunu 2 dəyərində təyin edək. Görəcəyik ki, o, altındakı sətirdən xanaları sıxışdırır və cədvəl dağılır:

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

Nümunə . Xananı cədvəli dağıtmadan genişləndirək

Əvvəlki nümunədəki cədvəlin dağılması problemini düzəltmək üçün gəlin ikinci sətirdən bir xananı silməyə çalışaq (və bu mütləq bizim 1 xanamızın birbaşa altındakı 4 xanası olmamalıdır, istənilənini silə bilərik, biz 5 nömrəli xananı siləcəyik):

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

Nümunə . Xananı `3` sətirə genişləndirək

Burada gəlin xanamızı iki deyil, 3 sətirə genişləndirək, ona rowspan atributunu 3 dəyərində təyin edək. Eyni zamanda cədvəlin dağılmaması üçün üçüncü sətirdən bir xananı (7, 8 və ya 9 xanası - fərq etmir) silək:

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

Nümunə . `2` sütun daha genişləndirək

Gəlin birinci xanaya əlavə olaraq 2 nömrəli xananı da 2 sütun genişləndirək. Bunun üçün 2 nömrəli xanaya 2 dəyərində colspan əlavə edirik. Eyni zamanda cədvəlin dağılmaması üçün 3 nömrəli xananı silirik:

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

Həmçinin bax

colspan atributu,
cədvəlin sütunlarını birləşdirir