Style Table in CSS in Hindi-स्टाइल टेबल क्या है?

by

हेल्लो दोस्तों! आज इस पोस्ट में Style Table in CSS in Hindi में बताया गया है की table क्या होता है कैसे काम करता है और भी बहुत कुछ तो चलिए शुरू करते है

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>
Style Table in CSS in Hindi

refenence-https://www.tutorialspoint.com/css/css_tables.htm

निवेदन :-अगर आपको यह आर्टिकल उपयोगी लगा हो तो इस आप अपने क्लासमेट ,दोस्तों  के साथ अवश्य share कीजिये और आपके जो भी इस पोस्ट्स से related(सम्बन्धित) questions है तो आप उन्हें निचे कमेंट कर सकते है हम उसके  answer अवश्य करेंगे Thank

Leave a Comment