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