rowspan Özniteliği

rowspan özniteliği, HTML tablosundaki satırların birleştirilmesini yönetir. th ve td etiketlerine uygulanır.

Kabul edilen değer: 1'den başlayan tam sayı.

Nasıl kullanılır: Bu özniteliği herhangi bir td veya th hücresine ekliyoruz. Örneğin, rowspan değerini 2 olarak ayarlarsak - bu özelliğin atandığı hücre, tablonun yüksekliğinde iki satır kaplayacaktır. Bu durumda, alt satırdaki hücreler yok olmaz, genişleyen hücremiz onları yerinden eder ve tablo bozulur. Bunun olmaması için, alt satırdaki hücrelerden birini silmek gerekir. Daha iyi anlamak için örneklere bakın.

Örnek . Birleştirme olmayan tablo

Daha sonra üzerinde çalışacağımız, birleştirme olmayan bir tabloya bakalım:

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

Örnek . Hücreyi iki satıra genişletelim

Şimdi 1 hücresini iki satıra genişletelim, ona rowspan özniteliğini 2 değeriyle atayalım. Altındaki satırdaki hücreleri yerinden ettiğini ve tablonun bozulduğunu göreceğiz:

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

Örnek . Tabloyu bozmadan hücreyi genişletelim

Önceki örnekteki tablonun bozulma problemini düzeltmek için, ikinci sıradaki hücrelerden birini silelim (ve bu mutlaka 1 hücremizin tam altındaki 4 hücresi olmak zorunda değildir, herhangi birini silebiliriz, 5 numaralı hücreyi sileceğiz):

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

Örnek . Hücreyi `3` satıra genişletelim

Burada hücremizi iki satıra değil, 3 satıra genişletelim, ona rowspan değerini 3 olarak atayalım. Aynı zamanda, tablonun bozulmaması için üçüncü sıradaki hücrelerden birini (7, 8 veya 9 hücresi - fark etmez) silelim:

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

Örnek . Ayrıca `2` sütuna genişletelim

İlk hücreye ek olarak, 2 hücresini de 2 sütuna genişletelim. Bunun için 2 hücresine 2 değerinde colspan ekliyoruz. Aynı zamanda, tablonun bozulmaması için 3 hücresini silelim:

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

Ayrıca bakınız

tablo sütunlarını birleştiren colspan özniteliği,