Styling tables with CSS
- Introduction to CSS table properties in Hindi
- Different CSS table properties in Hindi
- Examples of using CSS table properties in Hindi
Introduction to CSS table properties
किसी भी information को structured form में represent करने के लिए tables का प्रयोग किया जाता है। HTML आपको table create करने के लिए tags provide करती है। लेकिन अगर designing part की तरफ देखे तो आप HTML के द्वारा tables को कुछ खास design नहीं कर सकते है। लेकिन आपको निराश होने की कोई जरुरत नहीं है क्योंकि CSS के द्वारा आप tables पर भी styles apply कर सकते है। इसके लिए CSS आपको 5 properties provide करती है।
- border-collapse
- border-spacing
- caption-side
- empty-cells
- table-layout
इन properties के साथ दूसरी common properties को यूज़ करके आप tables को design कर सकते है। आइये इन सभी properties के बारे में जानने का प्रयास करते है।
HTML file
CSS file
HTML file
HTML file
border-collapse property
जैसा की आप देखते है HTML tables में सभी cells की borders merged होती है। लेकिन आप चाहे तो हर table cell को separate करते हुए उनकी borders को separately represent कर सकते है। इसके लिए आप border-collapse property यूज़ करते है। इस property की 2 possible values होती है। पहली value collapse होती है। जब आप इस value को set करते है तो सभी cells की border collapse हो जाती है और सभी cells एक ही border को यूज़ करते है। इस property की दूसरी value separate होती है। जब आप इस value को set करते है तो हर table cell की border separately represent होती है। आइये इसे एक उदाहरण से समझने का प्रयास करते है।
CSS file
</tr>
</html>
|
border-spacing property
इस property के द्वारा आप किसी भी table के cells के बीच का space define कर सकते है। इस space को आप horizontally और vertically दोनों तरह से define कर सकते है। इस property की value एक भी हो सकती है और 2 भी हो सकती है। जब आप एक value define करते है तो यह horizontal और vertical दोनों तरह से apply हो जाती है। जब आप दो values define करते है तो पहली value horizontally apply होती है और दूसरी value vertically apply होती है। इसका उदाहरण निचे दिया जा रहा है।
CSS file
HTML fileCSS file
caption-side property
इस property के द्वारा आप table का caption (शीर्षक) कँहा show होगा ये define कर सकते है। लेकिन ये property केवल तब ही काम करती है जब आप table के अंदर <caption> tag यूज़ करते है। <caption> tag table का शीर्षक define करने के लिए यूज़ किया जाता है। इस property की आप 2 values define कर सकते है। पहली value top होती है जिससे caption table के top पर show होता है। दूसरी value आप bottom दे सकते है इससे caption bottom में show होता है। इसका उदाहरण निचे दिया जा रहा है।CSS file
HTML file
empty-cells property
इस property के द्वारा आप define कर सकते है की जिन cells में content नहीं है उनकी borders शो करनी है या नहीं। इस property की 2 values हो सकती है। पहली value hide हो सकती है। जब आप इस value को set करते है तो जिन cells में कोई content नहीं होता है उनकी borders hide हो जाती है। दूसरी value show हो सकती है जब आप ये value define करते है तो जिन cells में content नहीं होता उनकी borders show होती है। आइये इसे एक उदाहरण से समझने का प्रयास करते है।
CSS file
table { empty-cells:hide; } |
<html> <head> <title>empty-cells property demo</title> </head> <body> <table> <tr> <th>Country</th> <th>Population</th> </tr> <tr> <td>India</td> <td>250000000</td> </tr> <tr> <td>Nepal</td> <td>250000</td> </tr> </table> </body> </html> |
table-layout property
इस property के द्वारा आप define कर सकते है की table का layout सभी browsers और windows में same रहेगा या फिर automatically change होगा। इस property की 2 values हो सकती है। एक value आप fixed define कर सकते है। जब आप ये value define करते है तो table का layout सभी browsers में fixed रहता है। दूसरी value आप auto define कर सकते है जब आप ये value define करते है तो table का layout browsers के according automatically change हो जाता है। इसका उदाहरण निचे दिया जा रहा है।
CSS file
HTML fileCSS file
No comments:
Post a Comment