Savybė border-spacing

Savybė border-spacing nustato atstumą tarp td langelių arba th langelių HTML lentelės (ir tarp langelių ir pačios lentelės). Savybės reikšmė gali būti bet kuris dydžio vienetas, išskyrus procentus.

Sintaksė

selektorius {
	border-spacing: viena ar dvi reikšmės;
}

Reikšmės

Reikšmė	Aprašas
viena reikšmė	Viena reikšmė nustato vienodus atstumus tarp langelių vertikaliai ir horizontaliai.
dvi reikšmės	Pirmoji reikšmė nustato atstumą horizontaliai, o antroji reikšmė - atstumą vertikaliai.

Numatytoji reikšmė: 0. Tačiau, kiekviena naršyklė turi savo, nulinę reikšmę atributui cellspacing, taigi pagal nutylėjimą pamatysite tarpus tarp langelių.

Pastabos

Taikykite savybę lentelėms, o ne jos langeliams (langeliams neveiks).

Panašaus efekto negalima pasiekti naudojant margin, nes margin lentelės langeliams neveikia.

Jei nustatyta savybė border-collapse reikšmėje collapse - border-spacing neveiks.

Pavyzdys . Viena reikšmė

Padarykime atstumus tarp langelių (ir tarp langelio ir lentelės) 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;
}

Pavyzdys . Dvi reikšmės

Dabar padarykime atstumus 10px horizontaliai ir 30px vertikaliai:

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

Pavyzdys . Nustatome border-collapse: collapse

Dabar border-spacing nebeveiks dėl savybės border-collapse reikšmėje 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;
}