colspan Özelliği

colspan özelliği, HTML tablosunun sütunlarının birleştirilmesini kontrol eder. th ve td etiketlerine uygulanır.

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

Nasıl kullanılır: bu özelliği herhangi bir td veya th hücresine ekleriz. Örneğin, colspan değerini 2 olarak ayarlarsak - bu özelliğin atandığı hücre, tablonun iki sütununu kaplayacaktır. Bu durumda, sağdaki komşu hücreler yok olmaz, genişleyen hücremiz onları dışarı iter ve tablo bozulur. Bunun olmaması için, sağdaki hücrelerden birini silmek gerekir. Daha iyi anlamak için örneklere bakın.

Örnek . Birleştirme olmayan tablo

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

<table>
	<tr>
		<td>hücre1</td>
		<td>hücre2</td>
		<td>hücre3</td>
	</tr>
	<tr>
		<td>hücre4</td>
		<td>hücre5</td>
		<td>hücre6</td>
	</tr>
	<tr>
		<td>hücre7</td>
		<td>hücre8</td>
		<td>hücre9</td>
	</tr>
</table>

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

Örnek . Hücreyi iki sütun genişliğe çıkaralım

1 numaralı hücreye colspan özelliğini 2 değerinde ayarlayarak onu iki sütun genişliğe çıkarmayı deneyelim. Bu durumda sağdaki hücreleri dışarı itecek ve tablo bozulacaktır:

<table>
	<tr>
		<td colspan="2">hücre1</td>
		<td>hücre2</td>
		<td>hücre3</td>
	</tr>
	<tr>
		<td>hücre4</td>
		<td>hücre5</td>
		<td>hücre6</td>
	</tr>
	<tr>
		<td>hücre7</td>
		<td>hücre8</td>
		<td>hücre9</td>
	</tr>
</table>

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

Örnek . Tabloyu bozmadan hücreyi genişletme

Şimdi bir önceki örnekteki tablonun bozulma problemini düzeltmeyi deneyelim, bunun için hücremizin sağındaki hücrelerden birini silelim (bu 2 veya 3 numaralı hücre - fark etmez):

<table>
	<tr>
		<td colspan="2">hücre1</td>
		<td>hücre2</td>
	</tr>
	<tr>
		<td>hücre4</td>
		<td>hücre5</td>
		<td>hücre6</td>
	</tr>
	<tr>
		<td>hücre7</td>
		<td>hücre8</td>
		<td>hücre9</td>
	</tr>
</table>

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

Örnek . Hücreyi üç sütun genişliğe çıkaralım

1 numaralı hücreyi 3 sütun genişliğe çıkaralım ve ona colspan özelliğini 3 değerinde atayalım. Bu durumda tablonun bozulmaması için sağdaki bir hücreyi daha silelim:

<table>
	<tr>
		<td colspan="3">hücre1</td>
	</tr>
	<tr>
		<td>hücre4</td>
		<td>hücre5</td>
		<td>hücre6</td>
	</tr>
	<tr>
		<td>hücre7</td>
		<td>hücre8</td>
		<td>hücre9</td>
	</tr>
</table>

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

Örnek . Aynı anda colspan ve rowspan

4, 5, 7 ve 8 numaralı hücreleri colspan ve rowspan özelliklerini kullanarak birleştirmeyi deneyelim (önceki birleştirmeleri tablodan kaldıralım):

<table>
	<tr>
		<td colspan="3">hücre1</td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">hücre4</td>
		<td>hücre6</td>
	</tr>
	<tr>
		<td>hücre9</td>
	</tr>
</table>

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

Ayrıca Bakınız

tablo satırlarını birleştiren rowspan özelliği,