HomeWordpress

ADD Stylish Table in WordPress Without Plugin

Like Tweet Pin it Share Share Email

add table wordpress

WordPress par sabhi functions ke liye plugins available hain, par sabhi functions ke liye aap plugins ka use kare yah jaruri nahi hai.




Jo kaam aap bina plugin ke kar sakte hain, uske liye plugin use na hi kare wo behtar hai kyunki maximum plugins ka use direct aapki site speed ko slow banati hai.

WordPress par kayi aise work hain jo aap without plugin ke kar sakte hain like social buttons add karna, buttons add karna, table create karna and many others.

Aaj main aapko guide karunga ki kaise aap CSS ke jariye stylish table bana sakte hain without any plugin.

CSS (Cascading Style Sheets) ki knowledge agar aapko hai to website me aap kuch bhi change kar sakte hain aur site ko behtar design kar sakte hain.

To chaliye CSS se hum stylish Tables kaise banaye wo learn karte hain.




Create Stylish Table using CSS

HTML me table display karne ke liye <table> element ka use kiya jata hai.

  • Table titles add karne ke liye <th> tag ka use hota hai.
  • <tr> tag ka use table elements ko wrap karne ke liye hota hai
  • <td> tag ka use table me elements add karne ke liye kiya jata hai.

See below:

Now See result:

CSS Table

WordPress Me CSS Table Add kaise kare?

CSS se aap alag-alag design and look me table add kar sakte hain.

Sabhi table ka html code same hota hai, bus CSS style aapko change karna hota hai.

Below main aapko alag-alag table style show kar raha hu jo aap wordpress me easily add karke use kar sakte hain.

1. Hover effect Table

Sabse pahle wordpress dashboard par Appearance » Edit CSS par below CSS style add karke save kare.

CSS style add karne ke baad ab Post editor me text mode me below table html add kare.

Jaisa ki above table me aap dekh rahe hain first <th> tag me maine table ki main property ko add kiya hai.




<td> tag se table ke elements ko add kiya hai and <tr> tag se table elements ko wrap kiya hai.

  • Agar aapko table ki hover effect ko different colour me change karna hai to tr:hover{background-color:#f5f5f5} me other css color add kare
  • Agar table border ka color change karna hai to border-bottom: 1px solid #ddd ki jagah other css color add kare

Now See preview:

CSS Table

2. Colourful Table

Sabse below CSS style apne Edit CSS me add karke save kare.

Ab Post editor me text mode me below html table paste kare. Remember HTML table same hota hai.

  • Agar aapko table ka main item ka colour change karna hai to CSS style me background-color: #4CAF50; ki jagah other css color add kare.
  • Agar table element ka background color change karna hai to CSS style me tr:nth-child(even){background-color: #f2f2f2} ki jagah other color add kare.

Now See below Result:

CSS Table




To is tarah se aap wordpress me kisi bhi plugin ke bina stylish CSS tables add kar sakte hain. Above CSS code ko aap customize karke table ko kisi bhi tarah ka look de sakte hain.

Remember table ka HTML code same hota hai aapko change sird CSS style me karna hai. HTML code me aapko apne elements add karna hai aur you are done!

To learn more about how to create CSS table visit W3school

Comments (4)

  • sir jab aapki site askmehindi search karo to google me AskMeHindi is a Hindi Blog to learn about Blogging, WordPress Tutorials, SEO, Internet and Howto Guide. ye show hota hai plz sir mujhe batye aap mujhe ye seeting karne ke liye kya karna hoga

    Reply
    • Author

      Yoast Plugin me Title & metas open kare, usme Home page tab open kare. Yaha aap Meta description template me add kar sakte hain.

      Reply
  • bhai ye btao agr hume navigaton me menu bar or sidebar me table daalna hai to kaise daalege . meri website theme free waali hai or mujhe use change krna hai ? jaise aapki site hai design vaise ?

    Reply
    • Author

      Hello,
      aap Sidebar me categories me icons kaise add kare uski baat kar rahe hain?
      Aapne apni site mention nahi ki hai warna main aapko kuch tips deta.
      Aap wordpress theme ko apne according customize kar sakte hain, free themes me jyada options nahi hote but agar aap premium theme use karte hain to usme bina kisi coding knowldge ke aap theme ko design kar sakte hain.
      Wordpress theme bahut pricy nahi hain. Aap MyThemeshop par bahut kam price me theme buy kar sakte hain, regular offer time me.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *