How to Add Responsive Table in Blogger?

यहाँ आपलोगों को इस post में जानने को मिलेगा की आप कैसे अपने Blogger में यानी इसके post/page में आप अपने HTML Responsive Table को जोड़ सकते हैं | एक Blogger के रूप में हमें कभी ना कभी किसी post/page में इसकी जरुरत पड़ जाती है जिससे की कोई information या link हम अपने user को दे सके और इसी के लिए हमें Responsive Table की जरुरत पड़ती है ताकि किसी device में ये सही से दिखे |

तो आपको एक बात बताते चलू, नीचे दिए गए post को ध्यानपूर्वक अंत तक जरुर पढ़े तभी आप सही से ये Responsive Table Blogger में लगा सकोगे तो आइये जानते हैं ------------

Must Read: How to Add Normal Table of Contents in Blogger

What is a Responsive Table in Blogger?

आपको बताते चले की यहाँ Responsive मतलब किसी के device में चाहे वह mobile हो या laptop या टैब, सभी में सही से दिखना चाहिए आपके blogger post/page में लगे Table |

तो जैसा आपने भी दूसरों के वेबसाइट में देखा होगा की किस तरह वो कुछ महत्वपूर्ण जानकारी अपने Table के माध्यम से अपने post में देते हैं ताकि user को आसानी से वो पढ़ा जा सके और अगर लिंक वाला है तो लिंक को open कर सके तो इसीलिए ये जरुरी है की आपको इसके बारे में आना चाहिए की सही से आप कैसे लगायें |

नीचे हमने आपको स्टेप्स भी बताये हैं साथ में कुछ Responsive Table के examples और उनके कोड भी दिए हुए हैं तो आपको जो मर्जी हो उसको use करें और नीचे दिए स्टेप्स से अपने blogger में लगाये |

How to Add Responsive Table in Blogger Post/Page?

आप अपने blogger के post/page जहाँ भी लगाना चाहते हैं सभी के लिए एक ही रूल है और उसको आप ध्यान से फॉलो करें जैसा नीचे बताया गया है ---------

1. सबसे पहले नीचे दिए गए कोई भी HTML Responsive Table का कोड copy कर लें जो आपको अच्छा लग रहा हो / सबसे नीचे में दिए विडियो को देखकर अपना Customizable HTML Responsive Table का कोड copy कर तैयार रहें |
   
   
2. अब आपको अपने blogger के post/page में जाना है जहाँ आप लगाना चाहते हैं |
   
   
3. अब आपको post/page में जहाँ भी लगाना हो वहां पर कुछ लिख दें जैसे की MyTable और कुछ भी छोटा सा शब्द में |
   
   
4.   अब आपको ऊपर में दाई तरह पेंसिल का चिन्ह दिख रहा होगा उस पर क्लिक कर HTML view को चुने |
   
   
5. अब आपको वहां पर एक Search icon🔍 दिखेगा वहां पर वही शब्द लिखे जो आपने step 3 में लिखा था जैसे MyTable और फिर enter दबाये |
   
   
6. आप देखेंगे की वो Text आपको highlight में दिखेगा |
   
   
7. अब आपको उस highlight शब्द के जगह पर अपना copy किया हुआ HTML Responsive Table का कोड paste कर दें |
   
   
8. अब वापस आप ऊपर बाएं जहाँ पेंसिल का चिन्ह था वहां कुछ < > इस तरह दिखेगा उस पर क्लिक कर Compose view पर क्लिक करें |
   

आप वहां देख पा रहे होंगे आपका टेबल लग चूका है जहाँ आप लगाना चाहते थे, आप इसको अपने post/page को update कर लिंक open कर और अच्छे से देख सकते हैं या ऊपर में दाई ओर 👁️Preview के बटन पर क्लिक कर भी आप देख सकते हैं |

Must Read: How to Add Stylish Table of Contents in Blogger

Copy HTML Responsive Table Code for Blogger

आपको यहाँ मैं 5 तरह के टेबल दिखाऊंगा साथ में उसका कोड भी जिसको copy कर आप ऊपर में दिए स्टेप से अपने blogger में लगा सकते हैं |

एक और बात अगर आप टेबल का रंग या text का रंग या text को center में करना चाहते है तो इस तरह के customisation के लिए आपको नीचे दिए गए विडियो को जरुर देखे |

Responsive Table With Head (2 Column)

Copy Code 👇

<style> #simple_table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; background-color: #fff4d6; color:black; } #simple_table td, #simple_table th { text-align: left; padding: 8px; border: 1px solid #000000; } #simple_table tr > th { background: #AC0101; color: #ffffff; } </style> <table id="simple_table"> <tbody><tr> <th>Column 1</th> <th>Column 2</th> </tr> <tr> <td>Row 1</td> <td>Row 2</td> </tr> <tr> <td>Row 3</td> <td>Row 4</td> </tr> <tr> <td>Row 5</td> <td>Row 6</td> </tr> <tr> <td>Row 7</td> <td>Row 8</td> </tr> <tr> <td>Row 9</td> <td>Row 10</td> </tr> </tbody></table>

Table Design of Above Code👇

Column 1	Column 2
Row 1	Row 2
Row 3	Row 4
Row 5	Row 6
Row 7	Row 8
Row 9	Row 10

Responsive Table Without Head (2 Column)

Copy Code 👇

<style> #simple_table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; background-color: #fff4d6; color:black; } #simple_table td, #simple_table th { text-align: left; padding: 8px; border: 1px solid #000000; } </style> <table id="simple_table"> <tr> <td>Row 1</td> <td>Row 2</td> </tr> <tr> <td>Row 3</td> <td>Row 4</td> </tr> <tr> <td>Row 5</td> <td>Row 6</td> </tr> <tr> <td>Row 7</td> <td>Row 8</td> </tr> <tr> <td>Row 9</td> <td>Row 10</td> </tr> </table>

Table Design of Above Code 👇

Row 1	Row 2
Row 3	Row 4
Row 5	Row 6
Row 7	Row 8
Row 9	Row 10

Responsive Table With Head (3 Column)

Copy Code 👇

<style> #simple_table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; background-color: #fff4d6; color:black; } #simple_table td, #simple_table th { text-align: left; padding: 8px; border: 1px solid #000000; } #simple_table tr > th { background: #AC0101; color: #ffffff; } </style> <table id="simple_table"> <tbody><tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td>Row 1</td> <td>Row 2</td> <td>Row 3</td> </tr> <tr> <td>Row 4</td> <td>Row 5</td> <td>Row 6</td> </tr> <tr> <td>Row 7</td> <td>Row 8</td> <td>Row 9</td> </tr> <tr> <td>Row 10</td> <td>Row 11</td> <td>Row 12</td> </tr> <tr> <td>Row 13</td> <td>Row 14</td> <td>Row 15</td> </tr> </tbody></table>

Table Design of Above Code 👇

Column 1	Column 2	Column 3
Row 1	Row 2	Row 3
Row 4	Row 5	Row 6
Row 7	Row 8	Row 9
Row 10	Row 11	Row 12
Row 13	Row 14	Row 15

Responsive Table Without Head (3 Column)

Copy Code 👇

<style> #simple_table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; background-color: #fff4d6; color:black; } #simple_table td, #simple_table th { text-align: left; padding: 8px; border: 1px solid #000000; } </style> <table id="simple_table"> <tr> <td>Row 1</td> <td>Row 2</td> <td>Row 3</td> </tr> <tr> <td>Row 4</td> <td>Row 5</td> <td>Row 6</td> </tr> <tr> <td>Row 7</td> <td>Row 8</td> <td>Row 9</td> </tr> <tr> <td>Row 10</td> <td>Row 11</td> <td>Row 12</td> </tr> <tr> <td>Row 13</td> <td>Row 14</td> <td>Row 15</td> </tr> </table>

Table Design of Above Code 👇

Row 1	Row 2	Row 3
Row 4	Row 5	Row 6
Row 7	Row 8	Row 9
Row 10	Row 11	Row 12
Row 13	Row 14	Row 15

Responsive Table With Striped Design

यहाँ striped का मतलब आपको एक row दुसरे तो दूसरा row दुसरे रंग में दिखेगा |

Copy Code 👇

<style> #simple_table1 { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; background-color: #fff4d6; color:black; } #simple_table1 td, #simple_table1 th { text-align: left; padding: 8px; border: 1px solid #000000; } #simple_table1 tr:nth-child(odd) { background-color: #f2f2f2; } #simple_table1 tr > th { background: #AC0101; color: #ffffff; } </style> <table id="simple_table1"> <tbody><tr> <th>Column 1</th> <th>Column 2</th> </tr> <tr> <td>Row 1</td> <td>Row 2</td> </tr> <tr> <td>Row 3</td> <td>Row 4</td> </tr> <tr> <td>Row 5</td> <td>Row 6</td> </tr> <tr> <td>Row 7</td> <td>Row 8</td> </tr> <tr> <td>Row 9</td> <td>Row 10</td> </tr> </tbody></table>

Table Design of Above Code 👇

Column 1	Column 2
Row 1	Row 2
Row 3	Row 4
Row 5	Row 6
Row 7	Row 8
Row 9	Row 10

How to Make Own Customizable Responsive Table for Blogger?

वैसे आपको इन्टरनेट पर आपको बहुत सारे websites मिल जायेंगे इस चीज के लिए, लेकिन यहाँ मैं आपको एक बहुत ही simple website देने वाला हूँ जिससे आप बहुत आसानी से अपने blogger के लिए Responsive Table code बनवा सकते हैं |

नीचे दिए गए विडियो को जरुर देखे की आप कैसे इस वेबसाइट का इस्तेमाल करके अपना मनपसंद Responsive Table generate कर सकते हैं |

HTML Responsive Table Generator:- Click to Open

Conclusion

यहाँ दिया गया post आपको कैसा लगा हमें नीचे कमेंट बॉक्स में जरुर बताये एवं कोई भी प्रश्न हो तो नीचे दिए गए कमेंट बॉक्स में जरुर पुच्छे |

यदि आपको यह post पसंद आया तो इसे नीचे दिए सोशल बटन से सभी जगह शेयर जरुर करें ताकि दूसरों को भी knowledge मिल पाए |