CSS দিয়ে টেবিল স্টাইলিং — বর্ডার, কলাপস, প্রস্থ, Патেডিং, অ্যালাইনমেন্ট

CSS-এ টেবিল স্টাইল করার জন্য প্রধানত নিচের প্রোপার্টিগুলো ব্যবহার করা হয়:

• border — বর্ডার যোগ করা
• border-collapse — সেল বর্ডার একত্রিত করা
• width/height — প্রস্থ ও উঁচু
• padding — সেল কন্টেন্ট ও বর্ডারের মাঝপথি স্পেস
• text-align — টেক্সট অ্যালাইনমেন্ট

উদাহরণ ১: বর্ডার যোগ করা

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td { border: 2px dashed orange; }
</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>

উদাহরণ ২: বর্ডার কলাপস (collapse)

<!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>

উদাহরণ ৩: প্যাডিং ও টেক্সট অ্যালাইন

<!DOCTYPE html>
<html>
<head>
<style>
table { border: 1px solid black; background-color: blue; color: white; }
th, td { border: 1px solid black; padding: 20px; text-align: center; }
table#demo { table-layout: fixed; width: 100%; }
</style>
</head>
<body>
<h2>Team Ranking Table</h2>
<table id="demo">
  <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>
</table>
</body>
</html>

সেরা অনুশীলন: border-collapse: collapse সবসময় ব্যবহার করুন 클িন লুক পেতে।