HTML DOM ColumnGroup span প্রপার্টি HTML <colgroup> এলিমেন্টের span অ্যাট্রিবিউটের সাথে সম্পর্কিত। ColumnGroup span প্রপার্টি একটি কলাম গ্রুপের span অ্যাট্রিবিউটের ভ্যালু সেট বা রিটার্ন করে। span অ্যাট্রিবিউট ব্যবহার করা হয় <colgroup> এলিমেন্ট কতগুলো কলাম স্প্যান করবে তা সংজ্ঞায়িত করতে।
সিনট্যাক্স
নিচে দেওয়া হলো -
ColumnGroup span প্রপার্টি সেট করার সিনট্যাক্স -
columngroupObject.span = number
এখানে, number নির্দিষ্ট করে <colgroup> এলিমেন্ট কতগুলো কলাম স্প্যান করবে।
উদাহরণ
ColumnGroup span প্রপার্টির একটি উদাহরণ দেখি -
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid blue; } </style> </head> <body> <table> <colgroup id="Colgroup1"></colgroup> <tr> <th>Fruit</th> <th>COLOR</th> <th>Price</th> </tr> <tr> <td>watermelon</td> <td>dark green</td> <td>40Rs</td> </tr> <tr> <td>papaya</td> <td>yellow</td> <td>30Rs</td> </tr> </table> <p>নিচের বাটনে ক্লিক করুন প্রথম দুটি কলামের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে। <button onclick="changeColor()">CHANGE</button> <script> function changeColor() { document.getElementById("Colgroup1").span = "2"; document.getElementById("Colgroup1").style.backgroundColor = "lightgreen"; } </script> </body> </html>
আউটপুট
এটি নিচের আউটপুট তৈরি করবে -
CHANGE বাটনে ক্লিক করলে -
উপরের উদাহরণে -
আমরা তিনটি কলাম ও দুটি রো সহ একটি টেবিল তৈরি করেছি। টেবিল, th এবং td এলিমেন্টগুলোর কিছু স্টাইলিংও রয়েছে -
table, th, td { border: 1px solid blue; } <table> <colgroup id="Colgroup1"></colgroup> <tr> <th>Fruit</th> <th>COLOR</th> <th>Price</th> </tr> <tr> <td>watermelon</td> <td>dark green</td> <td>40Rs</td> </tr> <tr> <td>papaya</td> <td>yellow</td> <td>30Rs</td> </tr> </table>
তারপর আমরা একটি CHANGE বাটন তৈরি করেছি যা ইউজার ক্লিক করলে changeColor() মেথড এক্সিকিউট করবে।
<button onclick="changeColor()">CHANGE</button>
changeColor() ফাংশন getElementById() মেথড ব্যবহার করে <colgroup> এলিমেন্টটি পেয়ে <colgroup> এলিমেন্টের আইডি প্যারামিটার হিসেবে দিয়ে। এরপর <colgroup> এলিমেন্টের span ২ সেট করে এবং এর ব্যাকগ্রাউন্ড রঙ গ্রিন করে। এটি বাম দিক থেকে প্রথম দুটি কলামকে গ্রিন করে যেহেতু <colgroup> এলিমেন্টের span অ্যাট্রিবিউটে ২ স্পেসিফাই করা হয়েছে: -
function changeColor() { document.getElementById("Colgroup1").span = "2"; document.getElementById("Colgroup1").style.backgroundColor = "lightgreen"; }
