CSS Table Property (In Hindi)
HTML Table का उपयोग Data को Tabular Format में दिखाने के लिए किया जाता हैं। Table द्वारा Present Data को ज्यादा रुचिकर और उपयोगी Style द्वारा बना सकते हैं। जिसके लिए CSS में Table Properties को बनाया गया हैं। CSS की Table Properties द्वारा Table की Border Setting, Caption, Cells आदि को Customize कर सकते हैं।
Different Types of CSS Table Properties
HTML Table को Customize करने के लिए CSS द्वारा विभिन्न Table Properties Provide करवाई जाती हैं।
- border
- border-collapse
- border-spacing
- caption-side
- empty-cells
- table-layout
Border Property
Table में Border Define करने के लिए Border Property का प्रयोग किया जाता हैं। Table के प्रत्येक Element के लिए Border Define कर सकते हैं।
<html>
<head>
<title>CSS Table Border</title><style type=”text/css”>
table, th, td {
border: 1px solid green;
}
</style>
</head>
<body>
<table>
<tr>
<td>Row 1, Column 1 </td>
<td>Row 1, Column 2 </td>
</tr>
<tr>
<td>Row 2, Column 1 </td>
<td>Row 2, Column 2 </td>
</tr>
</table>
</body>
</html>
OUTPUT-
Border Collapse Property
प्रत्येक Element कि अलग-अलग Border हैं। और Border के बीच में Space भी दिया गया हैं।Border-Collapse Property द्वारा इसी फालतु बॉर्डर को हटाने का कार्य किया जाता हैं। इससे सभी Element Border को Share करते हैं और Space खत्म हो जाता हैं। इसकी दो संभावित Values होती हैं, पहली separate और दूसरी collapse होती हैं।
<html>
<head>
<title>CSS Table Border Collapes</title><style type=”text/css”>
table, th, td {
border: 1px solid green;
}
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<td>Row 1, Column 1 </td>
<td>Row 1, Column 2 </td>
</tr>
<tr>
<td>Row 2, Column 1 </td>
<td>Row 2, Column 2 </td>
</tr>
</table>
</body>
</html>
Border Spacing Property
इस Property का प्रयोग एक Cell से दूसरे Cell के बीच की दूरी को Define करने के लिए किया जाता हैं। जिसे दोनों तरफ से नियत्रंण कर सकते हैं। यदि सिर्फ एक Value को Declare करते हैं तो यह दोनों तरफ यानि Vertically और Horizontally से बराबर दूरी Set कर देता हैं। और दोनों Values Declare करते हैं, तो पहली Value Horizontally दूरी को Define करती हैं और दूसरी Value Vertically दूरी को Define करती हैं।
<html>
<head>
<title>CSS Table Border Spacing</title><style type=”text/css”>
border: 1px solid green;
}
table {
border-spacing: 10px;
}
</head>
<body>
<tr>
<td>Row 1, Column 1 </td>
<td>Row 1, Column 2 </td>
</tr>
<tr>
<td>Row 2, Column 1 </td>
<td>Row 2, Column 2 </td>
</tr>
</table>
</body>
table, th, td {
</style>
<table>
</html>
OUTPUT-
Caption Side Property
HTML Table में शीर्षक यानि Caption Define किया होगा। जो By Default Table के ऊपर दिखाई देता हैं। Table Caption की Position को नियंत्रित करने के लिए Caption-Side Property का प्रयोग किया जाता हैं। इसकी संभावित Values Top, Bottom, Left और Right होती हैं।
<html>
<head>
<title>CSS Table Caption Position</title><style type=”text/css”>
table, th, td {
border: 1px solid green;
}
table {
caption-side: top;
}
</style>
</head>
<body>
<table>
<tr>
<td>Row 1, Column 1 </td>
<td>Row 1, Column 2 </td>
</tr>
<tr>
<td>Row 2, Column 1 </td>
<td>Row 2, Column 2 </td>
</tr>
</table>
</body>
</html>
Empty Cells Property
कई बार हमारे पास पर्याप्त डाटा नही होता हैं तो कुछ Cells खाली रह जाते हैं। जो भी Table में दिखाई देते हैं और Table का आकार बढा देते हैं। लेकिन, empty-cells Property द्वारा इन खाली Cells की Border को छिपा सकते हैं। इसकी दो संभावित Values हो सकती हैं। Show से Border को Display कराते हैं और Hide से बॉर्डर को छिपाते हैं।
<html>
<head>
<title>CSS Table Empty Cells Property</title><style type=”text/css”>
table, th, td {
border: 1px solid green;
}
table {
empty-cells: hide;
}
</style>
</head>
<body>
<table>
<tr>
<td>Row 1, Column 1 </td>
<td>Row 1, Column 2 </td>
<td>Row 1, Column 3 </td>
</tr>
<tr>
<td>Row 2, Column 1 </td>
<td>Row 2, Column 2 </td>
</tr>
</table>
</body>
</html>
Table-Layout Property
Border के Layout को Data के हिसाब से नियंत्रित करने के लिए table-layout Property का प्रयोग किया जाता हैं। इस Property की दो संभावित Value होती हैं। Fixed Value से Cells बराबर लंबाई-चौडाई के Display होते हैं। और Auto Value से Cell Data Length के अनुसार Display होते हैं।
<html>
<head>
<title>CSS Table Layout Property</title><style type=”text/css”>
table, th, td {
border: 1px solid green;
}
table {
table-layout: auto;
}
</style>
</head>
<body>
<table>
<tr>
<td>Row 1, Column 1 </td>
<td>This is Column 2 of Row 1. </td>
</tr>
<tr>
<td>Row 2, Column 1 </td>
<td>Row 2, Column 2 </td>
</tr>
</table>
</body>
</html>
For Any Doubt Clear on Telegram Discussion Group
No comments:
Post a Comment