सीएसएस के साथ ज़ेबरा स्ट्राइप टेबल्स कैसे बनाएं

का प्रयोग: nth-of-type (n) टेबल्स के साथ

तालिकाओं को पढ़ने में आसान बनाने के लिए, वैकल्पिक पृष्ठभूमि रंगों के साथ पंक्तियों को शैली में अक्सर मददगार होता है। स्टाइल टेबल के सबसे आम तरीकों में से एक है हर दूसरी पंक्ति के पृष्ठभूमि रंग को सेट करना। इसे अक्सर "ज़ेबरा पट्टियों" के रूप में जाना जाता है।

आप इसे पूरा कर सकते हैं प्रत्येक दूसरी पंक्ति को एक सीएसएस कक्षा के साथ सेट करके और फिर उस वर्ग के लिए शैली को परिभाषित कर सकते हैं। यह काम करता है लेकिन इसके बारे में जाने का सबसे अच्छा या सबसे प्रभावी तरीका नहीं है।

इस विधि का उपयोग करते समय, हर बार आपको उस तालिका को संपादित करने की आवश्यकता होती है, आपको यह सुनिश्चित करने के लिए तालिका में प्रत्येक पंक्ति को संपादित करना पड़ सकता है कि प्रत्येक पंक्ति परिवर्तनों के अनुरूप हो। उदाहरण के लिए, यदि आप अपनी तालिका में एक नई पंक्ति डालते हैं, तो नीचे की हर दूसरी पंक्ति में कक्षा बदलनी होगी।

सीएसएस ज़ेबरा पट्टियों के साथ टेबल स्टाइल करना आसान बनाता है। आपको कोई अतिरिक्त HTML विशेषताएँ या सीएसएस कक्षाएं जोड़ने की आवश्यकता नहीं है, आप बस: nth-of-type (n) CSS चयनकर्ता का उपयोग करें

: Nth-of-type (n) चयनकर्ता सीएसएस में एक संरचनात्मक छद्म वर्ग है जो आपको माता-पिता और भाई तत्वों के संबंधों के आधार पर शैली तत्वों की अनुमति देता है। आप इसका उपयोग अपने स्रोत आदेश के आधार पर एक या अधिक तत्वों का चयन करने के लिए कर सकते हैं। दूसरे शब्दों में, यह प्रत्येक तत्व से मेल खा सकता है जो किसी विशेष प्रकार के माता-पिता के nth बच्चे है।

अक्षर एन एक कीवर्ड (जैसे अजीब या यहां तक ​​कि), एक संख्या, या एक सूत्र हो सकता है।

उदाहरण के लिए, पीले रंग के पृष्ठभूमि के साथ हर दूसरे पैराग्राफ टैग को स्टाइल करने के लिए, आपके सीएसएस दस्तावेज़ में निम्न शामिल होंगे:

पी: nth-of-type (विषम) {
पृष्ठभूमि: पीला;
}

अपनी एचटीएमएल टेबल से शुरू करें

सबसे पहले, अपनी तालिका बनाएं क्योंकि आप इसे सामान्य रूप से HTML में लिखेंगे। पंक्तियों या स्तंभों में कोई विशेष कक्षाएं न जोड़ें।

अपनी स्टाइलशीट में, निम्न सीएसएस जोड़ें:

tr: nth-of-type (विषम) {
पृष्ठभूमि का रंग: #ccc;
}

यह पहली पंक्ति से शुरू होने वाली भूरे रंग के रंग के साथ हर दूसरी पंक्ति को स्टाइल करेगा।

उसी तरह स्टाइल वैकल्पिक कॉलम

आप अपनी टेबल में कॉलम के लिए एक ही तरह की स्टाइल कर सकते हैं। ऐसा करने के लिए, बस अपनी सीएसएस कक्षा में टी को टीडी में बदलें। उदाहरण के लिए:

टीडी: एनटी-ऑफ-टाइप (विषम) {
पृष्ठभूमि का रंग: #ccc;
}

एक nth-of-type (n) चयनकर्ता में सूत्रों का उपयोग करना

चयनकर्ता में प्रयुक्त सूत्र के लिए वाक्यविन्यास एक + बी है।

उदाहरण के लिए, यदि आप प्रत्येक तीसरी पंक्ति के लिए पृष्ठभूमि रंग सेट करना चाहते हैं, तो आपका सूत्र 3 एन + 0 होगा। आपका सीएसएस इस तरह दिख सकता है:

tr: nth-of-type (3n + 0) {
पृष्ठभूमि: slategray;
}

Nth-of-type चयनकर्ता का उपयोग करने के लिए सहायक उपकरण

यदि आप छद्म-वर्ग एनएचटी-प्रकार के चयनकर्ता का उपयोग करने के सूत्र पहलू से थोड़ा परेशान महसूस कर रहे हैं, तो nth परीक्षक साइट को एक उपयोगी टूल के रूप में आज़माएं जो आपको इच्छित रूप को प्राप्त करने के लिए वाक्यविन्यास को परिभाषित करने में आपकी सहायता कर सके। एनटी-ऑफ-टाइप का चयन करने के लिए ड्रॉपडाउन मेनू का उपयोग करें (आप यहां अन्य छद्म-वर्गों के साथ भी प्रयोग कर सकते हैं, जैसे कि एनएच-बच्चे)।