თვისება 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;
}