HTML DOM captionSide প্রপার্টি টেবিল ক্যাপশনের পজিশন পাওয়া বা সেট করার জন্য ব্যবহৃত হয়। টেবিল ক্যাপশন শুধু ভার্টিক্যাল পজিশনে সেট করা যায় অর্থাৎ top এবং bottom।
সিনট্যাক্স
captionSide প্রপার্টি সেট করার সিনট্যাক্স:
object.style.captionSide = "top|bottom|initial|inherit"
প্রপার্টি মানগুলো নিচে ব্যাখ্যা করা হলো:
| মান | বিবরণ |
|---|---|
| top | টেবিল ক্যাপশন টেবিলের উপরে পজিশন করার জন্য। এটি ডিফল্ট মান। |
| bottom | টেবিল ক্যাপশন টেবিলের নিচে পজিশন করার জন্য। |
| initial | প্রপার্টিকে ডিফল্ট মানে সেট করার জন্য। |
| inherit | পিতামাতা এলিমেন্ট থেকে মান উত্তরাধিকার সূত্রে পাওয়ার জন্য। |
উদাহরণ
<!DOCTYPE html> <html> <head> <style> #t1{ caption-side: bottom; border: 2px dashed black; } td { border: 2px solid blue; } caption { font-size: 24px; font-weight: bold; } </style> <script> function changeCaptionPosition(){ document.getElementById("t1").style.captionSide="top"; document.getElementById("Sample").innerHTML="ক্যাপশন সাইড এখন top-এ পরিবর্তিত হয়েছে"; } </script> </head> <body> <table id="t1"> <caption>Demo Caption</caption> <tr> <th>demo head</th> <th>demo head</th> </tr> <tr> <td>there goes my data..</td> <td>there goes my..</td> </tr> <tr> <td>there goes my data..</td> <td>there goes my..</td> </tr> </table> <p>নিচের বাটনে ক্লিক করলে উপরের টেবিল ক্যাপশন পজিশন পরিবর্তন হবে</p> <button onclick="changeCaptionPosition()">ক্যাপশন পজিশন পরিবর্তন করুন</button> <p id="Sample"></p> </body> </html>
আউটপুট
ক্যাপশন পজিশন পরিবর্তন করুন বাটনে ক্লিক করলে:
