HTML DOM ColumnGroup অবজেক্ট

HTML DOM ColumnGroup অবজেক্টটি HTML <colgroup> এলিমেন্টের সাথে সম্পর্কিত। <colgroup> এলিমেন্টটি একটি নির্দিষ্ট সংখ্যক কলাম বা সকল কলামে CSS স্টাইল অ্যাপ্লাই করতে ব্যবহৃত হয়। এটি টেবিলে উপস্থিত কলামগুলোর ওপর আরও বেশি কন্ট্রোল দেয়।

প্রপার্টি

ColumnGroup প্রপার্টি নিচে দেওয়া হলো -

সিনট্যাক্স

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

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

var x = document.createElement("COLGROUP");

উদাহরণ

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

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } #DIV1{ background-color:pink; } </style> </head> <body> <table id="TABLE1"> <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>নিচের বাটনে ক্লিক করুন span = 2 সহ একটি colgroup এলিমেন্ট তৈরি করতে।</p> <button onclick="colFun()">COLGROUP</button> <script> function colFun() { var x = document.createElement("COLGROUP"); x.setAttribute("id","DIV1"); x.setAttribute("span","2"); document.getElementById("TABLE1").appendChild(x); } </script> </body> </html>

আউটপুট

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

COLGROUP-এ ক্লিক করলে -

উপরের উদাহরণে -

আমরা প্রথমে তিনটি রো ও তিনটি কলাম সহ একটি টেবিল তৈরি করেছি "TABLE 1" আইডি দিয়ে। আমরা টেবিল এবং এর চাইল্ড এলিমেন্টগুলোর কিছু স্টাইলও অ্যাপ্লাই করেছি -

table, th, td { border: 1px solid black; } <table id="TABLE1"> <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>

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

<button onclick="colFun()">COLGROUP</button>

colFun() মেথড একটি <colgroup> এলিমেন্ট তৈরি করে এবং ভেরিয়েবল x-এ অ্যাসাইন করে। setAttribute() মেথড ব্যবহার করে নতুন তৈরি <colgroup> এলিমেন্টে একটি আইডি এবং span बरাবর ২ অ্যাসাইন করি। তারপর <colgroup> এলিমেন্টটি টেবিলের প্রথম চাইল্ড হিসেবে appendChild() মেথড ব্যবহার করে <table> এলিমেন্টে অ্যাপেন্ড করি -

function colFun() { var x = document.createElement("COLGROUP"); x.setAttribute("id","DIV1"); x.setAttribute("span","2"); document.getElementById("TABLE1").appendChild(x); }