ब्लॉगर में टेबल कैसे बनाएं || How to Create table in Blogger ||

इस पोस्ट में हम सीखेंगे की किस तरह आप html code और css कोड के द्वारा आप ब्लॉगर में table का निर्माण कर सकते हैं। क्योंकि ब्लॉगर में हमे table का कोई ऑप्शन नही मिलता।

ब्लॉगर में टेबल कैसे बनाएं || How to Create table in Blogger ||

ब्लॉगर में html और css code की सहायता से आप एक रेस्पॉन्सिव टेबल का निर्माण कर सकते हैं, रेस्पॉन्सिव टेबल वो table होती है जो मोबाइल या pc की स्क्रीन के अनुसार अपने आप को adjust कर लेती हैं। इसको बनाने के लिए हमे html aur css कोड की जरूरत होती हैं।

CSS CODE को BLOGGER में कैसे ADD करें।

ब्लॉगर में Table को बनाने के लिए नीचे दिए गए css code को अपने ब्लॉगर में add करना पड़ेगा। यहां से आप इस code को copy कर लीजिए।

अब हम code को Add करना सीखेंगे।

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 Code को ब्लॉगर में add करने के दो तरीके हैं।

तरीका 1

ब्लॉगर में css code को add करने का तरीका।

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 कोड को पेस्ट करना है।

इतना करने के बाद Save theme पर क्लिक कर के थीम को सेव करे।

तरीका 2

ब्लॉगर में 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 बनाये गए है आप चाहे तो इनको कम या ज्यादा भी कर सकते हो।