HTML DOM ColumnGroup span प्रॉपर्टी HTML <colgroup> एलिमेंट के span एट्रिब्यूट से जुड़ी होती है। ColumnGroup span प्रॉपर्टी कॉलम ग्रुप के span एट्रिब्यूट की वैल्यू को सेट या वापस करती है। span एट्रिब्यूट का उपयोग यह परिभाषित करने के लिए किया जाता है कि <colgroup> एलिमेंट को कितने कॉलम तक फैलना चाहिए।
सिंटैक्स (Syntax)
ColumnGroup span प्रॉपर्टी सेट करने का सिंटैक्स:
columngroupObject.span = number
यहां, number उन कॉलम्स की संख्या निर्दिष्ट करता है जिन तक <colgroup> एलिमेंट को फैलना चाहिए।
उदाहरण (Example)
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>आउटपुट (Output)
इससे निम्नलिखित आउटपुट प्राप्त होगा:
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 को 2 पर सेट करता है और इसका बैकग्राउंड कलर हरा बदल देता है। यह <colgroup> एलिमेंट के span एट्रिब्यूट द्वारा निर्दिष्ट अनुसार बाएं से पहले दो कॉलम को हरा कर देता है:
function changeColor() { document.getElementById("Colgroup1").span = "2"; document.getElementById("Colgroup1").style.backgroundColor = "lightgreen"; }
