Make a WordPress Pricing Table with TablePress

Подписаться 4,1 тыс.

Просмотров 14 тыс.

50% 1

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.buildthatwebsite.com/vide...
➜ More Tablepress CSS: www.buildthatwebsite.com/tabl...
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.buildthatwebsite.com/tabl...
👉 Tools & Plugins I Use
-----------------------------------------------
• Hosting: Cloudways buildthatwebsite.com/cloudways
• Theme: Generatepress - buildthatwebsite.com/generate...
• Page Builder: Elementor Pro - buildthatwebsite.com/elementor
• Site speed & Optimization: WPRocket - buildthatwebsite.com/wprocket

Хобби

Опубликовано:

10 фев 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 21

@the23rdsubject 4 месяца назад

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

@larryfarr 2 года назад

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 2 года назад

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

@dvlprsakib9970 3 года назад

awesome tutorial ..thank you

@BuildThatWebsite 3 года назад

Glad you liked it!

@user-cg5xo8xt6q 3 года назад

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

@BuildThatWebsite 3 года назад

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

@mahendrashah7214 3 года назад

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

@BuildThatWebsite 3 года назад

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/

@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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-151NXMk0a2c.html

@calebfortune Год назад

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

@jovanperic4214 2 года назад

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 2 года назад

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 3 года назад

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 3 года назад

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 3 года назад

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

@johnhelyar1366 3 года назад

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 3 года назад

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 3 года назад

@@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 3 года назад

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.