Ιδιότητα border-spacing

Η ιδιότητα border-spacing ορίζει την απόσταση μεταξύ των κελιών td ή των κελιών th ενός πίνακα HTML (και μεταξύ του περιγράμματος του κελιού και του ίδιου του πίνακα). Ως τιμή της ιδιότητας μπορούν να χρησιμοποιηθούν οποιεσδήποτε μονάδες μεγέθους, εκτός από ποσοστά.

Σύνταξη

επιλογέας {
	border-spacing: μία ή δύο τιμές;
}

Τιμές

Τιμή	Περιγραφή
μία τιμή	Μία τιμή ορίζει ίδιες αποστάσεις μεταξύ των κελιών κατά κατακόρυφο και οριζόντιο.
δύο τιμές	Η πρώτη τιμή ορίζει την απόσταση οριζόντια, και η δεύτερη τιμή - την απόσταση κατακόρυφα.

Προεπιλεγμένη τιμή: 0. Ωστόσο, κάθε φυλλομετρητής έχει τη δική του, μη μηδενική τιμή για το χαρακτηριστικό cellspacing, επομένως από προεπιλογή θα βλέπετε αποστάσεις μεταξύ των κελιών.

Παρατηρήσεις

Εφαρμόστε την ιδιότητα για πίνακες, και όχι για τα κελιά τους (για τα κελιά δεν θα λειτουργήσει).

Παρόμοιο αποτέλεσμα δεν μπορεί να επιτευχθεί με την margin, καθώς η margin για τα κελιά πίνακα δεν λειτουργεί.

Εάν οριστεί η ιδιότητα border-collapse με τιμή collapse - η border-spacing δεν θα λειτουργεί.

Παράδειγμα . Μία τιμή

Ας κάνουμε τις αποστάσεις μεταξύ των κελιών (και μεταξύ του κελιού και του περιγράμματος του πίνακα) 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;
}

Παράδειγμα . Δύο τιμές

Και τώρα ας κάνουμε τις αποστάσεις 10px οριζόντια και 30px κατακόρυφα:

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

Παράδειγμα . Ορίζουμε border-collapse: collapse

Εδώ όμως η border-spacing δεν θα λειτουργεί λόγω της ιδιότητας border-collapse με τιμή 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;
}