Vetoria border-spacing

Vetoria border-spacing përcakton distancën midis qelizave td ose qelizave th të tabelës HTML (dhe midis kufirit të qelizës dhe vetë tabelës). Vlera e vetorisë janë çdo njësi për madhësi, përveç përqindjeve.

Sintaksa

përzgjedhësi {
	border-spacing: një ose dy vlera;
}

Vlerat

Vlera	Përshkrimi
një vlerë	Një vlerë përcakton distanca të barabarta midis qelizave në vertikale dhe në horizontale.
dy vlera	Vlera e parë përcakton distancën në horizontale, dhe vlera e dytë - distancën në vertikale.

Vlera e parazgjedhur: 0. Megjithatë, çdo shfletues ka vlerën e vet, jo zero të atributit cellspacing, prandaj si parazgjedhje do të shihni distanca midis qelizave.

Vërejtje

Aplikoni vetorinë për tabela, jo për qelizat e saj (për qelizat nuk do të funksionojë).

Efektit të njëjtë nuk mund të arrihet me margin, sepse margin për qelizat e tabelës nuk funksionon.

Nëse është vendosur vetoria border-collapse në vlerën collapse - border-spacing nuk do të funksionojë.

Shembull . Një vlerë

Le të bëjmë distanca midis qelizave (dhe midis qelizës dhe kufirit të tabelës) në 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;
}

Shembull . Dy vlera

Dhe tani le të bëjmë distanca në 10px në horizontale dhe 30px në vertikale:

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

Shembull . Le të vendosim border-collapse: collapse

Dhe tani border-spacing nuk do të funksionojë për shkak të vetorisë border-collapse në vlerën 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;
}