एचटीएमएल टेबल कोलग्रुप
<colgroup>
तत्व का उपयोग किसी तालिका के विशिष्ट स्तंभों को स्टाइल करने के लिए किया जाता है ।
एचटीएमएल टेबल कोलग्रुप
यदि आप किसी तालिका के पहले दो स्तंभों को स्टाइल करना चाहते हैं, तो <colgroup>
और <col>
तत्वों का उपयोग करें।
सोमवार | मंगल | बुध | इकट्ठा | शुक्र | बैठा | रवि |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 1 1 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
कॉलम विनिर्देशों के <colgroup>
लिए तत्व को कंटेनर के रूप में उपयोग किया जाना चाहिए।
प्रत्येक समूह को एक <col>
तत्व के साथ निर्दिष्ट किया जाता है।
विशेषता निर्दिष्ट करती है कि शैली प्राप्त करने वाले span
कितने कॉलम हैं।
style
विशेषता कॉलम देने के लिए शैली निर्दिष्ट करती है ।
नोट: colgroups के लिए कानूनी CSS संपत्तियों का बहुत सीमित चयन है ।
उदाहरण
<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>
कानूनी सीएसएस गुण
CSS गुणों का केवल एक बहुत ही सीमित चयन है जिसे कोलग्रुप में उपयोग करने की अनुमति है:
width
संपत्ति
visibility
संपत्ति
background
गुण
border
गुण
अन्य सभी CSS गुणों का आपकी तालिकाओं पर कोई प्रभाव नहीं पड़ेगा।
एकाधिक कर्नल तत्व
यदि आप विभिन्न शैलियों के साथ अधिक स्तंभों को स्टाइल करना चाहते हैं, तो
<col>
अंदर अधिक तत्वों का उपयोग करें
<colgroup>
:
उदाहरण
<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>
...
खाली कोलग्रुप
यदि आप किसी तालिका के बीच में स्तंभों को शैलीबद्ध करना चाहते हैं, तो
<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>
...
कॉलम छुपाएं
आप संपत्ति के साथ कॉलम छुपा सकते visibility: collapse
हैं:
उदाहरण
<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>
...