ब्लॉगर के अंदर रिस्पॉन्सिव टेबल (Responsive Table) कैसे बनाये ? |How To Make Responsive Table In Blogger Blog।

               Date:- 19-05-2021

 Responsive Table kaise banaye | Blogger Me Respnsive

Namaskar  दोस्तों स्वगत हैं आपका  हमारे आर्टिकल में दोस्तों आज हम बात करने वाले हैं, ब्लॉगर के अंदर  रिस्पॉन्सिव टेबल कैसे बनाए ,How To Make Responsive Table In Blogger , HTML Coad Se  Table kaise banaye,Blog Me Table kaise banaye , Responsive Table  For  Blogger, HTML  Me Table Kaise Banaye  ईन सभी के बारे  में आज हम बात करनेेवाले हैं ।तो चलिए  शुरू करते हैं।

इसइस पोस्ट में आप सीखेंगे  की ब्लॉगर के अंदर  HTML  कोड की सहायता से  Responsive Table  कैसे बनाते हैं । और ये भी बताने वाले हैं की  Responsiv टेबल क्या  होता हैं ,Responsive Table कैसे  काम करता है।

Responsive Table क्या होता हैं ?

वे टेबल जो डिवाइस (Device ) के  स्क्रीन (screen) केके साइज (size) के अनुसार ऑटोमैटिक अपना  साइज को बदल सकता हैं उसे। Responsive Table। कहते हैं ।

Responsive Table कैसे काम करता हैं ?

 

Responsive Table अलग अलग डिवाइस के  साइज में अलग अलग दिखाई देती हैं , जैसे की अगर आप mobile me Respnsive Table open करेंगे तो वो मोबाईल के स्क्रीन के साइज के तरह दिखाई देगी ,अगर आप Laptap में खोलेंगे तो वो लैपटॉप के स्क्रीन के साइज के अनुसार दिखाई देगी, तथा आप Tablet में ओपन करेंगे तो वो टेबलेट  के स्क्रीन के अनुसार दिखाई देगी।और अगर आप PC /Computer में Respnsive Table को ओपन करेंगे तो वो  PC /Computer ke स्क्रीन के साइज के अनुसार। दिखाई देगी तो इस तरह से Responsive Table काम करता हैं ।

Responsive Table यूज करने के फायदे :-

अगर आप  Blog / Website में  Responsive। Table का  use करते हैं तो आपका Blog/Website को किसी भी Device  में खोलेंगे तो वो स्क्रीन के साइज के अनुसार ऑटोमैटिक अर्जेस्ट हो जाता है और  उसे को   आपका Blog/Website use करने में अच्छा लगता हैं अगर आप अपने Blog/Website में Responsive Table का इस्तेमाल नहीं करते हैं तो  कोई अगर आपका ब्लॉग/वेबसाईट को  मोबाईल में ओपन करता है तो आपका Table उसको  पूरी तरह से दिखाई नहीं देगा । अगर टेबल पूरा दिखाई नहीं  देगा तो  आपका  ब्लॉग पर जितने भी यूजर आते हैं  वो सभी  आपके ब्लॉग /वेबसाइट को उसे करना पसंद नहीं करेंगे ।

इसलिए मेरा मानना यह है की हमेशा  ब्लॉग /वेबसाइट में Responsiv Table का ही यूज करना चाहिए,जिससे की आपके ब्लॉग/वेबसाईट पर बुरा असर न पड़े ।

Note:-अगर आपके ब्लॉगर Theme Responsive   हो तो आपको  उसमेे  Responsive Table  का हि यूज  करना चाहिए जससे की यूजर को    MOBILE पर भी Table पूरा पूरा दिखाई दे ।

Top 3 Responsive Table  HTML coad

   First Responsive Table HTML Coad

            Coad copy ©️

<!-- CSS Code: Place this code in the document's head (between the 'head' tags) --> <style> table.GeneratedTable { width: 100%; background-color: #ffffff; border-collapse: collapse; border-width: 2px; border-color: #ededed; border-style: solid; color: #0000ff; } table.GeneratedTable td, table.GeneratedTable th { border-width: 2px; border-color: #ededed; border-style: solid; padding: 3ex; } table.GeneratedTable thead { background-color: #ff0000; } </style> <!-- HTML Code: Place this code in the document's body (between the 'body' tags) where the table should appear --> <table class="GeneratedTable"> <thead> <tr> <th>Header</th> <th>Header</th> <th>Header</th> </tr> </thead> <tbody> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> </tbody> </table> <!-- Codes by Quackit.com -->

             preview

S.N	Name	Class
1.	Md Zakir	INTER
2.	Md Arman	FIFTH
3.	Md Arbaz	SEVENTH
4.	Md Salman	TENTH
5.	Md sarfraz	POLYTECHNIC

      second Responsive Table HTML Coad

<!-- CSS Code: Place this code in the document's head (between the 'head' tags) --> <style> table.GeneratedTable { width: 100%; background-color: #ffffff; border-collapse: collapse; border-width: 2px; border-color: #f0f0f0; border-style: solid; color: #000000; } table.GeneratedTable td, table.GeneratedTable th { border-width: 2px; border-color: #f0f0f0; border-style: solid; padding: 3ex; } table.GeneratedTable thead { background-color: #00ffff; } </style> <!-- HTML Code: Place this code in the document's body (between the 'body' tags) where the table should appear --> <table class="GeneratedTable"> <thead> <tr> <th>Header</th> <th>Header</th> <th>Header</th> </tr> </thead> <tbody> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> </tbody> </table> <!-- Codes by Quackit.com --> .

                     Preview Table 

Header	Header	Header
Table	Coad	Copypaste
Table	Coad	Copypaste
Table	Coad	Copypaste

 

      Third  Responsive Table Html coad

<!-- CSS Code: Place this code in the document's head (between the 'head' tags) --> <style> table.GeneratedTable { width: 100%; background-color: #ffffff; border-collapse: collapse; border-width: 2ex; border-color: #d9d9d9; border-style: solid; color: #000000; } table.GeneratedTable td, table.GeneratedTable th { border-width: 2ex; border-color: #d9d9d9; border-style: solid; padding: 3rem; } table.GeneratedTable thead { background-color: #ffcc00; } </style> <!-- HTML Code: Place this code in the document's body (between the 'body' tags) where the table should appear --> <table class="GeneratedTable"> <thead> <tr> <th>Header</th> <th>Header</th> <th>Header</th> </tr> </thead> <tbody> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> </tbody> </table> <!-- Codes by Quackit.com -->

                                PREVIEW

S.N	Village	Leader
1	madhepur	संजय सिंह
2.	Gurgava	बिट्टू सिंह
3.	Sahebganj	राहुल बाबा
4.	Mathaiya	रजनीश कुमार
5.	Tajpur	अवधेश मिश्रा

              

 Use करने का तरीका नीचे दिया गया हैं।यूज आप follow करके   आसानी से रिस्पॉन्सिव टेबल बन सकते हैं।

   

               Follow this step

 

1. सबसे पहले आप आपने ब्लॉगर अकाउंट में login हो  जाए।
2. लोगों होने के बाद आपको जिस पोस्ट या पेज में टेबल बनाना है उस पोस्ट में HTML ऑप्शन पर क्लिक करे।
3. HTML पर क्लिक करने के बाद आपके सामने HTML coad open हो जाएगा  ।
4. आपको जहा भी टेबल बनाना हैं semply वह पर ऊपर दिए गया कोड को copy करके paste कर देना हैं।
5. पाते करने के बाद Responsive Table बन कर तैयार हो जाएगा।

Note:- ऊपर दिया गया Responsive Table HTML Coad तीन प्रकार के हैं आपको जो भी टेबल अच्छा लगेगा वो  आप ऊपर  प्रिव्यू  दिया गया हैं।

दोस्तों आगर आपको Responsive Table बनाने में किसी  तरह का दिकक्का होंटो आप हमे कॉमेंट कर के बता सकते है मैं आपको पर्सनली आपको बताऊंगा ।

दोसोट आशा करता हूं की आपको ये पोस्ट अच्छा लगा होगा अगर अच्छा लगा हो तो आप इसे अपने दोस्तों में शेयर कीजिए और भी इस तरह की जानकारी के लिए आप हमे कॉमेंट कर सकते हैं। जिससे की मैं आगे भी इस तरह के आर्टिकल ले कर आऊंगा ।

           Thank you so much 

         पोस्ट में अंत तक बनन के लिए