Make a WordPress Pricing Table with TablePress

[@the23rdsubject]

Still relevant (2024). Thank you for the simple and detailed explanation! :)

[@larryfarr]

Whoa! What an excellent tutorial. Top notch content along with an excellent delivery. You deserve 10 stars! Thank you very much for sharing your expertise with us.

[@BuildThatWebsite]

Thanks Larry. Please let me know if you have an idea for a future video.

[@МоскаленкоНикита-й5у]

Hey guys, thanks for sharing. Would be great if you can share the CSS code examples that you use in that video.

[@BuildThatWebsite]

I do plan to, I haven't figured out exactly where I want to host it though.

[@dvlprsakib9970]

awesome tutorial ..thank you

[@BuildThatWebsite]

Glad you liked it!

[@calebfortune]

I love this! Question tho. My tablepress table has a super thin black border around the whole thing. It appears to be default and my css isn’t affecting it. Any idea what that is?

[@BuildThatWebsite]

Probably default table styling from your theme. You can use the developer tools in your browser to find the css rule that is causing it. If you've never used it before, this can get you started: kzbin.info/www/bejne/Z2aUf4uDoJWUaMU

[@calebfortune]

@@BuildThatWebsite Thanks! I tinkered and was able to kill it on the column level using border: hidden;

[@johnhelyar1366]

I am working with table press and I am stuck on being able to add a gap between the columns I have the columns and want to add say 10px between them can you help?

[@BuildThatWebsite]

Add a class to the table, such as 'border-spacing'. Then you can write a CSS rule: table.border-spacing { border-collapse: separate; border-spacing: 10px 0; } I think I may have covered this at the very end of the video.

[@johnhelyar1366]

@@BuildThatWebsite you may of done but might of missed it sorry if I did. I have another question on my site i have 3 tables next to each other currently i have them as 3 separate tables which is ok but increases the DOM count of my site but when looking on a mobile it stacks them nicely down the page but when i have 3 in the same table it just squishes them together and doesnt stack them down nicely is there away to get around this?

[@BuildThatWebsite]

Place them vertically instead of side by side? I'd have to see what you're talking about, but 3 tables next to each other would definitely be squished.

[@mahendrashah7214]

nice video and very useful too. can you also show how add star rating ? Thanks !

[@BuildThatWebsite]

There are a number of free plugins that have a star-rating shortcode. That's the easiest method. If you know a little PHP, you can use the built-in WordPress star rating function: developer.wordpress.org/reference/functions/wp_star_rating/

[@jovanperic4214]

Thank you so much for this tutorial. The following code doesn't work on images but text is OK. .tablepress.test-table td { text-align: center; } .tablepress.test-table th { text-align: center; }

[@BuildThatWebsite]

If your images aren't being centered then the most likely cause is the HTML you're using to insert the image has a class in it that is setting a different alignment. For example

[@theuttamgupta]

Hey, You give a Amazing design in tablepress by custom CSS Can you share whole CSS (same as table image look) I Checkout your blog post but not found Whole CSS. If you can share whole CSS then You'll make my Day!

[@BuildThatWebsite]

I definitely need to do that. I really hope I have the demo page saved somewhere so I don't have to rebuild. I'm travelling at the moment but will try to find it when I return.

[@theuttamgupta]

@@BuildThatWebsite Thanks buddy! Try to find that'll really helpful for me. And do mentioned me if are adding. Happy Traveling ❤️