HTML DOM Column span প্রপার্টি HTML-এ <td> এলিমেন্টের ভিতরে colspan অ্যাট্রিবিউটের সাথে সম্পর্কিত। colSpan প্রপার্টি ব্যবহার করে আমরা একটি টেবিলের colspan অ্যাট্রিবিউট সেট বা রিটার্ন করতে পারি। colspan অ্যাট্রিবিউট ব্যবহার করা হয় একটি টেবিল কতগুলো কলাম স্প্যান করবে তা তৈরি করতে।
সিনট্যাক্স
নিচে দেওয়া হলো -
tabledataObject.colSpan = number
এখানে, number টেবিল কতগুলো কলাম স্প্যান করবে তা রিপ্রেজেন্ট করে।
উদাহরণ
colSpan প্রপার্টির একটি উদাহরণ দেখি -
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid blue; } </style> </head> <body> <h2>Monthly Savings</h2> <table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td class="TD1" colspan="2">January</td> <td>$100</td> </tr> <tr> <td class="TD1" colspan="2">February</td> <td>$100</td> </tr> </table> <br> <button onclick="changeSpan()">CHANGE</button> <script> var x = document.getElementsByClassName("TD1").length; function changeSpan() { for(var i=0; i<=x; i++){ document.getElementsByClassName("TD1")[i].colSpan = "1"; } } </script> </body> </html>
আউটপুট
এটি নিচের আউটপুট তৈরি করবে -
CHANGE-এ ক্লিক করলে -
উপরের উদাহরণে -
আমরা একটি টেবিল নিলাম যেখানে দ্বিতীয় রো থেকে শুরু করে প্রথম এলিমেন্টগুলো অর্থাৎ January এবং February-র colspan बरাবর ২। এটি টেবিলকে তিন রো এবং তিন কলাম বানাইছে। টেবিলের একটি স্টাইল রয়েছে যাতে এটি অন্যদের থেকে আলাদা দেখা যায় -
table, th, td { border: 1px solid blue; } <table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td class="TD1" colspan="2">January</td> <td>$100</td> </tr> <tr> <td class="TD1" colspan="2">February</td> <td>$100</td> </tr> </table>
তারপর আমরা CHANGE বাটন তৈরি করেছি যা ইউজার ক্লিক করলে changeSpan() মেথড এক্সিকিউট করবে -
<button onclick="changeSpan()">CHANGE</button>
changeSpan() মেথড getElementsByClassName() মেথড ব্যবহার করে ডকুমেন্ট অবজেক্টের উভয় <div> এলিমেন্ট পায় এবং ইন্ডেক্সিং ব্যবহার করে উভয়ে অ্যাক্সেস করে। তারপর উভয় <div> এলিমেন্টের colSpan অ্যাট্রিবিউট ভ্যালু পেয়ে সেগুলো ২ থেকে ১-এ পরিবর্তন করে -
var x = document.getElementsByClassName("TD1").length; function changeSpan() { for(var i=0; i<=x; i++){ document.getElementsByClassName("TD1")[i].colSpan = "1"; } }
