Хосияти 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;
}