CSS Table Property Hindi
CSS से html table को एक अच्छा लुक दे सकतें हैं | Table को css के जरिये आसानी से style किया जा सकता है | जैसे की table के cells के बिच की दुरी को नियंत्रण करना या border के लुक को बदलना | या फिर table content को सही से align करना आदि style किया जा सकता है |
CSS Table Properties List
Table के लिए CSS में 6 तरह के properties को define किया है |
- border-collapse
- border-spacing
- vertical-align
- caption-side
- empty-cells
- table-layout
1) border-collapse property
border property के जरिये table और उसके cell को border किया जा सकता है | पर border सेट करते ही हर border के बिच एक गैप रहता है | उसी गैप को रखना या हटाने के लिए border-collapse property का इस्तेमाल होता है |
उदाहरण:
<html>
<head>
<title>CSS Table Property</title>
<style>
table, th, td { border : 1px solid blue;}
</style>
</head>
<body>
<table>
<tr><th>First Name</th><th>Last Name</th><th>Location</th></tr>
<tr><td>Amit</td><td>Shah</td><td>DElhi</td></tr>
<tr><td>Rima</td><td>Nath</td><td>Hariyana</td></tr>
<tr><td>Meenakshi</td><td>Kumari</td><td>Jabalpur</td></tr>
<tr><td>Pari</td><td>Divedi</td><td>Asam</td></tr>
</table>
</body>
</html>
ऊपर के html code में css के द्वारा table, उसकी heading और cells के चारो और border लगाई गयी है, जिसकी आउटपुट आप image में देख सकतें हैं | पर इस border की वजह से हर cell के बिच एक गैप आ गया है | इसे हटाने के लिए border-collapse property का इस्तेमाल करेंगे |
border-collapse property की दो value होती है : 1) separate, 2) collapse
separate value default value होती है border-collapse property की | जिससे सारे border एक दुसरे से थोड़ी दुरी में दिखाई देती है | अगर इस दुरी को हटाना है तो border-collapse property की value को collapse से सेट करनी होगी |
उदाहरण:
table, th, td {
border : 2px solid blue;
}
table{
border-collapse : collapse;
}
output:
2) border-spacing property
border-spacing property से table के cells के बिच की दुरी को कम या ज्यादा की जा सकती है | अगर एक value लिखी गयी तो ये horizontal और vertical दुरी को एक जैसी करेगी |
मतलब अगर आप 5px value लिखे तो cell की ऊपर-निचे और दायीं-बायीं की दुरी 5px कर देगी | और अगर दायीं-बायीं यानि horizontal दुरी अलग और ऊपर-निचे यानि vertical दुरी अलग रखना है, तो फिर आपको दो value देनी पड़ेगी | इस चीज को निचे दी गयी उदाहरण से अच्छे से समझ पायेंगें |
उदाहरण:
table, th, td {
border : 2px solid blue;
}
table{
border-spacing : 10px 15px;
}
output:
ऊपर के html table में border-spacing : 10px 15px; value सेट किया गया है | जिसमे पेहली value horizontal space देगी और दूसरी value vertical space देगी | आउटपुट में देख कर आप समझ पायेंगे | अगर “border-spacing : 10px;” दी गयी होती, तो horizontal और vertical space एक जैसी सेट होती |
*नॉटपॉइंट – border-spacing तभी काम करेगी जब border-collapse property की value “separate” सेट होगी | वरना cell के बिच की दुरी पता नहीं चलेगी |
3) vertical-align property
vertical-align property से table में data की vertical align को नियंत्रित की जाती है | table data की default align middle सेट होती है | पर इस property से इसकी align को बदली जा सकती है |
vertical-align property की value हैं : top, bottom, middle
4) caption-side property
caption से table की शीर्षक को बताई जाती है | caption-side property से table के caption को नियंत्रित कर सकते हैं | table caption की default position ऊपर की और होता है | इस property से इसकी position निचे भी की जा सकती है |
caption-side property की value है : top, bottom
चलिए अब इस property को एक उदाहरण से समझतें हैं |
उदाहरण
<html>
<head>
<title>CSS Table Property</title>
<style>
table, th, td {
border : 2px solid blue;
}
table{
caption-side : bottom;
}
</style>
</head>
<body>
<table>
<caption>Sample Table</caption>
<tr><th>First Name</th><th>Last Name</th><th>Location</th></tr>
<tr><td>Amit</td><td>Shah</td><td>Delhi</td></tr>
<tr><td>Rima</td><td>Nath</td><td>Hariyana</td></tr>
</table>
</body>
</html>
output
5) empty-cells property
कई बार table के कुछ cells में data ना होने की वजह से वो खाली रहता है | और वो खाली जगह table में दीखता रहता है | empty-cells property के जरिये उन खाली cell की border को छुपायी जा सकती है |
empty-cells property के दो value होतें हैं : show, hide
show value से empty cell की border दिखेगी और hide value से empty cell की value छिप जाएगी |
उदाहरण:
<html>
<head>
<title>CSS Table Property</title>
<style>
table, th, td {
border : 2px solid blue;
}
table{
empty-cells:hide;
}
</style>
</head>
<body>
<table>
<caption>Sample Table</caption>
<tr><th>First Name</th><th>Last Name</th><th>Location</th></tr>
<tr><td>Amit</td><td></td><td>Delhi</td></tr>
<tr><td>Rima</td><td>Nath</td><td>Hariyana</td></tr>
<tr><td>Meenakshi</td><td>Sahu</td><td></td></tr>
<tr><td>Pari</td><td>Divedi</td><td>Asam</td></tr>
</table>
</body>
</html>
output
6) table-layout property
table-layout property से table की layout को नियंत्रित की जाती है | जब table में ज्यादा data डाल दी जाती है तो table की चौडाई बढ़ जाती है | उसे fixed रखने के लिए table-layout property का इस्तेमाल होता है |
table-layout property के दो value होती है : auto, fixed
auto value table की default value है | जब कोई cell में data ज्यादा होता है तो ये table की लम्बाई और चौडाई बढ़ा देती है | पर fixed value से चाहे data ज्यादा हो या कम table की लम्बाई और चौडाई नहीं बढती |
उदाहरण:
<html>
<head>
<title>CSS Table Property</title>
<style>
table, th, td {
border : 2px solid blue;
}
#t1{
width:300px;
table-layout: auto;
}
#t2{
width:300px;
table-layout: fixed;
}
</style>
</head>
<body>
<table id="t1">
<caption>Auto Table Layout</caption>
<tr><th>Name</th><th>No</th></tr>
<tr><td>Amit</td><td>4567889989878987898888877878878778788778788778</td></tr>
<tr><td>Rima</td><td>784</td></tr>
</table>
<br>
<table id="t2">
<caption>Fixed Table Layout</caption>
<tr><th>Name</th><th>No</th></tr>
<tr><td>Amit</td><td>4567889989878987898888877878878778788778788778</td></tr>
<tr><td>Rima</td><td>784</td></tr>
</table>
</body>
</html>
image में पहली table की width 300px सेट है, पर cell में data ज्यादा होने कारण table की width बढ़ गयी | पर दूसरी table में table की width नहीं बढ़ी क्योंकि table-layout को fixed रखा गया है |इसीलिए चौडाई नहीं बढ़ी और ज्यादा data overflow होकर दिखाई दे रही है |
Styling even and odd cells
CSS के जरिये table के alternate row को color की जा सकती है जिससे table ज्यादा ख़ूबसूरत दिखेगी |
उदाहरण:
tr:nth-child(even){
background-color:lightgreen;
color:Maroon;
}
output
ऊपर के उदाहरण में tr:nth-child(even) selector के जरिये table के हर even row को color किया गया है |
Formatting row-hover
कई बार table में बहोत सारे columns होती है, जिससे उस पुरे row को समझ पाना मुस्किल होता है की कितनी लम्बी है | इसे आसान करने के लिए row-hover को color कर सकते हैं | जिससे selected row को जान पाना आसान होगा |
उदाहरण:
tr:hover{background-color:gray;}
output:
tr:hover selector से table के row को style दे सकते हैं, जब किसी row पर mouse hover कर रहा होगा | ऊपर के उदाहरण में mouse hover पे row का color, ग्रे कीया गया है |