ब्लॉगर के अंदर रेस्पॉन्सिव टेबल (Responsive Table) कैसे बनाये ?

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

Responsive Table क्या होती है और ये कैसे काम करती है ?

वो टेबल जो डिवाइस (device) की स्क्रीन की साइज के अनुसार आटोमेटिक अपनी साइज को बदल सकती है उसे Responsive Table कहते है। Responsive Table अलग अलग साइज की डिवाइस में अलग अलग दिखाई देती है जैसे की यदि आप उसे मोबाइल में खोलोगे तो वो मोबाइल के साइज की दिखाई देगी और यदि टेबलेट में खोलोगे तो उसकी साइज की दिखाई देगी और यदि कंप्यूटर में खोलोगे तो कंप्यूटर की साइज की दिखाई देगी। तो इस तरह से Responsive Table काम करती है।

यदि आपकी वेबसाइट या ब्लॉग की Theme एक Responsive Theme है तो आपको उसके अंदर एक Responsive Table का ही इस्तमाल करना चाहिए। यदि आप Responsive Theme के अंदर Responsive Table का इस्तमाल नहीं करते है तो ऐसे में जब कोई आपकी वेबसाइट या ब्लॉग को मोबाइल में ओपन करेगा तो आपकी टेबल उसको पूरी तरह से दिखाई नहीं देगी और इससे आपकी वेबसाइट पर बहुत ही बुरा असर पड़ेगा। तो आपको हमेसा एक Responsive Theme के अंदर एक Responsive Table का ही इस्तमाल करना चाहिए।

ब्लॉगर के अंदर Responsive Table कैसे बनाते है ?

ब्लॉगर के अंदर HTML और CSS कोड की सहायता से आप आसानी से एक Responsive Table बना सकते हो। ब्लॉगर में Responsive Table बनाने के लिए जिन HTML और CSS कोड की जरुरत आपको होगी वो दोनों कोड निचे दिए गए है और साथ में ये भी बताया गया है की उन कोड को कहा लगाना है और किस तरह से लगाना है। तो आप निचे दिए गए सभी स्टेप को अच्छे से पढ़िए और उनमे जैसे बोला गया है उसी तरह से उन कोड को अपने ब्लॉगर में ऐड करे।

CSS कोड को ब्लॉगर में कैसे ऐड करे ?

ब्लॉगर में Responsive Table बनाने के लिए सबसे पहले आपको निचे दिए गए CSS कोड को अपने ब्लॉगर में ऐड करना होगा।

CSS Code For Responsive Table-

 /* CSS Post Table by www.onlinesahayata.com*/
.post-body table th, .post-body table td, .post-body table caption{border:1px solid #2E2E2E;padding:.2em .5em;text-align:left;vertical-align:top;}
.post-body table.tr-caption-container {border:1px solid #2E2E2E;}
.post-body th{font-weight:600;}
.post-body table caption{border:none;font-style:Arial;}
.post-body table{}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:15px;padding:3px 5px;border:1px solid #010101;}
.post-body th{background:#007874;color:#ffff;}
.post-body table.tr-caption-container td {border:none;padding:8px;}
.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}
.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}
img {max-width:100%;height:auto;border:none;}
table {max-width:100%;width:100%;margin:1.5em auto;}
table.section-columns td.first.columns-cell{border-left:none}
table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
table.columns-2 td.columns-cell{width:50%}
table.columns-3 td.columns-cell{width:33.33%}
table.columns-4 td.columns-cell{width:25%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%} 

CSS कोड को ब्लॉगर में ऐड करने के दो तरीके है। आप दोनों में से किसी भी तरीके से CSS कोड को ब्लॉगर में ऐड कर सकते हो। यदि पहला तरीका काम नहीं करता है तो आप दूसरे तरीके का इस्तमाल कर सकते है।

ब्लॉगर में CSS कोड ऐड करने का पहला तरीका

1. सबसे पहले ब्लॉगर के अंदर Theme ऑप्शन पर क्लिक करे।
2. उसके बाद Edit HTML ऑप्शन पर क्लिक करे।
3. उसके बाद आपके सामने ब्लॉगर का HTML खुल जायेगा। अब आपको एक बार HTML के अंदर क्लिक करना है और उसके बाद कीबोर्ड से Ctrl+F दबाना है। Ctrl+F दबाने पर HTML में दाई तरफ ऊपर कॉर्नर में एक सर्च बॉक्स खुल जायेगा। उस सर्च बॉक्स में आपको ]]></b:template-skin> लिख कर सर्च करना है। यदि इस कोड से आपको कुछ भी नहीं मिलता है तो आप </b:template-skin> लिख कर सर्च करे। जैसे ही आप ये कोड लिख कर सर्च करोगे तो ये कोड HTML के अंदर जहा पर भी होगा वहा हाईलाइट हो जायेगा।
4. अब आपको ऊपर दिया गया CSS कोड को कॉपी करना है और ]]></b:template-skin> कोड के ऊपर पेस्ट कर देना है। ध्यान रहे आपको ]]> से पहले CSS कोड को पेस्ट करना है।
5. इतना करने के बाद Save theme पर क्लिक कर के थीम को सेव करे।

ब्लॉगर में CSS कोड ऐड करने का दूसरा तरीका

यदि पहले तरीके से आपका CSS कोड काम नहीं करता है या फिर यदि आप पहले तरीके से CSS कोड ब्लॉगर के अंदर ऐड नहीं कर सकते हो तो एक और तरीका है जिससे आप अपने ब्लॉगर में CSS कोड ऐड कर सकते हो। ये तरीका पहले वाले तरीके से भी आसान है।

1. सबसे पहले ब्लॉगर के अंदर Theme ऑप्शन पर क्लिक करे।
2. उसके बाद एक नया पेज खुलेगा उसके अंदर आपको “Customize” के नाम से एक ऑप्शन मिलेगा उस पर क्लिक करे।
3. उसके बाद आपके सामने Blogger Theme Designer खुल जायेगा। अब आपको “Advanced” के नाम से एक ऑप्शन मिलेगा आपको उस पर क्लिक कर देना है।
4. Advanced ऑप्शन पर क्लिक करने के बाद आपको “Add CSS” के नाम से एक ऑप्शन दिखाई देगा उस पर क्लिक करे।
5. Add CSS ऑप्शन पर क्लिक करने के बाद आपके सामने Custom CSS का बॉक्स खुल जायेगा। इस बॉक्स के अंदर आप ब्लॉगर के अंदर जो भी CSS कोड ऐड करना चाहते हो वो ऐड कर सकते हो। अब आपको ऊपर दिए गए CSS कोड को कॉपी करना है और उसे इस Custom CSS बॉक्स में पेस्ट कर देना है।
6. उसके बाद “Apply to Blog” ऑप्शन पर क्लिक कर देना है। इतना करने पर CSS कोड आपके ब्लॉगर में ऐड हो जायेगा।

ब्लॉगर में Responsive Table बनाने के लिए HTML कोड का इस्तमाल कैसे करे ?

ऊपर दिया गया CSS कोड को अपने ब्लॉगर में ऐड कर लेने के बाद अब आप HTML कोड की सहायता से आसानी से Responsive Table बना सकते हो। अब देखिये आप जिस पेज या पोस्ट के अंदर Responsive Table बनाना चाहते हो उस पेज या पोस्ट के अंदर आपको निचे दिया गया HTML कोड ऐड करना होगा। HTML कोड को पोस्ट या पेज में किस तरह से ऐड करना है उसका तरीका भी निचे बताया गया है।

<table border=1>
<tr>
<th>No.</th>
<th>Social Media</th>
</tr>
<tr>
<td>1.</td>
<td>YouTube</td>
</tr>
<tr>
<td>2.</td>
<td>Facebook</td>
</tr>
<tr>
<td>3.</td>
<td>Twitter</td>
</tr>
<tr>
<td>4.</td>
<td>Instagram</td>
</tr>
 </table>

1. उसके बाद “New post” ऑप्शन पर क्लिक करना है।
2. उसके बाद आपको HTML ऑप्शन पर क्लिक करना है।
3. HTML ऑप्शन पर क्लिक करने के बाद आपके सामने पोस्ट का HTML खुल जायेगा। अब आप पोस्ट के अंदर जहा पर Responsive Table लगाना चाहते हो वहा पर ऊपर दिया गया HTML कोड पेस्ट कर दीजिये।
4. इतना करने पर आपके ब्लॉगर की पोस्ट या पेज के अंदर एक Responsive Table बन जाएगी। ऊपर टेबल के लिए जो HTML कोड दिया गया है उसके अंदर 4 Row और 2 Column बनाये गए है आप चाहे तो इनको कम या ज्यादा भी कर सकते हो।

यदि आप टेबल को एडिट करना सीखना चाहते हो तो निचे दिए गए लिंक पर क्लिक कर के वीडियो देख सकते हो और यदि आपके कोई सवाल है तो आप निचे कमेंट कर के पूछ सकते हो।

वीडियो देखने के लिए यहाँ क्लिक करे