आज इस आर्टिकल में हम आपको Table की स्टाइलिंग के बारे में बताएंगे कि कैसे आप CSS की मदद से टेबल की स्पेलिंग कर सकते हैं, HTML के टुटोरिअल में हमने आपको बताया था कि किस प्रकार आप एक Table बना सकते हैं और उसमें अलग-अलग कॉलम और अलग-अलग Row Create कर सकते हैं. CSS Table Tutorial in Hindi – Part 15
इस आर्टिकल में हम आपको किसी भी Table को color देने, बॉर्डर देने और उसके width और height को specify करने के बारे में बताएंगे कि किस प्रकार आप इन सब चीजों का इस्तेमाल किसी भी Table को टारगेट करने के लिए कर सकते हैं.
Table Border
Table के बॉर्डर को स्पेसिफिक करने के लिए हम Table के सभी एक को सेलेक्ट करेंगे
उसके बाद में हम बॉर्डर प्रॉपर्टी का यूज़ करते हुए Table के बॉर्डर का साइज प्रकार
और उसका कलर स्पेशल भाई करेंगे जिस प्रकार आपको कोड नीचे दिखाया गया है.
Example
table, th, td {
border: 1px solid black;
}
Collapse Table Border
border-collapse प्रॉपर्टी का यूज करके हम किसी भी Border को एक सिंगल बॉर्डर में कन्वर्ट कर सकते हैं, क्योंकि ऊपर की प्रॉपर्टी में जब हम यूज करते हैं, तो हमारे Table के चारों तरफ डबल बॉर्डर बन जाता है, जिसको collapse करने के लिए हम border-collapse प्रॉपर्टी का यूज़ करते हैं और इसके जो वैल्यू है वह हम आपको नीचे बता रहे हैं कि किस-किस वैल्यू का इस्तेमाल कर सकते हैं.
Example
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
Table Width & Height
HTML में बनाई गई किसी भी Table की Width तो और Height को specify करने
के लिए हमें Width और Height प्रॉपर्टी का यूज़ करना होता है.
इसकी वैल्यू में हम % या फिर px में इसका साइज दे सकते हैं.
Example
table {
width: 100%;
}
th {
height: 50px;
}
Horizontal Alignment
अगर हमें किसी टेबल में दिए गए कंटेंट को Horizontal Alignment करना है तो इसके लिए हम text-align का इस्तेमाल कर सकते हैं, जैसा कि हम नॉर्मल दूसरे टैग में यूज कर रहे हैं, left, right और center प्रॉपर्टी वैल्यू का इस्तेमाल करके हम किसी भी टेक्स्ट को Horizontal Alignment कर सकते हैं.
Example
th {
text-align: left;
}
Vertical Alignment
किसी भी कंटेंट को टेबल के अंदर Vertical Alignment करने के लिए हम vertical-align प्रॉपर्टी का इस्तेमाल करते हैं और इसमें हम top, bottom और middle वैल्यू का इस्तेमाल करके किसी भी कंटेंट को 1 cell के अंदर सबसे ऊपर, बीच में या सबसे नीचे Align कर सकते हैं जिसको हम vertical-align कह सकते हैं.
Example
td {
height: 50px;
vertical-align: bottom;
}
Table Padding
किसी भी सेल के अंदर अगर हमें सही मात्रा में स्पेस चाहिए हो तो हम Padding protperty का इस्तेमाल करते हैं, जो कि हम दूसरे tag के अंदर पीछे के tutorials भी यूज़ किया था और Padding का आर्टिकल आप आगे दिए गए लिंक से भी चेक कर सकते हैं. Link
Example
th, td {
padding: 15px;
text-align: left;
}
Conclusion
तो इस आर्टिकल में हमने आपको टेबल की styling के बारे में बताया है, अगर आपको इसके बारे में कुछ और जानना है, तो आप नीचे कमेंट करके हमसे पूछ सकते हैं. अगर आपको इसमें कोई समस्या का सामना करना पड़ रहा है या आपको कोडिंग में कोई समस्या का सामना करना पड़ रहा है, तो आप बेझिझक होकर हमारे आर्टिकल के नीचे दिए गए कमेंट बॉक्स में कमेंट करके हमसे पूछ सकते हैं. हम आपकी मदद जल्दी से जल्दी करेंगे.
CSS Display Property Tutorials in Hindi – Part 16>>>>>>>>
इसे भी पढ़े – NEET रिजल्ट चेक कैसे करे?
