Make a WordPress Pricing Table with TablePress
HTML-код
- Опубликовано: 26 авг 2024
- In this video, I'll show you how to build this beautiful pricing table, using nothing but the free TablePress plugin and some CSS.
➜ Get the complete CSS code: www.buildthatw...
➜ More Tablepress CSS: www.buildthatw...
In this video, you'll learn how to add images to TablePress, change the background colors and text colors for table cells, adjust font-sizes and more!
Along the way, you'll learn some handy CSS code, as well as how to laser-target specific rows, columns and cells in TablePress by using its built-in classes. For more on that, see this article:
www.buildthatw...
👉 Tools & Plugins I Use
-----------------------------------------------
• Hosting: Cloudways buildthatwebsi...
• Theme: Generatepress - buildthatwebsi...
• Page Builder: Elementor Pro - buildthatwebsi...
• Site speed & Optimization: WPRocket - buildthatwebsi...
Still relevant (2024). Thank you for the simple and detailed explanation! :)
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.
Thanks Larry. Please let me know if you have an idea for a future video.
Hey guys, thanks for sharing. Would be great if you can share the CSS code examples that you use in that video.
I do plan to, I haven't figured out exactly where I want to host it though.
awesome tutorial
..thank you
Glad you liked it!
nice video and very useful too. can you also show how add star rating ? Thanks !
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/
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!
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.
@@BuildThatWebsite Thanks buddy! Try to find that'll really helpful for me. And do mentioned me if are adding. Happy Traveling ❤️
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;
}
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
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?
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:
ruclips.net/video/151NXMk0a2c/видео.html
@@BuildThatWebsite Thanks! I tinkered and was able to kill it on the column level using border: hidden;
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?
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.
@@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?
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.