Border-spacing häsiýeti

border-spacing häsiýeti td öýjükleri ýa-da th öýjükleri arasyndaky we öýjügiň çäginden tablisanyň özüne çenli bolan aralygy kesgitleýär. Häsiýetiň bahasy hökmünde göterimleriň haýsy hem bolsa ölçeg birlikleri ulanylar, ýöne göterim prosen bolup bilmeýär.

Gurluşy

selektor {
	border-spacing: bir ýa-da iki sany baha;
}

Bahalar

Baha	Düşündiriş
bir sany baha	Bir sany baha, öýjükleriň arasynda göni we ýatgyç taýdan deň aralyk kesgitleýär.
iki sany baha	Birkinji baha göni taýdan aralygy, ikinji baha bolsa ýatgyç taýdan aralygy kesgitleýär.

Bellenen bahasy: 0. Ýöne, her brauzeriň cellspacing atributy üçin noldan başga bellenen bahasy bar, şonuň üçin bellenen ýagdaýda siz öýjükleriň arasynyň aralygyny görersiňiz.

Bellikler

Häsiýeti tablisalar üçin ulanmaly, onuň öýjükleri üçin däl (öýjükler üçin işlemez).

Meňzeş täsiri margin ýardamy bilen gazanyp bolmaýar, sebäbi margin tablisa öýjükleri üçin işlemeýär.

border-collapse häsiýetine collapse bahasy berlen bolsa - border-spacing häsiýeti işlemez.

Mysal . Bir sany baha

Öýjükleriň arasyndaky we öýjügiň çägi bilen tablisa arasyndaky aralygy 10px edeliň:

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

Mysal . Iki sany baha

Indi bolsa, göni taýdan 10px we ýatgyç taýdan 30px aralyk edeliň:

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

Mysal . Border-collapse: collapse belläliň

Indi bolsa border-spacing häsiýeti border-collapse häsiýetiniň collapse bahasyna görä işlemez:

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