एचटीएमएल टेबल स्टाइलिंग
अपनी टेबल को बेहतर दिखाने के लिए CSS का उपयोग करें।
एचटीएमएल टेबल - ज़ेबरा स्ट्राइप्स
यदि आप हर दूसरी टेबल रो पर बैकग्राउंड कलर जोड़ते हैं, तो आपको एक अच्छा ज़ेबरा स्ट्राइप्स इफेक्ट मिलेगा।
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 1 1 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
प्रत्येक अन्य तालिका पंक्ति तत्व को स्टाइल करने के लिए, :nth-child(even)
इस तरह चयनकर्ता का उपयोग करें:
उदाहरण
tr:nth-child(even) {
background-color: #D6EEEE;
}
नोट: यदि आप (odd)के बजाय उपयोग करते हैं
(even), तो स्टाइल 2,4,6 आदि के बजाय पंक्ति 1,3,5 आदि पर होगा।
HTML तालिका - लंबवत ज़ेबरा धारियाँ
लंबवत ज़ेबरा पट्टियां बनाने के लिए, हर दूसरी पंक्ति के बजाय हर दूसरे कॉलम को स्टाइल करें ।
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 1 1 | 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() यदि आप दोनों हेडर और नियमित टेबल सेल पर स्टाइल रखना चाहते हैं, तो चयनकर्ता को दोनों thऔर td
तत्वों पर रखें ।
लंबवत और क्षैतिज ज़ेबरा धारियों को मिलाएं
आप ऊपर दिए गए दो उदाहरणों से स्टाइल को जोड़ सकते हैं और आपके पास हर दूसरी पंक्ति और हर दूसरे कॉलम पर धारियां होंगी।
यदि आप एक पारदर्शी रंग का उपयोग करते हैं तो आपको एक अतिव्यापी प्रभाव मिलेगा।
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);
}
क्षैतिज डिवाइडर
| पहला नाम | अंतिम नाम | बचत |
|---|---|---|
| पीटर | दौड़ के लिये कभी भी न उतारा गया घोड़ा | $100 |
| लोइस | दौड़ के लिये कभी भी न उतारा गया घोड़ा | $150 |
| जो | स्वानसन | $300 |
यदि आप केवल प्रत्येक तालिका पंक्ति के निचले भाग में सीमाएँ निर्दिष्ट करते हैं, तो आपके पास क्षैतिज विभाजकों वाली एक तालिका होगी।
border-bottomक्षैतिज विभाजक प्राप्त करने के लिए सभी
trतत्वों में गुण जोड़ें :
उदाहरण
tr {
border-bottom: 1px solid #ddd;
}
होवरेबल टेबल
माउस पर तालिका पंक्तियों को हाइलाइट करने के लिए :hoverचयनकर्ता
का उपयोग करें :tr
| पहला नाम | अंतिम नाम | बचत |
|---|---|---|
| पीटर | दौड़ के लिये कभी भी न उतारा गया घोड़ा | $100 |
| लोइस | दौड़ के लिये कभी भी न उतारा गया घोड़ा | $150 |
| जो | स्वानसन | $300 |
उदाहरण
tr:hover {background-color: #D6EEEE;}