বৈশিষ্ট্য border-spacing

border-spacing বৈশিষ্ট্যটি একটি HTML টেবিলের td বা th ঘরগুলির মধ্যে ফাঁক (এবং টেবিলের সীমানা এবং ঘরের মধ্যে ফাঁক) নির্দিষ্ট করে। বৈশিষ্ট্যের মান শতাংশ ছাড়া যেকোনো আকারের একক হতে পারে।

সিনট্যাক্স

সিলেক্টর {
	border-spacing: একটি বা দুটি মান;
}

মানসমূহ

মান	বর্ণনা
একটি মান	একটি মান উল্লম্ব এবং অনুভূমিক উভয় দিকে ঘরগুলির মধ্যে একই ফাঁক নির্দিষ্ট করে।
দুটি মান	প্রথম মানটি অনুভূমিক ফাঁক নির্দিষ্ট করে, এবং দ্বিতীয় মানটি উল্লম্ব ফাঁক নির্দিষ্ট করে।

ডিফল্ট মান: 0। যাইহোক, প্রতিটি ব্রাউজারের cellspacing অ্যাট্রিবিউটের নিজস্ব, শূন্য-নয় এমন একটি মান রয়েছে, সুতরাং ডিফল্টভাবে আপনি ঘরগুলির মধ্যে ফাঁক দেখতে পাবেন।

উদাহরণ . একটি মান

আসুন ঘরগুলির মধ্যে (এবং টেবিলের সীমানা এবং ঘরের মধ্যে) ফাঁক 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>