Ominaisuus border-spacing

Ominaisuus border-spacing asettaa välimatkan td -solujen tai th -solujen välille HTML-taulukossa (sekä solun reunan ja taulukon itsensä välille). Ominaisuuden arvona voivat olla mitkä tahansa kokoyksiköt, paitsi prosentit.

Syntaksi

valitsija {
	border-spacing: yksi tai kaksi arvoa;
}

Arvot

Arvo	Kuvaus
yksi arvo	Yksi arvo asettaa saman välimatkan solujen välille pysty- ja vaakasuunnassa.
kaksi arvoa	Ensimmäinen arvo asettaa välimatkan vaakasuunnassa ja toinen arvo - välimatkan pystysuunnassa.

Oletusarvo: 0. Kuitenkin jokaisella selaimella on oma, nollasta poikkeava arvo attribuutille cellspacing, joten oletusarvoisesti näet välimatkat solujen välillä.

Huomautukset

Käytä ominaisuutta taulukoille, etkä sen soluille (soluille se ei toimi).

Vastaavaa efektiä ei voida saavuttaa käyttämällä margin -ominaisuutta, sillä margin ei toimi taulukon soluille.

Jos ominaisuus border-collapse on asetettu arvoon collapse - border-spacing ei toimi.

Esimerkki . Yksi arvo

Tehdään välimatkat solujen välille (ja solun ja taulukon reunan välille) 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;
}

Esimerkki . Kaksi arvoa

Tehdään nyt välimatkat 10px vaakasuunnassa ja 30px pystysuunnassa:

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

Esimerkki . Asetetaan border-collapse: collapse

Nyt border-spacing -ominaisuus ei toimi border-collapse -ominaisuuden vuoksi arvolla 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;
}