हेल्लो दोस्तों! आज इस पोस्ट में Style Table in CSS in Hindi में बताया गया है की table क्या होता है कैसे काम करता है और भी बहुत कुछ तो चलिए शुरू करते है
Contents
Introduction to CSS table properties
किसी भी इनफार्मेशन को structure form में represent करने के लिए tables (Style Table in CSS in Hindi) का प्रयोग किया जाता है html आपको table create करने के लिए tags provide करता है
लेकिन आप html से table को बहुत ही simple में create कर सकते है लेकिन आप CSS के द्वारा आप table को designing table में बना सकते है
CSS के द्वारा आप style apply कर सकते है
इसके लिए निचे 5 properties दिया गया है
- border-collapse
- border-spacing
- border-side
- border-cells
- border-layout
इन properties के साथ दूसरी common property का भी प्रयोग किया जा सकता है इसके द्वारा आप table को डिजाईन कर सकते है
border-collapse property
html मे सभी cell की border merged होती है लेकिन CSS की इस property की सहायता से आप हर table cell को separate करके आप उनकी border को separately present कर सकते है
इसके लिए आप 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 होती है
आप इसे आप example से समझ सकते है
<html>
<head>
<title>border-collapse property</title>
<style>
table{
border-collapse:separate;
}
</style>
<head>
<body>
<table border=”1”>
<tr>
<th>Name</th>
</tr>
<tr>
<td>anand</td>
<td>22</td>
</tr>
<tr>
<td>sela</td>
<td>50</td>
</tr>
</table>
</body>
</html>border-spacing property
इस property के द्वारा आप किसी भी table की cells के बीच का space define कर सकते है यह space table में प्रत्येक cells के border में apply हो जाता है इस space को आप horizontally और vertically दोनों तरफ से define कर सकते है इस property की value एक भी हो सकती है और दो भी ,
जब आप एक value define करते है तो यह horizontal और vertical दोनों तरह से apply हो जाता है जब आप दो value define करते है तो पहला value horizontal apply होता है और दूसरा value vertical apply होता है
इन को हम एक example से समझ सकते है
<html>
<head>
<title>border-spacing property</title>
<style>
table{
border-collapse:separate;
border-spacing:10px;
}
</style>
<head>
<body>
<table border=”1”>
<tr>
<th>Name</th>
</tr>
<tr>
<td>anand</td>
<td>22</td>
</tr>
<tr>
<td>sela</td>
<td>50</td>
</tr>
</table>
</body>
</html>caption-side property
इस property के द्वारा आप table का caption को कहा पर दिखाना चाहते है ये define कर सकते है लेकिन ये property केवल तब ही काम करेगी जब table के अंदर <caption> tag table के शीर्षक define करने के लिए प्रयोग किया जाता है इस property के द्वारा आप 2 value define कर सकते है
पहला value top होती है जिससे आप table के top पर दिखा सकते है और दूसरी value button दे सकते है जिसमे आप इसे caption को button ((table के निचे) दिखा सकते है
इसका एक example निचे दिया जा रहा है
<html>
<head>
<title>caption-side property</title>
<style>
table{
border-spacing:10px;
caption-side:top;
}
</style>
</head>
<body>
<table border=”1”>
<caption>my friends</caption>
<tr>
<th>friends<//th>
<th>gender</th>
</tr>
<tr>
<td>amit</td>
<td>male</td>
</tr>
<tr>
<td>neha</td>
<td>female</td>
</tr>
</table>
</body>
</html>empty-cell property
इस property के द्वारा आप define कर सकते है जिन जिन cells में content नहीं है आप उनकी borders को दिखाना चाहते है या नही |
ये आप property की 2 value के द्वारा कर सकते है जिसमे पहला value को hide हो सकता है जिसके कारण जिस cells में content नही है उनकी border hide हो जाता है और दूसरी value show होती है जिसमे आप जिन cells में content नही है उनकी border को भी दिखा सकते है
आईये इसे हम एक example से समझ सकते है
<html><head> <title>empty-cells property</title> <style> table{ empty-cells:hide; }</style> </head> <body> <table border=”1”> <tr> <th>friends<//th> <th>gender</th> </tr> <tr> <td>amit</td> <td>male</td> </tr> <tr> <td>neha</td> <td>female</td> </tr> </table> </body> </html>
table-layout property
इस property के द्वारा आप table की layout सभी browsers(ब्राउज़र)और window में same रहे या फिर automatically change होगा ये define कर सकते है
इस property की 2 value हो सकती है एक value को आप fixed define कर सकते है जब आप ये value define करते है तो table का layout browser automatically change हो सकता है
इसका example निचे दिया जा रहा है
<html>
<head>
<title>table-layout property</title>
<style>
table{
table-layout:auto;
width:40%;
}
</style>
</head>
<body>
<table border=”1”>
<tr >
<th>friends<//th>
<th>gender</th>
</tr>
<tr>
<td>amit</td>
<td>male</td>
</tr>
<tr>
<td>neha</td>
<td>female</td>
</tr>
</table>
</body>
</html>
refenence-https://www.tutorialspoint.com/css/css_tables.htm
निवेदन :-अगर आपको यह आर्टिकल उपयोगी लगा हो तो इस आप अपने क्लासमेट ,दोस्तों के साथ अवश्य share कीजिये और आपके जो भी इस पोस्ट्स से related(सम्बन्धित) questions है तो आप उन्हें निचे कमेंट कर सकते है हम उसके answer अवश्य करेंगे Thank