Eienskap border-spacing

Die eienskap border-spacing spesifiseer die spasie tussen die selle van td of die selle van th in 'n HTML-tabel (en tussen die selrand en die tabel self). Die waarde van die eienskap kan enige eenheid vir groottes wees, behalwe persentasies.

Sintaksis

selekteerder {
	border-spacing: een of twee waardes;
}

Waardes

Waarde	Beskrywing
een waarde	Een waarde spesifiseer dieselfde spasie tussen selle in die vertikale en horisontale rigting.
twee waardes	Die eerste waarde spesifiseer die horisontale spasie, en die tweede waarde spesifiseer die vertikale spasie.

Verstekwaarde: 0. Tog het elke blaaiyer sy eie, nie-nul waarde vir die atribuut cellspacing, dus sal jy by verstek spasie tussen selle sien.

Opmerkings

Pas die eienskap toe op tabelle, nie op hul selle nie (dit sal nie op selle werk nie).

'N Soortgelyke effek kan nie met die margin-eienskap verkry word nie, aangesien margin nie vir tabelselle werk nie.

As die eienskap border-collapse gestel is op die waarde collapse - sal border-spacing nie werk nie.

Voorbeeld . Een waarde

Kom ons maak die spasie tussen selle (en tussen die sel en die tabelrand) 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;
}

Voorbeeld . Twee waardes

En nou maak ons die horisontale spasie 10px en die vertikale spasie 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;
}

Voorbeeld . Stel border-collapse: collapse

Nou sal border-spacing nie werk nie as gevolg van die eienskap border-collapse met waarde 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;
}