 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में आपका स्वागत है। आज हम लेसन ४१ सीखनेवाले हैं।
पिछले लेसन में हम ने CSS pseudo-elements के बारे में सीखा।
आज हम CSS प्रॉपर्टीज का उपयोग करके टेबल को स्टाइल देना सीखेंगे।
CSS styles to tables
हम CSS प्रॉपर्टीज से टेबल को अलग अलग तरह स्टाइल्स दे सकते हैं। हम टेबल्स को बॉर्डर्स दे सकते हैं, background-color दे सकते हैं, टेक्स्ट का कलर बता सकते हैं। हम CSS की प्रॉपर्टीज का उपयोग करके टेबल को ऐसी अलग अलग स्टाइल्स दे सकते हैं। हम styling पूरे टेबल के लिए कर सकते हैं, हर एक row के लिए कर सकते हैं, या data level के level पर भी दे सकते हैं। हम ने इन स्टाइल्स को इस से पहले दुसरे lessons में देखा हैं। आज हम इनको एक टेबल को apply करेंगे।
आइये शुरू करते हैं। एक नयी Notepad file ओपन कीजिये। इस में lesson-16 का कोड कॉपी कीजिये। आप हमारे PDF फाइल से यह कोड कॉपी कर सकते हैं। हम इस टेबल को CSS styles देंगे। इसके लिए कोड ऐसा रहेगा।
th, td {
background-color: blue;
color: yellow;
font-size: 1.5vw;
border: 0.5vw solid red;
padding: 1vw;
}
यह स्टाइल column के headings में और हर एक row में आ जाएगी।
टेबल के level पर यह स्टाइल दीजिये।
table {
caption-side: bottom;
border-collapse: collapse;
border: 1vw dashed green;
}
CSS caption-side property
CSS caption-side property से यह बताते हैं की caption कहाँ डिस्प्ले होना चाहिए। अगर यह प्रॉपर्टी नहीं दी तो caption टेबल के ऊपर डिस्प्ले होता है। यह default है।
अगर caption-side: bottom देते हैं तो caption टेबल के निचे डिस्प्ले होता है।
CSS border-collapse property
इस प्रॉपर्टी से यह बता सकते हैं की बॉर्डर्स कैसी डिस्प्ले हो। इस प्रॉपर्टी की दो values होती हैं - collapse and separate।
अगर border-collapse: collapse देते हैं तो दो rows की बॉर्डर्स जुड़ जाती हैं और दो rows में एक ही बॉर्डर दिखती है। अगर हमने border-collapse: separate दिया तो दो बॉर्डर्स अलग अलग डिस्प्ले होती है। हम ने हमारे टेबल के स्टाइल में border-collapse: collapse दिया है इस ले दो rows के बीच में एक ही लाइन डिस्प्ले होगी। आप हमारा यह आउटपुट देखने के बाद border-collapse: separate दीजिये और डिस्प्ले देखिये। हमने हमारे टेबल को बॉर्डर दी है -
border: 10px dashed green;
हमारे फाइल को "Lesson-41" और "Lesson-41.html" के नाम से save कीजिये।
 |
| आकृति ४१-१. CSS styling tables |
HTML फाइल को डबल क्लिक कीजिये और आउटपुट देखिये।
 |
| आकृति ४१-२. CSS styling tables |
यह आउटपुट नए वेब पेज में देखने के लिए ऊपर डिस्प्ले की हुई आकृति पर क्लिक कीजिये।
हम ने दी हुई स्टाइल्स आउटपुट में आयी है।
Other CSS properties for tables
हम टेबल के लिए height और width दे सकते हैं। यह row के लिए दे सकते हैं या टेबल level पर दे सकते हैं।हम CSS text-align property का उपयोग कर सकते हैं। इससे हम टेक्स्ट को left, center या right को align कर सकते हैं।
ऐसे ही vertical-align property का उपयोग करके हम टेक्स्ट को top, center या bottom में डिस्प्ले कर सकते हैं।
हम टेबल के लिए horizontal scroll bar डिस्प्ले कर सकते हैं। अगर टेबल बड़ा हो तो इसका उपयोग होता है। इस के लिए एक container element लगता है जैसे
<div style="overflow-x:auto;">।
हम hover दे सकते हैं। हम ने hover का उपयोग "styling hyperlinks" के lesson में किया है। Lesson-26 देखिए। टेबल के स्टाइल में hover देने से हम जब mouse को किसी "td" par ले जायेंगे तब वह data highlight हो जाएगा (जैसे कलर change होना)। इसको ऐसा लिखा जाता है -
td:hover {
color: red;
background-color: yellow;
font-size: 3vw;
font-weight: bold;
}
 |
| आकृति ४१-३. CSS table style - hover |
 |
| आकृति ४१-४. CSS table style - hover |
हमारे आउटपुट में किसी भी data पर mouse को ले जाइये। उसका स्टाइल बदल जाएगा।
Important Points:
१. हम CSS की कई प्रॉपर्टीज का उपयोग टेबल को style देने के लिए करते हैं।२. यह प्रॉपर्टीज हम टेबल के स्तर पर, rows के स्तर पर, या data के स्तर पर दे सकते हैं।
३. CSS border-collapse property यह बताती है की बॉर्डर कैसी डिस्प्ले होनी चाहिए।
लेसन ४० लेसन ४२
