हेल्लो दोस्तों आज हम इस पोस्ट में जानेंगे की HTML एवं CSS Code से Table कैसे बनाते है यदि हम कोई पेज बनाते है अपने ब्लॉगर या वेबसाइट में तो उसमे जब किसी का विवरण देना होता है ख़ास तौर पर उस detail को हमें Table में बनाना हो तो उसके लिए ये पोस्ट आपके लिए बहुत ही महत्वपूर्ण हो सकता है
Responsive Table Demo
उपरोक्त बताये गए Table का Demo आप नीचे देख सकते है
Responsive Table CSS Code
नीचे दिए गए CSS Code से आप Table के style में परिवर्तन अपने अनुसार कर सकते है
Table के body को कस्टमाइज करे
#mytable {
font-family: Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
padding-top:10px;
}
Table का border साइज़ एवं कलर को change करे
#mytable td, #mytable th {
border: 2px solid #ddd;
padding: 8px;
}
Table के कॉलम का कलर एवं hover के कलर को change करे
#mytable tr:nth-child(even){background-color: #ffc107;}
#mytable tr:hover {background-color: #ffc107a3;}
Table में padding, text कलर, text align तथा बैकग्राउंड का कलर change करे
#mytable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #dc3545;
color: white;
}
Responsive Table HTML Code
दिए गए नीचे HTML Code में आप Heading का नाम तथा कॉलम में लिखे गए text को अपने शब्द के साथ replace करे
<table id="mytable">
<tr>
<th>Name</th>
<th>Job Tittle</th>
<th>Distric</th>
</tr>
<tr>
<td>Krishna</td>
<td>Computer Operator</td>
<td>Allahabad</td>
</tr>
<tr>
<td>Devraj</td>
<td>ADOP</td>
<td>Haridwar</td>
</tr>
<tr>
<td>Manoj Kumar</td>
<td>Web Designer</td>
<td>Delhi</td>
</tr>
<tr>
<td>Rajendra</td>
<td>C O</td>
<td>Ayodhya</td>
</tr>
<tr>
<td>Dharmendra</td>
<td>Computer Operator</td>
<td>Mumbai</td>
</tr>
<tr>
<td>Nitin</td>
<td>Photo Grapher</td>
<td>Sultanpur</td>
</tr>
<tr>
<td>Sharwan</td>
<td>GVA</td>
<td>Bhadohi</td>
</tr>
<tr>
<td>Deepak</td>
<td>GPA</td>
<td>Bhadohi</td>
</tr>
<tr>
<td>Keshaw</td>
<td>DEO</td>
<td>Rae Bareli</td>
</tr>
<tr>
<td>Sandeep</td>
<td>Social Warker</td>
<td>Noida</td>
</tr>
</table>
उपरोक्त दोनों code को compile करने पर हमारा Table तैयार हो जायेगा बस आपको इतना करना है Table में जो आप लिखना चाहते है उस शब्द को कॉलम में लिखे यदि आप चाहे तो नीचे दिए गए Source Code के neeche