border-collapse Özelliği

border-collapse özelliği, td hücreleri veya th hücreleri arasındaki çift kenarlıkları (ve hücre kenarlığı ile tablonun kendi kenarlığı arasında) birleştirip tek bir kenarlık gibi görünmesini sağlar.

Bu özellik sadece tablolar ve display özelliği table veya inline-table değerine sahip elementler için uygulanır. Normal blok elementler için, ne yazık ki, çalışmaz. Unutmayın, uygulamanız gereken yer tablonun kendisidir, hücreleri değil.

Sözdizimi

seçici {
	border-collapse: collapse | separate;
}

Değerler

Değer	Açıklama
`collapse`	Çift kenarlıklar tek bir kenarlık gibi görünecektir. Yan etkileri vardır: `border-spacing` özelliği ve `cellspacing` niteliği çalışmaz.
`separate`	Tablodaki her hücre kendi kenarlığına sahip olacaktır (dolayısıyla, eğer hücreler arası boşluk sıfırsa, bazı yerlerde kenarlıklar çift görünecektir).

Varsayılan değer: separate.

Örnek . separate Değeri

Şu anda tablodaki tüm kenarlıklar çifttir (kenarlık hem hücrelere hem de tablonun kendisine verilmiştir):

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-collapse: separate;
	width: 400px;
	border-spacing: 0;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}

Örnek . separate Değeri

Şimdi ise kenarlık hücrelere verilmiş, ancak tablonun kendisine verilmemiştir. İki hücrenin ortak kenarı olduğu yerlerde kenarlıklar çift, diğer yerlerde ise tek olacaktır:

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-collapse: separate;
	width: 400px;
	border-spacing: 0;
}
td {
	border: 1px solid red;
	text-align: center;
}

Örnek . collapse Değeri

Şimdi tablodaki tüm kenarlıklar daraltılacak ve istediğimiz gibi 1px kalınlığında görünecektir:

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-collapse: collapse;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}