HTML में Responsive टेबल कैसे बनाएं: ब्लॉगर के लिए सरल निर्देश | वसीम शेख

HTML में Responsive टेबल कैसे बनाएं: ब्लॉगर के लिए सरल निर्देश

प्रस्तावना: रेस्पॉन्सिव डिजाइन की महत्वपूर्णता

वेब डिजाइन में रेस्पॉन्सिवता का महत्व हर दिन बढ़ता जा रहा है, क्योंकि अधिकांश लोग अब स्मार्टफोन और टैबलेट का उपयोग करके इंटरनेट पर ब्राउज़ करते हैं। HTML ब्लॉगर पर रेस्पॉन्सिव टेबल बनाने का एक सरल और प्रभावी तरीका प्रस्तुत करता है।

स्टेप 1: HTML में टेबल का निर्माण:

पहला कदम है एक HTML टेबल बनाना। निम्नलिखित कोड उदाहरण रूप में दिया गया है:

```html

<table>

  <thead>

    <tr>

      <th>सीरीज़</th>

      <th>नाम</th>

      <th>योजना</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>1</td>

      <td>व्यायाम</td>

      <td>रोजाना</td>

    </tr>

    <tr>

      <td>2</td>

      <td>पढ़ाई</td>

      <td>सप्ताहिक</td>

    </tr>

    <tr>

      <td>3</td>

      <td>मनोरंजन</td>

      <td>मासिक</td>

    </tr>

  </tbody>

</table>

```

स्टेप 2: CSS का उपयोग करके रेस्पॉन्सिव बनाएं:

आपकी टेबल को रेस्पॉन्सिव बनाने के लिए CSS का उपयोग कर सकते हैं। निम्नलिखित CSS कोड का उदाहरण दिया गया है:

```css

<style>

  table {

    width: 100%;

    border-collapse: collapse;

    border: 1px solid #ddd;

  }

  

  th, td {

    text-align: left;

    padding: 8px;

  }

  

  tr:nth-child(even) {

    background-color: #f2f2f2;

  }

  

  @media screen and (max-width: 600px) {

    th, td {

      display: block;

      width: 100%;

    }

  }

</style>

```

स्टेप 3: Blogger में इंटीग्रेट करें:

अंत में, आपको टेबल को अपने Blogger पोस्ट में इंटीग्रेट करना है।

1. आपके Blogger डैशबोर्ड में जाएं और पोस्ट बनाएं या संपादित करें जिसमें आप टेबल जोड़ना चाहते हैं।

2. "HTML" टैब पर क्लिक करें और ऊपर दिए गए CSS और HTML कोड को कॉपी-पेस्ट करें।

3. पोस्ट को सहेजें और प्रस्तुत करें!

इसे ब्लॉगर पोस्ट में डालने से, आपकी टेबल रेस्पॉन्सिव हो जाएगी और सभी प्रकार के स्क्रीन पर ठीक से दिखाई देगी।

_

Demo

सीरीज़	नाम	योजना
1	व्यायाम	रोजाना
2	पढ़ाई	सप्ताहिक
3	मनोरंजन	मासिक

_

निष्कर्ष:

HTML में रेस्पॉन्सिव टेबल बनाने का यह सरल तरीका आपको अपने Blogger पोस्ट को उच्च स्तर पर पेशेवरता और सुंदरता से प्रस्तुत करने में मदद करेगा। रेस्पॉन्सिव डिजाइन के माध्यम से, आप आपके पाठकों को अच्छी तरह से सेवा प्रदान कर सकते हैं, चाहे वो किसी भी डिवाइस पर ब्राउज़ कर रहे हों।