CSS in Hindi – Introduction to CSS Table Properties

  • Introduction to CSS table properties in Hindi
  • CSS table properties in Hindi
  • Example table properties in CSS Hindi

CSS in Hindi – Table Properties

किसी भी information को category wise दिखने के लिए हम table का use करते है लेकिन table को attractive बनाने के लिए css का use किया जाता है |

html मे table create करने के बाद table को जादा से जादा customize नही कर सकते है क्योकि html मे वो सारी facility available नही होती है |

इसीलिए हम table को customize करने के लिए css का use करते है क्योकि table को customize करने का facility css मे provide की गयी है |

हम अपने table को design करने के लिए css की कुछ property use करते है जो table के लिए बनाई गयी है कुछ property हम निचे दे रहे है |

  • border-collapse
  • table-layout
  • border-spacing
  • empty-cells
  • caption-side

border-collapse Property

जब आप table मे border apply करते है तो हर table data के ऊपर border apply होता है और एक border पुरे table पर apply होता है |

जो हमारे table का border होता है ऐसे मे हमारा table अच्छे से दिखाई नही देता है लेकिन आप चाहते है हमारे table के ऊपर एक single border apply हो और आपस मे merg भी हो |

तो यहाँ पर आप border-collapse की property use कर सकते है और border-collapse property की value collapse और separate होती है और जैसे ही border collapse property का use करते है तो हमारा border collapse हो जाता है |

<html>
<head>
<style type="text/css">
table,th,td { border: 2px solid red; border-collapse: collapse; }
</style>
</head>
<body>
<table>
       <tr>
              <th>SR NO</th>
              <th>Name</th>
              <th>Course</th>
              <th>Price</th>
       </tr>
       <tr>
              <td>1</td>
              <td>Rahul Sahani</td>
              <td>BCA</td>
              <td>RS. 30000</td>
       </tr>
              <tr>
              <td>2</td>
              <td>RL Sahani</td>
              <td>B.Tech</td>
              <td>RS. 40000</td>
       </tr>
</table>
</body>
</html>

border-spacing Property

CSS मे border-spacing Property के द्वारा आप अपने cell का spacing कर सकते है यानी आपके table मे जो cell बने हुए है उनको आप कितना दुरी पर दिखाना चाहते है इसे आप border-spacing Property मे define करते है और इसकी value हमेसा px ( pixel ) मे दी जाती है |

CSS मे border-spacing Property की दो value होती है और दोनों value pixel मे दी जाती है और जब आप border-spacing Property apply करते है तो vertically और horizontally दोनों ways मे apply होता है जब आप एक ही value का use करते है और जब आप दो value apply करते है तो पहला value vertically के लिए काम करता है और दूसरा value horizontally के लिए use किया जाता है |

<html>
<head>
<style type="text/css">
table,th,td { border: 2px solid red; border-collapse: separate; border-spacing : 60px;}
</style>
</head>
<body>
<table>
       <tr>
              <th>SR NO</th>
              <th>Name</th>
              <th>Course</th>
              <th>Price</th>
       </tr>
       <tr>
              <td>1</td>
              <td>Rahul Sahani</td>
              <td>BCA</td>
              <td>RS. 30000</td>
       </tr>
              <tr>
              <td>2</td>
              <td>RL Sahani</td>
              <td>B.Tech</td>
              <td>RS. 40000</td>
       </tr>
</table>
</body>
</html>

Notice :- border-spacing property तभी work करता है जब आप border-collapse property के साथ separate value का use कर रहे है और अगर border-collapse property के साथ value collapse ही use कर रहे है तो border-spacing property work नही करती है |

table-layout Property

table-layout property के द्वारा हम अपने table को यह निर्देश देते है की browser और windows मे कैसा दिखाई देगा table-layout property की सिर्फ दो value होती है पहला value auto होता है और दूसरा value fixed होता है पर दोनों value का काम defferent होता है |

अगर आप auto value का use करते है तो आपका table browser के according खुद ही arjest कर लेता है और अगर आप fixed value का use करते है तो आपका table fixed हो जाता है |

 <html>
<head>
<style type="text/css">
table,th,td { border: 2px solid red;
                 border-collapse: separate; 
                 border-spacing : 60px; 
                 table-layout: auto;}
</style>
</head>
<body>
<table>
       <tr>
              <th>SR NO</th>
              <th>Name</th>
              <th>Course</th>
              <th>Price</th>
       </tr>
       <tr>
              <td>1</td>
              <td>Rahul Sahani</td>
              <td>BCA</td>
              <td>RS. 30000</td>
       </tr>
              <tr>
              <td>2</td>
              <td>RL Sahani</td>
              <td>B.Tech</td>
              <td>RS. 40000</td>
       </tr>
</table>
</body>
</html>

empty-cells Property

जब आप empty-cells property का use करते है और अगर आपके table मे कोई cell empty है तो वह cell या तो hide हो जाएगी | या हमे दिखाई देने लगेगी | क्योकि हम empty-cells property मे सिर्फ दो value ही use कर सकते है पहला value hide होता है और दूसरा value show होता है |

Hide – जब आप hide value का use करते है और आपके table के अंदर कोई cell खाली है तो उस cell की border hide हो जाती है |

Show – जब आप show value का use करते है और आपके table के अन्दर कोई cell blank है तो उस cell की border हमे दिखाई देने लगती है |

<html>
<head>
<style type="text/css">
table,th,td { border: 2px solid red;
                 border-collapse: separate; 
                 border-spacing : 60px; 
                 table-layout: auto;
                 empty-cells: hide; 
               }
</style>
</head>
<body>
<table>
       <tr>
              <th>SR NO</th>
              <th>Name</th>
              <th>Course</th>
              <th>Price</th>
       </tr>
       <tr>
              <td>1</td>
              <td>Rahul Sahani</td>
              <td>BCA</td>
              <td>RS. 30000</td>
       </tr>
              <tr>
              <td>2</td>
              <td>RL Sahani</td>
              <td>B.Tech</td>
              <td>RS. 40000</td>
       </tr>
</table>
</body>
</html>

caption-side Property

इस property को <caption> tag के लिए use किया जाता है और caption-side property तभी काम करती है जब table के अंदर <caption> tag का use किया गया हो |

caption-side property का सिर्फ दो ही value हो सकती है पहला value top हो सकती है जो हमे <caption> के through by default भी मिलती है और दूसरा value bottom होता है जिसका use caption को bottom मे ले जाने के लिए किया जाता है |

<html>
<head>
<style type="text/css">
table,th,td { border: 2px solid red;
                 border-collapse: separate; 
                 border-spacing : 60px; 
                 table-layout: auto;
                 empty-cells: hide;
                 caption-side: bottom;
               }
</style>
</head>
<body>
<table>
       <caption>MY Table</caption>
       <tr>
              <th>SR NO</th>
              <th>Name</th>
              <th>Course</th>
              <th>Price</th>
       </tr>
       <tr>
              <td>1</td>
              <td>Rahul Sahani</td>
              <td>BCA</td>
              <td>RS. 30000</td>
       </tr>
              <tr>
              <td>2</td>
              <td>RL Sahani</td>
              <td>B.Tech</td>
              <td>RS. 40000</td>
       </tr>
</table>
</body>
</html>
CSS Color Properties CSS Anchor Properties
Previous Next