HTML DOM Column span प्रॉपर्टी

HTML DOM Column span प्रॉपर्टी HTML में <td> एलिमेंट के अंदर colspan एट्रिब्यूट से जुड़ी होती है। colSpan प्रॉपर्टी का उपयोग करके हम टेबल के colspan एट्रिब्यूट को सेट या वापस कर सकते हैं। colspan एट्रिब्यूट का उपयोग यह बनाने के लिए किया जाता है कि एक टेबल सेल कितने कॉलम तक फैलना चाहिए।

सिंटैक्स (Syntax)

colSpan प्रॉपर्टी सेट करने का सिंटैक्स:

tabledataObject.colSpan = number

यहां, number उन कॉलम्स की संख्या को दर्शाता है जिन तक टेबल को फैलना चाहिए।

उदाहरण (Example)

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>

आउटपुट (Output)

इससे निम्नलिखित आउटपुट प्राप्त होगा:

CHANGE पर क्लिक करने पर:

उपरोक्त उदाहरण में:

हमने एक टेबल ली जहां दूसरी पंक्ति से शुरू होने वाले पहले एलिमेंट्स यानी January और February का colspan 2 के बराबर है। यह टेबल को तीन पंक्तियों और तीन कॉलम वाला बनाता है। टेबल पर एक स्टाइल लागू किया गया है ताकि यह दूसरों से अलग दिखे:

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() मेथड का उपयोग करके दोनों <td> एलिमेंट्स को प्राप्त करता है और इंडेक्सिंग का उपयोग करके उन दोनों को एक्सेस करता है। यह फिर दोनों <td> एलिमेंट्स के colSpan एट्रिब्यूट वैल्यू को प्राप्त करता है और उन्हें 2 से 1 में बदल देता है:

var x = document.getElementsByClassName("TD1").length; function changeSpan() { for (var i = 0; i <= x; i++) { document.getElementsByClassName("TD1")[i].colSpan = "1"; } }