Īpašība border-spacing

Īpašība border-spacing nosaka atstarpi starp td šūnām vai th šūnām HTML tabulas (un starp šūnas robežu un pašu tabulu). Īpašības vērtība var būt jebkuras izmēru vienības, izņemot procentus.

Sintakse

selektors {
	border-spacing: viena vai divas vērtības;
}

Vērtības

Vērtība	Apraksts
viena vērtība	Viena vērtība nosaka vienādas atstarpes starp šūnām vertikāli un horizontāli.
divas vērtības	Pirmā vērtība nosaka atstarpi horizontāli, bet otrā vērtība - atstarpi vertikāli.

Noklusējuma vērtība: 0. Tomēr katram pārlūkprogrammai ir sava, nenumurēta vērtība atribūtam cellspacing, tāpēc pēc noklusējuma jūs redzēsit atstarpes starp šūnām.

Piezīmes

Lietojiet īpašību tabulām, nevis tās šūnām (šūnām tas nedarbosies).

Līdzīga efekta nevar panākt ar margin, jo margin tabulas šūnām nedarbojas.

Ja ir iestatīta īpašība border-collapse ar vērtību collapse - border-spacing nedarbosies.

Piemērs . Viena vērtība

Izveidosim atstarpes starp šūnām (un starp šūnu un tabulas robežu) 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;
}

Piemērs . Divas vērtības

Un tagad izveidosim atstarpes 10px horizontāli un 30px vertikāli:

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

Piemērs . Iestatām border-collapse: collapse

Bet šoreiz border-spacing nestrādās īpašības border-collapse dēļ ar vērtību 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;
}