CSS Tables
हम किसी HTML table का किस तरह से दिखाई देगी वह हम CSS के द्वारा बहुत अच्छा कर सकते हैं।
Table Border
किसी table के border को specify करने के लिए border property use करते हैं। नीचे दिए example में <table>, <th>, और <td> element को blue border दिया गया हैं।
For e.g.
<style>
table, th, td {
border: 1px solid blue;
}
</style>
<table>
<tr>
<th>Name</th>
<th>Roll no.</th>
</tr>
<tr>
<td>John</td>
<td>01</td>
</tr>
<tr>
<td>Mary</td>
<td>02</td>
</tr>
</table>
(यहाँ table, th, td की borders blue color की होगीं|)
Collapse Table border – border-collapse property का उपयोग table cells और main table की borders को collapse करने के लिए किया जाता हैं।
अगर हमें केवल table को border देना हैं, तो हम केवल table की border property specify करेंगे।
table{
border: 1px solid blue;
}
Width & height:- किसी table की height और width specify करने के लिए ‘height’ और ‘width’ properties का इस्तेमाल किया जाता हैं।
For e.g.
<style>
table {
width: 70%;
}
table th{
height: 40px;
}
</style>
<table>
<tr>
<th>Name</th>
<th>Roll no.</th>
</tr>
<tr>
<td>Vikas</td>
<td>01</td>
</tr>
<tr>
<td>Amit</td>
<td>02</td>
</tr>
</table>
Horizontal alignment:- किसी table के th या td element को left या right या center में align करने के लिए text-align property का use करते हैं। For e.g. हम ऊपर वाली table पर ही यह property apply कर के देखते हैं-
th{
text-align: left;
}
td{
text-align: right;
}
* Vertical alignment :- किसी table के th या td element के content को vertically (top, bottom, या middle) align करने के लिए vertical align property का use करते हैं।
For e.g.
td{
vertical-align: bottom;
}
नोट – By default किसी table के th व td element के content का vertical alignment ‘middle’ होता हैं।
Table padding :- इस property से हम table को या उसके element को padding दे सकते हैं। अगर हम table को padding दें तो table के border और उसके element के बीच space create होगा। और अगर हम table के किसी element को padding दें तो उस element के अंदर space create होगा।
For e.g.
<style>
th, td{
padding: 20px;
text-align: center;
}
</style>
<table>
<tr>
<th>Name</th>
<th>Roll no.</th>
</tr>
<tr>
<td>Vikas</td>
<td>01</td>
</tr>
<tr>
<td>Amit</td>
<td>02</td>
</tr>
</table>
Table-Color :- हम किसी table का background color या फिर किसी content के text का color भी set कर सकते हैं।
For e.g.
table th{
background-color: blue;
color: yellow;
}
Horizontal dividers :- किसी table के th या td को horizontal divider देने के लिए border-bottom property का use करते हैं।
For e.g.
table td{
border-bottom: 1px solid blue;
}
Hoverable table
किसी table के tr पर mouse cursor लाने पर उसे tr को hover selector के द्वारा :highlight कर सकते हैं।
For e.g.
tr:hover{
background-color: yellow;
}
Output :- इससे table की किसी tr पर mouse ले जाने पर उस tr का background color yellow हो जाएगा।
Responsive table :- किसी table को responsive बनाने के लिए हम उसे एक div element के अंदर रखते हैं और उस div को property देते हैं- overflow-x:auto;
जब screen की size बहुत छोटी हो तो एक responsive table एक horizontal scroll bar show करती हैं जिसे scroll करके हम पूरी table देख सकते हैं।
For e.g.
<style>
div {
overflow-x: auto;
}
</style>
<table>
——— content of table ———-
</table>