Xüsusiyyət border-spacing

Xüsusiyyət border-spacing HTML cədvəlinin td və ya th xanaları arasında (və xana ilə cədvəl sərhədi arasında) məsafəni təyin edir. Xüsusiyyətin dəyəri faizlər istisna olmaqla, istənilən ölçü vahidləri ola bilər.

Sintaksis

selektor {
	border-spacing: bir və ya iki dəyər;
}

Dəyərlər

Dəyər	Təsvir
bir dəyər	Bir dəyər şaquli və üfüqi istiqamətdə eyni məsafəni təyin edir.
iki dəyər	Birinci dəyər üfüqi, ikinci dəyər isə şaquli məsafəni təyin edir.

Standart dəyər: 0. Lakin, hər bir brauzerin cellspacing atributu üçün sıfırdan fərqli öz standart dəyəri var, buna görə də standart olaraq xanalar arasında məsafə görəcəksiniz.

Qeydlər

Xüsusiyyəti cədvələ tətbiq edin, xanalarına yox (xanalar üçün işləməyəcək).

Eyni effekti margin ilə əldə etmək mümkün deyil, çünki cədvəl xanaları üçün margin işləmir.

Əgər border-collapse xüsusiyyəti collapse dəyərində təyin olunubsa - border-spacing işləməyəcək.

Nümunə . Bir dəyər

Gəlin xanalar arasındakı (və xana ilə cədvəl sərhədi arasındakı) məsafəni 10px edək:

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

Nümunə . Iki dəyər

İndi isə üfüqi istiqamətdə 10px, şaquli istiqamətdə isə 30px məsafə təyin edək:

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

Nümunə . border-collapse: collapse tətbiq edək

İndi isə border-collapse xüsusiyyəti collapse dəyərində olduğu üçün border-spacing işləməyəcək:

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