CSS border-collapse property

By /

CSS সীমানা-পতন সম্পত্তি

এই CSS প্রপার্টিটি টেবিল সেলের সীমানা সেট করতে এবং টেবিল সেলগুলি আলাদা বা সাধারণ সীমানা ভাগ করে কিনা তা নির্দিষ্ট করতে ব্যবহৃত হয়।

এই সম্পত্তির দুটি প্রধান মান রয়েছে যা পৃথক এবং পতন। যখন এটি আলাদা মান সেট করা হয়, তখন বর্ডার-স্পেসিং বৈশিষ্ট্য ব্যবহার করে ঘরের মধ্যে দূরত্ব নির্ধারণ করা যেতে পারে। যখন বর্ডার-কল্যাপস মান পতনে সেট করা হয়, তখন বর্ডার-স্টাইলের সম্পত্তির ইনসেট মান খাঁজের মতো আচরণ করে এবং প্রারম্ভিক মানটি রিজের মতো আচরণ করে।

বাক্য গঠন

  1. border-collapse: separate | collapse | initial | inherit;  

এই CSS সম্পত্তির মান নিম্নরূপ সংজ্ঞায়িত করা হয়.

সম্পত্তি মান

পৃথক: এটি ডিফল্ট মান যা টেবিল ঘরের সীমানাকে আলাদা করে। এই মান ব্যবহার করে, প্রতিটি ঘর তার নিজস্ব সীমানা প্রদর্শন করবে।

পতন: এই মানটি সীমানাগুলিকে একটি একক সীমানায় ভেঙে ফেলার জন্য ব্যবহৃত হয়। এটি ব্যবহার করে, দুটি সংলগ্ন টেবিল সেল একটি বর্ডার ভাগ করবে। যখন এই মানটি প্রয়োগ করা হয়, তখন সীমানা-ব্যবধান বৈশিষ্ট্য প্রভাবিত হয় না।

প্রাথমিক: এটি সম্পত্তিটিকে তার ডিফল্ট মান নির্ধারণ করে।

inherit: এটি তার মূল উপাদান থেকে সম্পত্তি উত্তরাধিকারসূত্রে পায়।

এখন, কিছু উদাহরণ ব্যবহার করে এই CSS বৈশিষ্ট্যটি বোঝা যাক। প্রথম উদাহরণে, আমরা সীমানা-পতন সম্পত্তির পৃথক মান ব্যবহার করছি। দ্বিতীয় উদাহরণে, আমরা বর্ডার-কলাপস সম্পত্তির পতন মান ব্যবহার করছি।

উদাহরণ – পৃথক মান ব্যবহার করা

এই মান দিয়ে, আমরা পার্শ্ববর্তী টেবিল ঘরগুলির মধ্যে দূরত্ব সেট করতে বর্ডার-স্পেসিং বৈশিষ্ট্য ব্যবহার করতে পারি।

  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4. <title> border-collapse property </title>  
  5. </style>  
  6. table{ 
  7. border: 2px solid blue;  
  8. text-align: center;  
  9. font-size: 20px;  
  10. width: 80%;  
  11. height: 50%;  
  12. }  
  13. th{  
  14. border: 5px solid red;  
  15. background-color: yellow;  
  16. }  
  17. td{  
  18. border: 5px solid violet;  
  19. background-color: cyan;  
  20. }  
  21. #t1 {  
  22. border-collapse: separate;  
  23. }  
  24. </style>  
  25. </head>  
  26. <body>  
  27. <h1> The border-collapse Property </h1>  
  28. <h2> border-collapse: separate; </h2>  
  29. <table id = “t1”>  
  30. <tr>  
  31. <th> First_Name </th>  
  32. <th> Last_Name </th>  
  33. <th> Subject </th>  
  34. <th> Marks </th>  
  35. </tr>  
  36. <tr>  
  37. <td> James </td>  
  38. <td> Gosling </td>  
  39. <td> Maths </td>  
  40. <td> 92 </td>  
  41. </tr>  
  42. <tr>  
  43. <td> Alan </td>  
  44. <td> Rickman </td>  
  45. <td> Maths </td>  
  46. <td> 89 </td>  
  47. </tr>  
  48. <tr>  
  49. <td> Sam </td>  
  50. <td> Mendes </td>  
  51. <td> Maths </td>  
  52. <td> 82 </td>  
  53. </tr>  
  54. </table>  
  55. </body>  
  56. </html>  

উদাহরণ – পতনের সম্পত্তি ব্যবহার করা

বর্ডার-স্পেসিং এবং বর্ডার-ব্যাসার্ধ বৈশিষ্ট্য এই মান দিয়ে ব্যবহার করা যাবে না।

  1. <!DOCTYPE html>  
  2. <html>   
  3. <head>  
  4. <title> border-collapse property </title>  
  5. </style>  
  6. table{  
  7. border: 2px solid blue;  
  8. text-align: center;  
  9. font-size: 20px;  
  10. width: 80%;  
  11. height: 50%;  
  12. }  
  13. th{  
  14. border: 5px solid red;  
  15. background-color: yellow;  
  16. }  
  17. td{  
  18. border: 5px solid violet;  
  19. background-color: cyan;  
  20. }  
  21. #t1{  
  22. border-collapse: collapse;  
  23. }  
  24. </style>  
  25. </head>  
  26. <body>    
  27. <h1> The border-collapse Property </h1>  
  28. <h2> border-collapse: collapse; </h2>  
  29. <table id = “t1”>  
  30. <tr>  
  31. <th> First_Name </th>  
  32. <th> Last_Name </th>  
  33. <th> Subject </th>  
  34. <th> Marks </th>  
  35. </tr>  
  36. <tr>  
  37. <td> James </td>  
  38. <td> Gosling </td>  
  39. <td> Maths </td>  
  40. <td> 92 </td>  
  41. </tr>  
  42. <tr>  
  43. <td> Alan </td>  
  44. <td> Rickman </td>  
  45. <td> Maths </td>  
  46. <td> 89 </td>  
  47. </tr>  
  48. <tr>  
  49. <td> Sam </td>  
  50. <td> Mendes </td>  
  51. <td> Maths </td>  
  52. <td> 82 </td>  
  53. </tr>  
  54. </table>  
  55. </body>  
  56. </html>  


Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top