HTML DOM Column অবজেক্ট

HTML DOM Column অবজেক্টটি HTML <col> এলিমেন্টের সাথে সম্পর্কিত। Column অবজেক্টটি <col> এলিমেন্টের প্রপার্টিগুলো পাওয়া বা সেট করতে ব্যবহৃত হয়। <col> ট্যাগ শুধু <table> এলিমেন্টের ভিতরে ব্যবহৃত হয়।

প্রপার্টি

Column অবজেক্টের প্রপার্টি নিচে দেওয়া হলো -

সিনট্যাক্স

নিচে দেওয়া হলো -

Column অবজেক্ট তৈরি করার সিনট্যাক্স -

var a = document.createElement("COL");

উদাহরণ

Column অবজেক্টের একটি উদাহরণ দেখি -

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid blue; } #Col1{ background-color:pink; } </style> </head> <body> <h3>COL OBJECT</h3> <table> <colgroup> <col id="Col1" span="2"> <col style="background-color:lightgreen"> </colgroup> <tr> <th>Fruit</th> <th>Color</th> <th>Price</th> </tr> <tr> <td>Mango</td> <td>Yellow</td> <td>100Rs</td> </tr> <tr> <td>Guava</td> <td>Green</td> <td>50Rs</td> </tr> </table> <p>নিচের বাটনে ক্লিক করুন "COL1" col এলিমেন্টের span পাওয়ার জন্য</p> <button onclick="colObj()">COLUMN</button> <p id="Sample"></p> <script> function colObj() { var x = document.getElementById("Col1").span; document.getElementById("Sample").innerHTML = "The Col1 element has span= "+x; } </script> </body> </html>

আউটপুট

এটি নিচের আউটপুট তৈরি করবে -

COLUMN বাটনে ক্লিক করলে -

উপরের উদাহরণে আমরা ২ রো ও ৩ কলাম সহ একটি টেবিল তৈরি করেছি। টেবিল সামগ্রিকভাবে একটি স্টাইল অ্যাপ্লাই করা রয়েছে। টেবিলের ভিতরে দুটি <col> এলিমেন্ট রয়েছে যেন একটিতে span बरাবর ২ এবং অন্যটিতে একটি ইনলাইন স্টাইল অ্যাপ্লাই করা রয়েছে। যেহেতু প্রথম <col>-এর জন্য span बरাবর ২, এর স্টাইল ঠিক দুটি কলামে অ্যাপ্লাই হবে এবং দ্বিতীয় <col>-এর স্টাইল বাকি কলামগুলোর ওপর অ্যাপ্লাই হবে -

table, th, td { border: 1px solid blue; } #Col1{ background-color:pink; } <table> <colgroup> <col id="Col1" span="2"> <col style="background-color:lightgreen"> </colgroup> <tr> <th>Fruit</th> <th>Color</th> <th>Price</th> </tr> <tr> <td>Mango</td> <td>Yellow</td> <td>100Rs</td> </tr> <tr> <td>Guava</td> <td>Green</td> <td>50Rs</td> </tr> </table>

তারপর আমরা একটি COLUMN বাটন তৈরি করেছি যা ইউজার ক্লিক করলে colObj() মেথড এক্সিকিউট করবে -

<button onclick="colObj()">COLUMN</button>

colObj() মেথড ডকুমেন্ট অবজেক্টের getElementById() মেথড ব্যবহার করে প্রথম <col> এলিমেন্টটি পায়। তারপর <col> এলিমেন্টের span অ্যাট্রিবিউট ভ্যালু পেয়ে ভেরিয়েবল x-এ অ্যাসাইন করে। ভেরিয়েবল x-এ স্টোর করা span অ্যাট্রিবিউট ভ্যালুটি "Sample" আইডি 가진 প্যারাগ্রাফে প্যারাগ্রাফের innerHTML প্রপার্টি ব্যবহার করে দেখানো হয়েছে -

function colObj() { var x = document.getElementById("Col1").span; document.getElementById("Sample").innerHTML = "The Col1 element has span= "+x; }