border-spacing ගුණය

border-spacing ගුණය td කොටු හෝ th කොටු අතර දුර (සහ කොටුවේ සීමාව සහ වගුව අතර දුර) නියම කරයි. ප්‍රමාණ ඒකක ඕනෑම එකක් (සියයට නොවන) ගුණයේ අගය ලෙස භාවිතා කළ හැකිය.

වාක්‍ය රීතිය

තෝරන්නා {
	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;
}