কম্পিউটার

CSS ব্যবহার করে সারণী সীমানা সঙ্কুচিত করা


টেবিলের সীমানা ভেঙে ফেলার জন্য, CSS-এ বর্ডার-কলেপ প্রপার্টি ব্যবহার করুন। টেবিলের সীমানা −

কেল্যাপস করার একটা উদাহরণ দেখা যাক

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
table {
   border-collapse: collapse;
   background-color: black;
   color: white;
}
th, td {
   border: 2px dashed yellow;
}
</style>
</head>
<body>
<h2>Team Ranking Table</h2>
<table>
<tr>
<th>Team</th>
<th>Rank</th>
<th>Points</th>
</tr>
<tr>
<td>India</td>
<td>1</td>
<td>200</td>
</tr>
<tr>
<td>England</td>
<td>2</td>
<td>180</td>
</tr>
<tr>
<td>Australia</td>
<td>3</td>
<td>150</td>
</tr>
<tr>
<td>NewZealand</td>
<td>4</td>
<td>130</td>
</tr>
<tr>
<td>SouthAfrica</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<td>WestIndies</td>
<td>6</td>
<td>80</td>
</tr>
<tr>
<td>Pakistan</td>
<td>7</td>
<td>70</td>
</tr>
</table>
</body>
</html>

আউটপুট

CSS ব্যবহার করে সারণী সীমানা সঙ্কুচিত করা

উদাহরণ

এখন আরেকটি উদাহরণ দেখা যাক -

<!DOCTYPE html>
<html>
<head>
<style>
table {
   border-collapse: collapse;
   background-color: black;
   color: white;
}
</style>
</head>
<body>
<h2>Team Ranking Table</h2>
<table>
<tr>
<th>Team</th>
<th>Rank</th>
<th>Points</th>
</tr>
<tr>
<td>India</td>
<td>1</td>
<td>200</td>
</tr>
<tr>
<td>England</td>
<td>2</td>
<td>180</td>
</tr>
<tr>
<td>Australia</td>
<td>3</td>
<td>150</td>
</tr>
<tr>
<td>NewZealand</td>
<td>4</td>
<td>130</td>
</tr>
<tr>
<td>SouthAfrica</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<td>WestIndies</td>
<td>6</td>
<td>80</td>
</tr>
<tr>
<td>Pakistan</td>
<td>7</td>
<td>70</td>
</tr>
</table>
</body>
</html>

আউটপুট

CSS ব্যবহার করে সারণী সীমানা সঙ্কুচিত করা


  1. CSS-এ টেবিলের সীমানা সঙ্কুচিত করা

  2. কিভাবে CSS দিয়ে একটি জেব্রা স্ট্রাইপড টেবিল তৈরি করবেন?

  3. কিভাবে CSS এর সাথে একটি তুলনা টেবিল তৈরি করবেন?

  4. কিভাবে CSS দিয়ে একটি প্রতিক্রিয়াশীল টেবিল তৈরি করবেন?