Blogger के ब्लॉग पोस्ट में Table कैसे Add करे?

हेलो दोस्तों इस पोस्ट में हम आपको बताने वाले हैं की CSS और HTML Code की सहायता से Blog Post Me Table Kaise Add Kare तो यदि आप भी जानना चाहते हैं कि Blog Me Responsive Table Kaise Use Kare तो आपके लिए यह पोस्ट Important हो सकता है।

जैसे कि आप नीचे टेबल देख सकते हैं यह टेबल 1 responsive table आप भी इसी तरह के टेबल को अपने ब्लॉग पोस्ट में लगा सकते हैं आप चाहे तो इस टेबल में Row या कॉलम भी बढ़ा सकते हैं।

Responsive Table किसे कहते हैं और लगाने के फायदे क्या हैं?

Responsive Table डिवाइस के स्कीन के हिसाब से ऑटोमेटिक एडजस्ट हो जाए उसे ही Responsive Table कहते हैं।

Responsive Table Blog Post Me लगाने का फायदा यह है के मोबाइल कंप्यूटर लैपटॉप पीसी के स्क्रीन के हिसाब से Responsive Table Automatic Adjust हो जाता है।

तो इस पोस्ट में हम आपको Blog post me responsive table add करने के बारे में बताने वाले हैं।

Blog Post Me Table कैसे Add करे?

Blog Post Me Table Add करने के लिए सबसे पहले आपको HTML और CSS Code की जरूरत पड़ेगी जो कि हम आपको हम आपको आगे बताने वाले हैं।
Blogger Blog Post Me Responsible Table Add करने के लिए सबसे पहले आपको नीचे दिए हुए CSS कोड को Copy करें।

/* CSS Post Table by www.mrskt.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%}

Blogger Theme में CSS कोड कहां और कैसे Paste करें?

सबसे पहले आपको ऊपर दिए हुए CSS कोड को कॉपी करे और इस CSS कोड को कॉपी करने के बाद अब इस CSS Code को Blogger में Paste करने के 2 तरीके हैं।

नीचे बताएं गए दोनों तरीकों में से किसी एक तरीके से CSS कोड को अपने Blogger Theme में Paste करें :-

1. CSS कोड को ब्लॉगर थीम मे डालने का पहला तरीका।

पहला तरीका सबसे असान है CSS कोड को Blogger Theme मे Paste करने के लिए

1. सबसे पहले Blogger Account में Login करें 
2. अब Theme पर click करें
3. फिर Customize के option पर click करें
4. अब आपको Advance पर क्लिक करना है 
5. अब आपके सामने Add CSS के Option में एक CSS कोड डालने का बॉक्स ओपन हो जाएगा 
6. अब आपको ऊपर दिया हुआ CSS कोड Paste है फ़िर Apply to blog पर click करें 

अब आपके Blogger Theme में CSS कोड Successfully Add हो जाएगा

2. CSS कोड को Blogger Theme मे Paste करने का दूसरा तरीका।

1. सबसे पहले अपने Blogger Account में Login करें।
2. अब Theme Option पर क्लिक करें।
3. फिर आपको EDIT HTML पर क्लिक करना है अब आपके सामने HTML का Code Box Open हो जायेगा।
4. अब आपको इस कोड को ]]></b:skin> Search करना है।
5. इस कोड को सर्च करने के बाद अब आपको ऊपर दिया हुआ CSS कोड को इस कोड के ]]></b:skin>ऊपर Paste करना है फिर Theme Save करना है।

Blogger Theme में CSS कोड Add करने के बाद अब आपको HTML की सहायता से Blog Post में टेबल को Add करना है जो कि हम आपको आगे बताने वाले हैं।

Blogger के Blog Post में Table कैसे Use करे?

Blog के किसी भी Post Me Table Add करने के लिए सबसे पहले नीचे दिया हुआ HTML कोड को कॉपी करें।

<table border="1"><tbody><tr><th>Number</th><th>All Topic</th><th>Percentage</th></tr><tr><td>1.</td><td>Blogging</td><td>100</td></tr><tr><td>2.</td><td>SEO</td><td>100</td></tr><tr><td>3.</td><td>Blogger</td><td>100</td></tr><tr><td>4.</td><td>Web Design</td><td>100</td></tr><tr><td>5.</td><td>Online Tutorials</td><td>100</td></tr></tbody></table>

ऊपर दिया हुए HTML कोड को कॉपी करने के बाद :-

1. सबसे पहले Blogger Account में Login करें।
2. अब जिस भी Post में Table Add करना है उस पोस्ट को Edit पर Click करके ओपन करें।
3. अब Left Side में Top पर HTML Option पर Click करें।
4. अब आपके सामने पोस्ट की HTML कोडिंग आ जाएगी अब आपको पोस्ट में जहां भी Table Add करना है वहां पर ऊपर दिया हुआ HTML कोड को पोस्ट में Paste करना है।
5. फिर पोस्ट को Save या Update कर दे ।
6. अब आपके Blog Post Me Responsive Table Add हो जाएगा।

आप इस प्रकार से Blogger Blog Post Me Responsive Table Add कर सकते हैं।

Blog Post Me Table Edit Kaise Kare

Blog Post Me Table Add करने के बाद अब Blog Post Me Table Edit करने के लिए या Table बनाने के लिए जैसे कि –

टेबल में कोल्लम बढ़ाना या टेबल के कोई से भी कॉलम में कलर लाना या टेबल को डिजाइन करना इसके लिए आपको नीचे दिए हुए Tags को समझना होगा।

Html Tag को शुरू करने के बाद उस Tag को हमेशा बंद करना होता है।

चलिए आप जानते हैं कि इन सभी Tags का इस्तेमाल करके Table Kaise Banaye?

HTML Table कैसे बनाये?

Table Create करने के लिए यहां पर निचे 3 तरह के Example दिया गया है आप Example कि सहायता से  Blog Post Me Table बना सकते हैं।

Example : 1

<table border="1"><tbody><tr><th>Number</th><td>All Topic</td><td>Percentage</td><tr></tbody></table>

Example : 2

<table border="1"><tbody><tr><td>Number</td><td>All Topic</td><td>Percentage</td><tr><tr><td>Number</td><th>All Topic</th><td>Percentage</td><tr></tbody></table>

Example : 3

<table border="1"><tbody><tr><th>Number</th><th>All Topic</th><th>Percentage</th><th>Star</th><tr><tr><td>1.</td><td>Blogging</td><td>100</td><td>10</td><tr><tr><td>2.</td><td>SEO</td><td>90</td><td>11</td><tr><tr><td>3.</td><td>Web Design</td><td>80</td><td>12</td><tr><tr><td>4.</td><td>Online Tutorials</td><td>70</td><td>13</td><tr></tbody></table>

तो ऊपर बताए गए Example को समझ कर Blog Post में जैसा चाहे वैसा Table Create कर सकते हैं यदि आपको कुछ पूछना है तो आप हमें नीचे कमेंट करके बता सकते हैं।

निष्कर्ष

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