CSS टेबल
HTML पंक्तियों और कोशिकाओं का ग्रिड बनाता है। CSS तय करता है कि बॉर्डर साफ़ दिखें या नहीं, टेबल कितनी चौड़ी बैठे, सेल में टेक्स्ट कहाँ हो, और पंक्तियाँ आसानी से स्कैन हों या नहीं।
टेबल के लिए CSS टूलकिट
📊 एक नज़र में टेबल शैलियाँ
| प्रॉपर्टी | रोज़ का काम |
|---|---|
border-collapse |
सेल बॉर्डर मिलाएँ (collapse) या अलग रखें (separate) |
border-spacing |
बॉर्डर अलग होने पर कोशिकाओं के बीच गैप |
width |
टेबल चौड़ाई (अक्सर लेख/कार्ड में 100%) |
th/td पर padding |
सेल के अंदर साँस की जगह |
text-align / vertical-align |
सेल में क्षैतिज और ऊर्ध्वाधर संरेखण |
आमतौर पर table, th, td और कभी tr स्टाइल करें — हर सेल अलग-अलग नहीं — ताकि पूरा डेटा ग्रिड एक जैसा रहे।
बॉर्डर जो दोगुने न लगें
मदद के बिना पड़ोसी सेल बॉर्डर मोटे या डबल दिख सकते हैं। border-collapse: collapse उन्हें एक साफ़ रेखा में मिलाता है — डेटा टेबल का रोज़ विकल्प।
मिलाए गए टेबल बॉर्डर
csstable.data {
width: 100%;
border-collapse: collapse;
}
table.data th,
table.data td {
border: 1px solid #ccc;
padding: 0.5rem 0.75rem;
}अलग बॉर्डर और spacing
अगर कोशिकाओं के बीच दिखने वाला गैप चाहिए, border-collapse: separate और border-spacing लगाएँ। Collapse पर spacing अनदेखा होता है।
गैप वाली अलग कोशिकाएँ
csstable.cards {
border-collapse: separate;
border-spacing: 0.5rem;
}
table.cards td {
border: 1px solid #ddd;
padding: 0.75rem;
}चौड़ाई, हेडर और संरेखण
पूर्ण-चौड़ाई टेबल लेखों में अक्सर बेहतर पढ़ती है। हेडर उभारें, टेक्स्ट संरेखित करें, और सेल ऊँचाई अलग हो तो vertical-align उपयोग करें।
हेडर और सेल संरेखण
csstable.data th {
text-align: left;
background: #f5f5f5;
font-weight: 700;
}
table.data td {
text-align: left;
vertical-align: top;
}ज़ेबरा पंक्तियाँ और शांत hover
बारी-बारी पृष्ठभूमि चौड़ी टेबल स्कैन करने में मदद करती है। tr पर हल्का :hover सक्रिय पंक्ति दिखाता है बिना नीयन शोर के।
ज़ेबरा + पंक्ति hover
csstable.data tbody tr:nth-child(even) {
background: #fafafa;
}
table.data tbody tr:hover {
background: #eef5ff;
}शांत डेटा-टेबल आदत
बॉर्डर collapse करें, सेल को असली padding दें, हेडर कंट्रास्ट संयमित रखें, और ज़ेबरा/hover तभी जोड़ें जब चौड़ी टेबल को स्कैन मदद चाहिए।
पठनीय लेख टेबल
cssarticle table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}
article th,
article td {
border: 1px solid #e0e0e0;
padding: 0.6rem 0.8rem;
}खुद आज़माएँ
th/tdपरborder-collapse: collapseऔर हल्का बॉर्डर।- सेल में आरामदायक
padding। - हेडर बाएँ; बहु-पंक्ति सेल पर
vertical-align: top। - सम पंक्तियाँ
tr:nth-child(even)से ज़ेबरा। - नरम
tr:hover— फिर दूसरी टेबल औरborder-spacingसे तुलना।
आम गलतियाँ
- डिफ़ॉल्ट अलग बॉर्डर छोड़ना ताकि रेखाएँ डबल और गंदी लगें
border-collapse: collapseके साथborder-spacing(अनदेखा)- बहुत कम padding जिससे घना डेटा पढ़ना कठिन
- नीयन hover या भारी ज़ेबरा जो सामग्री से लड़े
- इस पाठ को
list-styleमार्कर से मिलाना (पिछला सत्र)
सारांश
- डेटा टेबल के लिए
border-collapse: collapseशांत डिफ़ॉल्ट है - कोशिकाओं के बीच गैप के लिए
separate+border-spacing - चौड़ाई, padding और संरेखण पठनीयता बनाते हैं
- ज़ेबरा और हल्का hover स्कैन में मदद करते हैं
- संरचना HTML में; दिखावट CSS में
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी