border-spacing Özelliği

border-spacing özelliği, bir HTML tablosunun td veya th hücreleri arasındaki (ve hücre kenarlığı ile tablo kenarlığı arasındaki) boşluğu belirler. Özelliğin değeri, yüzde birimleri dışında herhangi bir boyut birimi olabilir.

Sözdizimi

seçici {
	border-spacing: bir veya iki değer;
}

Değerler

Değer	Açıklama
bir değer	Bir değer, hücreler arasında dikey ve yatay olarak eşit boşluk belirler.
iki değer	İlk değer yatay boşluğu, ikinci değer ise dikey boşluğu belirler.

Varsayılan değer: 0. Ancak, her tarayıcının cellspacing özniteliği için sıfırdan farklı kendi varsayılan değeri olduğundan, varsayılan olarak hücreler arasında boşluk görürsünüz.

Notlar

Bu özelliği tablonun kendisine uygulayın, hücrelerine değil (hücreler için çalışmaz).

Benzer bir etki margin ile elde edilemez, çünkü tablo hücreleri için margin çalışmaz.

Eğer border-collapse özelliği collapse değerine ayarlanmışsa - border-spacing çalışmaz.

Örnek . Bir Değer

Hadi hücreler arasındaki (ve hücre ile tablo kenarlığı arasındaki) boşluğu 10px yapalım:

<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-spacing: 10px;
	border-collapse: separate;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}

Örnek . İki Değer

Şimdi de yatayda 10px, dikeyde 30px boşluk yapalım:

<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-spacing: 10px 30px;
	border-collapse: separate;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}

Örnek . border-collapse: collapse Ayarlayalım

Şimdi ise, border-collapse özelliği collapse değerine ayarlandığı için border-spacing çalışmayacak:

<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;
	border-spacing: 10px 30px;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}