টেবিল বর্ডার কোল্যাপ্স (একত্রিত) করার জন্য CSS-এ border-collapse প্রপার্টি ব্যবহার করুন।
উদাহরণ ১: dashed বর্ডার সহ কোল্যাপ্স
<!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-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>
আউটপুট
border-collapse মানগুলো
- collapse: সংলগ্ন সেলের বর্ডার একত্রিত হয় (সিঙ্গল বর্ডার)
- separate: প্রতিটি সেলের পৃথক বর্ডার থাকে (ডিফল্ট),
border-spacingদিয়ে গ্যাপ নিয়ন্ত্রণ করা যায়
টিপস: border-collapse: collapse ব্যবহার করলে border-spacing কাজ করে না।
