HTML DOM borderSpacing প্রপার্টি টেবিল সেলগুলোর মধ্যবর্তী স্পেস সেট বা ফেরত দেওয়ার জন্য ব্যবহৃত হয়।
সিনট্যাক্স
borderSpacing প্রপার্টি সেট করার সিনট্যাক্স:
object.style.borderSpacing = "length length|initial|inherit"
প্রপার্টি মানগুলো নিচে ব্যাখ্যা করা হলো:
| মান | বিবরণ |
|---|---|
| length length | সেলগুলোর মধ্যবর্তী স্পেস নির্দিষ্ট করতে ব্যবহৃত হয়। শুধু একটা মান দিলে অনুভূমিক এবং লম্বিক স্পেস দুটোই সেট হয়, অন্যথায় প্রথম মান অনুভূমিক এবং দ্বিতীয় মান লম্বিক স্পেসের জন্য। এর ডিফল্ট মান ০। |
| initial | প্রপার্টিকে ডিফল্ট মানে সেট করার জন্য। |
| inherit | পিতামাতা এলিমেন্ট থেকে মান উত্তরাধিকার সূত্রে পাওয়ার জন্য। |
উদাহরণ
<!DOCTYPE html> <html> <head> <style> div { display: flex; float: left; } table { border: 3px solid black; } td { border: 3px solid lightgreen; } th { border: 3px solid lightblue; } </style> <script> function IncreaseBorderSpacing(){ document.getElementById("t1").style.borderSpacing="10px 10px"; document.getElementById("Sample").innerHTML="টেবিল বর্ডার স্পেসিং এখন বাড়ে গেছে"; } </script> </head> <body> <table id="t1"> <tr> <th>FRUITS</th> <th>PRICE </th> </tr> <tr> <td>MANGO </td> <td>40</td> </tr> <tr> <td>APPLE</td> <td>50</td> </tr> </table> <p>নিচের বাটনে ক্লিক করলে উপরের টেবিল বর্ডার স্পেসিং বাড়বে</p> <button onclick="IncreaseBorderSpacing()">বর্ডার স্পেসিং বাড়ান</button> <p id="Sample"></p> </body> </html>
আউটপুট
বর্ডার স্পেসিং বাড়ান বাটনে ক্লিক করলে:
