Egenskaben border-spacing

Egenskaben border-spacing angiver afstanden mellem td-celler eller th-celler i en HTML-tabel (og mellem cellens grænse og selve tabellen). Egenskabens værdi kan angives i alle enheder for størrelser, bortset fra procenter.

Syntaks

selektor {
	border-spacing: én eller to værdier;
}

Værdier

Værdi	Beskrivelse
én værdi	Én værdi angiver den samme afstand mellem cellerne både vertikalt og horisontalt.
to værdier	Den første værdi angiver afstanden horisontalt, og den anden værdi angiver afstanden vertikalt.

Standardværdi: 0. Dog har hver browser sin egen, ikke-nul værdi for attributten cellspacing, så som standard vil du se afstande mellem cellerne.

Bemærkninger

Anvend egenskaben på tabeller, og ikke på dens enkelte celler (det vil ikke fungere for celler).

En tilsvarende effekt kan ikke opnås ved hjælp af margin, da margin ikke virker for tabelceller.

Hvis egenskaben border-collapse er sat til værdien collapse - vil border-spacing ikke fungere.

Eksempel . Én værdi

Lad os lave afstande mellem cellerne (og mellem cellen og tabelkanten) på 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;
}

Eksempel . To værdier

Og lad os nu lave afstande på 10px horisontalt og 30px vertikalt:

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

Eksempel . Sæt border-collapse: collapse

Her vil border-spacing ikke virke på grund af egenskaben border-collapse med værdien 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;
}