Lastnost border-spacing

Lastnost border-spacing določa razmik med celicami td ali celicami th HTML tabele (ter med mejo celice in tabelo samo). Vrednost lastnosti so poljubne enote za velikosti, razen odstotkov.

Sintaksa

selektor {
	border-spacing: ena ali dve vrednosti;
}

Vrednosti

Vrednost	Opis
ena vrednost	Ena vrednost določa enake razmake med celicami navpično in vodoravno.
dve vrednosti	Prva vrednost določa razmik vodoravno, druga vrednost pa razmik navpično.

Privzeta vrednost: 0. Vendar ima vsak brskalnik svojo, neničelno vrednost atributa cellspacing, zato boste privzeto videli razmake med celicami.

Opombe

Uporabite lastnost za tabele, ne za njene celice (za celice ne bo delovala).

Podobnega učinka ni mogoče doseči z margin, saj margin za celice tabele ne deluje.

Če je nastavljena lastnost border-collapse na vrednost collapse - border-spacing ne bo delovala.

Primer . Ena vrednost

Naredimo razmake med celicami (in med celico in mejo tabele) v 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;
}

Primer . Dve vrednosti

Zdaj pa naredimo razmake v 10px vodoravno in 30px navpično:

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

Primer . Nastavimo border-collapse: collapse

Tukaj border-spacing ne bo delovala zaradi lastnosti border-collapse z vrednostjo collapse:

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