Proprietatea border-spacing

Proprietatea border-spacing stabilește spațiul dintre celulele td sau celulele th ale tabelului HTML (și între bordura celulei și tabelul în sine). Valoarea proprietății poate fi orice unitate de măsură, cu excepția procentelor.

Sintaxă

selector {
	border-spacing: una sau două valori;
}

Valori

Valoare	Descriere
o valoare	O singură valoare stabilește același spațiu între celule pe verticală și pe orizontală.
două valori	Prima valoare stabilește spațiul pe orizontală, iar a doua valoare - spațiul pe verticală.

Valoarea implicită: 0. Cu toate acestea, fiecare browser are propria sa valoare, nenulă, a atributului cellspacing, deci în mod implicit veți vedea spații între celule.

Observații

Aplicați proprietatea pentru tabele, nu pentru celulele sale (pentru celule nu va funcționa).

Același efect nu poate fi obținut cu ajutorul margin, deoarece margin pentru celulele tabelului nu funcționează.

Dacă este setată proprietatea border-collapse cu valoarea collapse - border-spacing nu va funcționa.

Exemplu . O valoare

Haideți să facem spațiile dintre celule (și între celulă și bordura tabelului) de 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;
}

Exemplu . Două valori

Iar acum să facem spațiile de 10px pe orizontală și 30px pe verticală:

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

Exemplu . Setăm border-collapse: collapse

Iar acum border-spacing nu va funcționa din cauza proprietății border-collapse cu valoarea 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;
}