কম্পিউটার টিউটোরিয়াল

CSS দিয়ে টেবিলে বর্ডার যোগ করা

CSS দিয়ে টেবিলে বর্ডার যোগ করতে border প্রোপার্টি ব্যবহার করুন।

উদাহরণ

একটি উদাহরণ দেখি:

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

আউটপুট

CSS দিয়ে টেবিলে বর্ডার যোগ করা

উদাহরণ

আরেকটি উদাহরণ:

<!DOCTYPE html> <html> <head> <style> table {    border: 5px dashed orange; } th, td {    border: 1px dashed green; } </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 দিয়ে HTML টেবিলে ফিক্সড হেডার তৈরি করা (স্ক্রোল করলে হেডার থাকবে)