HTML तालिका स्टाइलिंग
अपनी तालिकाओं को बेहतर दिखाने के लिए CSS का उपयोग करें।
HTML तालिका - ज़ेबरा धारियाँ
यदि आप हर दूसरी तालिका पंक्ति में पृष्ठभूमि रंग जोड़ते हैं, तो आपको एक अच्छा ज़ेबरा धारियों का प्रभाव मिलता है।
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
प्रत्येक अन्य तालिका पंक्ति तत्व को स्टाइल करने के लिए, :nth-child(even) चयनकर्ता का उपयोग इस प्रकार करें:
उदाहरण
tr:nth-child(even) {
background-color: #D6EEEE;
}नोट:
यदि आप (सम) के स्थान पर (विषम) का उपयोग करते हैं, तो स्वरूपण क्रम 2,4,6 आदि के बजाय क्रम 1,3,5 आदि में होगा।
HTML तालिका - लंबवत ज़ेबरा रेखाएँ
ऊर्ध्वाधर ज़ेबरा धारियाँ बनाने के लिए, हर दूसरी पंक्ति के बजाय हर दूसरे कॉलम को स्टाइल करें।
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
:nth-child(even) को तालिका डेटा तत्वों पर इस प्रकार सेट करें:
उदाहरण
td:nth-child(even), th:nth-child(even) {
background-color: #D6EEEE;
}नोट:
यदि आप हेडर और सामान्य टेबल सेल दोनों में स्टाइल रखना चाहते हैं, तो वें और टीडी दोनों तत्वों पर :nth-child() चयनकर्ता रखें।
ऊर्ध्वाधर और क्षैतिज ज़ेबरा लाइनों को जोड़ना
आइए उपरोक्त दो उदाहरणों से स्टाइल को संयोजित करें और हर दूसरी पंक्ति और हर दूसरे कॉलम में डैश रखें।
यदि आप पारदर्शी रंग का उपयोग करते हैं, तो आपको एक ओवरलैपिंग प्रभाव मिलेगा।
किसी रंग की पारदर्शिता निर्दिष्ट करने के लिए rgba() रंग का उपयोग करें:
उदाहरण
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}क्षैतिज विभाजक
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
यदि आप केवल प्रत्येक तालिका पंक्ति के नीचे सीमाएँ निर्दिष्ट करते हैं, तो आपको क्षैतिज विभाजकों वाली एक तालिका मिलती है।
क्षैतिज विभाजक प्राप्त करने के लिए सभी tr तत्वों में बॉर्डर-बॉटम विशेषता जोड़ें:
उदाहरण
tr {
border-bottom: 1px solid #ddd;
}घूमने योग्य मेज
होवर पर तालिका पंक्तियों को प्राथमिकता देने के लिए tr में :hover चयनकर्ता का उपयोग करें:
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
(ऊपर की पंक्तियों पर माउस ले जाएँ)
उदाहरण
tr:hover {background-color: #D6EEEE;}