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