How to create table in blogger post!apne website ke post me table kaise create kare

 How to create table in blogger post!apne website ke post liye responsive table kaise create kare




      Table ek aisa material hai jo ki humara website ke article me jaan dal deta hai. Agar aapko patha nehi hai ki kaise apna website ke post me table create kare to mera ye article end tak jaroor dekhe or mera YouTube video dekhe maine achhe tarika se samjhaya or live dikhaya.
      Jab baat Wordpress ki ati hai to table create karna bilkul asan hai aap layout or java script se table create kar sakte ho lekin blogger me baat alag hai bahat difficult. Agar aapka website WordPress me hai to aap bilkul asan tarika se apna website ke liye table create kar sakte ho lekin aagar aab baat Blogger ki website ke ate hai, aagar aapka website blogger me hai to aapko thoda muskil hone wala hai table create karna. Aapko kuchh CSS code ko apna theme me paste karna hai or kuch HTML Code ko apna post me paste karna hai. 

Table Of Contents:-

1. Responsive table kya hote hai.

2. Agar table Responsive na ho to kya hoga

3. Responsive table kaise create kare.

4. CSS Code kaise kaha HTML me add kare.


5. Responsive table HTML Kaise or kaha Paste kare ?

6. Example of Responsive Table

7. End topic



1.Responsive Table kya hote hai:-

         Responsive table ek aisa table hai jo ki hamara website ka post ko achha impression deti hai. Maan lo agar hum ek table create kiya apna khudka website ke liye to agar wo responsive table hoga to wo different devices me jaisa ki mobile, laptop, desktop, tablet yaadi har tarah ki devices ki display ki hisab se dikhega .

            Responsive table sare devices ke display me fit ata hai jo ki kaafi achha dikhta hai. 



2. Agar Responsive na ho to kya hoga ?


        Agar aapka table responsive na ho aapne khudka mobile or khudka device ke sath fit karke taiyar kiya ho to aapka post me table har device me fit nehi ayega ho sakta hai kuchh data nehi bhi dikhe .

             Agar table responsive na ho bahat sare dikkat e ate rahete hai.


Responsive table kaise create kare:-   

      Aapko simply kuchh CSS Code or kuch HTML Code paste karna hai or aap bilkul responsive table create kar sakte ho.

CSS Code kaise  or kaha paste kare:-

Step:-1 Aapko simply ye wala post ko achhe se dekhna hai or sare step ko achhe se samajna hai.


Step:-2  Aapko ye wala post se CSS Code ko download karna hai or fir download kiya hua code ko copy kar lena hai.


Step:-3 Uske baad aapko simply aapka blogger me jana hai or theme wala option ko choose kar lena hai.

Step:-4 Uske baad aapko simply apna theme me jo Backup option hai waahnase aapko Backup kar lena hai kiun ki aagar kuchh bhi gadbad ho jaye to firse wapas aap khudka data pa sako.

Step:-5 Then aapko simply 'Edit HTML' ko choose kar lena hai or aapko simply apna keyboard me 'Ctr + F' press karna hai. 


Step:-6 Then aapko ek key word search kar lena hai.   Kisika  "]]>".    Hota hai or kisika "</b:template-skin>" hota hai.




Step:-7 Then aapko simply uske upar enter click karna hai or wo wala CSS code ko uske upar me paste kar dena hai or save kar lena hai.



       To guys main aaj is article me step by step bataunga or aapko sare steps follow karna hai.

      Aaj hum apna website ke liye table create karke dikhayenge. 




/* CSS Post Table by
www.njtechnicalhindi.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 for Responsive Table.


Responsive table HTML Kaise or kaha Paste kare ?

     Ye wala HTML code ko aapka blogger website ke post me paste karna hai main step by step batata hoon aap follow kare.

Step:-1
                Aapko simply yehi post se second wala HTML code ko download karke copy kar lena hai.

Step:-2  Then aapka post aap jaha chahate ho ho wohi pe kuch unique identify text de do taki aap HTML me bhi wo hi location pechan saka.

Example:-




Step:-3 Then aapko simply post ko 'HTML View' karlena hai or aapne jo identify marke diya tha wo wala location me jake wo wala text ko remove karke ehi code ko paste kar dena hai.

Example:-



Step:-4 Then aapko simply 'Compose View' pe click kar lena hai then aapka table completely create ho jayega.

Example of Responsive Table:-

No. Aapka post ka kuchh bhi title
1. Aapka marji aap likh sakte ho
2. Anything
3. Anything
4. Anything


Step:-5 Ab aapka marji aap kuchh bhi likh dakte ho aapka post ka text ki anusar table ka length breath increase or decrease hoga.

Step:-6 Aapka marji se aap agar chahte ho to table badha sakte ho aagar aapko table kase badhate complete jankari chahiye to ame follow kare or humara YouTube Channel ko SUBSCRIBE kare or videos dek le aapko patha chal jayega.
YouTube Channel 👉 Responsive Table



<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>

Download and Copy the HTML Code.


Hope you really enjoyed our content, if you really enjoyed then please leave your valuable comments and Follow us on Facebook, Whatsapp, YouTube.



Thanks for Visiting Us.







Post a Comment

0 Comments

Close Menu