HTML responsive table using CSS | HTML in Hindi

आज के टाइम में यदि वेबसाइट रेस्पॉन्सिव(Responsive) नहीं हैं तो अच्छा इफ़ेक्ट नहीं पड़ता हैं । इंटरनेट पर सभी वेबसाइट Responsive बनायीं जा रही हैं । इस tutorial में हम HTML और CSS का उपयोग करके एक responsive टेबल को बनाएंगे । इस से पहले tutorial में हमने bootstrap का उपयोग करके एक responsive टेबल को बनाया था ।

यहाँ पर हम CSS और HTML टेबल का उपयोग करके एक responsive HTML table को बनाएंगे । सबसे पहले समझ लेते हैं की responsive का क्या मतलब होता हैं ।

Responsive का क्या मतलब होता हैं -

Responsive एक ऐसी विधि है जिसके द्वारा हम अपनी वेबसाइट को बिना स्क्रॉलबार के सभी डिवाइस पर देख सकते हैं और छोटे आकार पर ज़ूम करने की आवश्यकता नहीं है।
साधारण Hindi भाषा में समझे तो जब कोई वेब पेज responsive बन जाता हैं तब उस पेज को कंप्यूटर में ओपन करे तो कंप्यूटर की स्क्रीन के अनुसार साइज बना ले और जब उसी वेब पेज को मोबाइल स्क्रीन पर खोले तो मोबाइल screen के अनुसार साइज को कम करले उसे ही हम रेस्पॉन्सिव (responsive) कहते हैं ।

Responsive HTML टेबल कैसे बनाये -

HTML टेबल को responsive बनाने के लोए हम CSS का यूज करेंगे। CSS की फुल फॉर्म होती हैं cascading stylesheet वेब पेज को डिज़ाइन करने और responsive बनाने में भी हेल्प करती हैं ।

सबसे पहले HTML टेबल को रेस्पॉनीवे बनाने के लिए हम CSS को बनाते हैं ।

CSS बनाने के बाद हम HTML table बनाते हैं । हटम्ल टेबल बनाना बहुत ही आसान होता हैं । हटम्ल टेबल बनाने के बाद CSS का use करके आसानी से टेबल को responsive हो जाएगी ।

HTML Table



  <table>
     <tr>
       <th>Employee </th>
       <th>ID </th>
       <th>Dept </th>
       <th>Time  </th>
       <th>Sunday </th>
       <th>Monday </th>
       <th>Tuesday </th>
       <th>Wednesday</th>
       <th>Thursday </th>
       <th>Friday </th>
       <th>Saturday </th>
       <th>Exit Time  </th>
     </tr>
     <tr>
       <td>Shiva </td>
       <td>102 </td>
      <td>IT</td>
       <td>11:30 </td>
       <td>12:30 </td>
       <td>09:00 </td>
       <td>10:00 </td>
       <td>09:00 </td>
       <td>11:00 </td>
       <td>12:00 </td>
       <td>07:00 </td>
       <td>06:00 </td>
     </tr>
     <tr>
       <td>Vishal</td>
       <td>103</td>
       <td>IT</td>
       <td>11:00</td>
       <td>07:00</td>
       <td>09:00</td>
       <td>12:00</td>
       <td>06:00</td>
       <td>12:00</td>
       <td>07:00</td>
       <td>10:00</td>
       <td>05:00</td>
     </tr>
    <tr>
      <td>Neha</td>
      <td>104</td>
      <td>IT</td>
      <td>10:00</td>
      <td>08:00</td>
      <td>12:00</td>
      <td>07:00</td>
      <td>11:00</td>
      <td>07:00</td>
      <td>08:00</td>
      <td>03:00</td>
      <td>6:00</td>
    </tr>
  </table>

Run

इस तरह से आप आसानी से एक responsive हटम्ल टेबल को बना सकते हैं ।

Please Share