Omadus border-spacing

Omadus border-spacing määrab vahekauguse td või th lahtrite vahel HTML tabelis (ja lahtri piiri ning tabeli enda vahel). Omaduse väärtuseks võivad olla mis tahes mõõtühikud, välja arvatud protsendid.

Süntaks

selektor {
	border-spacing: üks või kaks väärtust;
}

Väärtused

Väärtus	Kirjeldus
üks väärtus	Üks väärtus määrab lahtrite vahelised vahekaugused vertikaalselt ja horisontaalselt võrdsetena.
kaks väärtust	Esimene väärtus määrab vahekauguse horisontaalselt ja teine väärtus - vahekauguse vertikaalselt.

Vaikeväärtus: 0. Siiski on igas brauseris oma, nullist erinev väärtus atribuudil cellspacing, seetõttu näete vaikimisi lahtrite vahel vahekasid.

Märkused

Rakendage omadust tabelitele, mitte selle lahtritele (lahtrite puhul see ei tööta).

Sarnast efekti ei saa saavutada kasutades margin, kuna margin tabeli lahtrite puhul ei tööta.

Kui on määratud omadus border-collapse väärtusega collapse - siis border-spacing ei tööta.

Näide . Üks väärtus

Teeme lahtrite vahelised vahekaugused (ja lahtri ja tabeli piiri vahel) 10px:

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

Näide . Kaks väärtust

Ja nüüd teeme vahekaugused 10px horisontaalselt ja 30px vertikaalselt:

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

Näide . Määrame border-collapse: collapse

Aga nüüd border-spacing ei tööta omaduse border-collapse väärtuse collapse tõttu:

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