HTML Table Colgroup

HTML तालिका कॉलग्रुप

HTML तालिका कॉलग्रुप

<colgroup> तत्व का उपयोग तालिका के विशिष्ट कॉलमों को स्टाइल करने के लिए किया जाता है।

HTML तालिका कॉलग्रुप

यदि आप तालिका के पहले दो कॉलमों को स्टाइल करना चाहते हैं, तो <colgroup> और <col> तत्वों का उपयोग करें।

MON TUE WED THU FRI SAT SUN
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28

<colgroup> तत्व का उपयोग कॉलम एनोटेशन के लिए एक कंटेनर के रूप में किया जाना चाहिए।

प्रत्येक समूह को <col> तत्व द्वारा दर्शाया जाता है।

स्पैन विशेषता इंगित करती है कि कितने कॉलम शैली प्राप्त करते हैं।

शैली विशेषता स्तंभों को देने के लिए शैली निर्दिष्ट करती है।

उदाहरण

<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...

📝नोट:

<colgroup> टैग को <table> तत्व का एक बच्चा होना चाहिए और इसे किसी अन्य तालिका तत्व, जैसे <thead>, <tr>, <td> से पहले रखा जाना चाहिए, लेकिन <caption> तत्व, यदि कोई हो, के बाद रखा जाना चाहिए।

कानूनी सीएसएस गुण

कॉलग्रुप में सीएसएस गुणों का बहुत सीमित चयन है जिनका उपयोग करने की अनुमति है:

अन्य सभी सीएसएस गुणों का आपकी तालिकाओं पर कोई प्रभाव नहीं पड़ता है।

एकाधिक पैर के अंग

यदि आप विभिन्न शैलियों के साथ एकाधिक कॉलम को स्टाइल करना चाहते हैं, तो <colgroup> के अंदर एक से अधिक <col> तत्व का उपयोग करें:

उदाहरण

<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
    <col span="3" style="background-color: pink">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...
MON TUE WED THU FRI SAT SUN
1 2 3 4 5 6 7

नंगे पैर

यदि आप तालिका के मध्य में कॉलम को स्टाइल करना चाहते हैं, तो पहले कॉलम के लिए एक "खाली" <col> तत्व (शैलियों के बिना) डालें:

उदाहरण

<table>
  <colgroup>
    <col span="3">
    <col span="2" style="background-color: pink">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...
MON TUE WED THU FRI SAT SUN
1 2 3 4 5 6 7

स्तंभ छिपाना

कॉलम को दृश्यता: पतन विशेषता के साथ छुपाया जा सकता है:

उदाहरण

<table>
  <colgroup>
    <col span="2">
    <col span="3" style="visibility: collapse">
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
...
MON TUE WED THU FRI SAT SUN
1 2 3 4 5 6 7

(तीन कॉलम छिपे हुए)