Тёмный

TablePress Tutorial: build Beautiful, Responsive WordPress Tables 

Build That Website
Подписаться 4,1 тыс.
Просмотров 80 тыс.
50% 1

👉 Save 40% on the SUPERFAST Cloud hosting I use: (Cyber-Monday)
buildthatwebsite.com/cloudways
Learn to create beautiful WordPress tables with TablePress. I'll show you how to add CSS styles, Buttons & Images. And we'll make them fully responsive so they look great on small screens.
➜ Free Tablepress CSS styles: www.buildthatwebsite.com/tabl...
We'll cover everything from plugin installation and basic usage to more advanced features like custom CSS classes, the javascript datatables addon.
************************************
VIDEO CHAPTERS
************************************
0:00 - Intro
0:22 - Install TablePress plugin
1:00 - Add New Table
1:55 - Table Headers
2:35 - Adding data to the table
2:50 - Add an image to the table
3:50 - Resizing images
4:50 - Add a Column
5:03 - Moving & Reordering rows and columns
5:30 - Sorting & Filtering
6:05 - Add your table to a post or page (TablePress Shortcode)
7:15 - Adding Links & Buttons
8:04 -Advanced Editor
9:00 - Adding Rows
9:24 - Deleting Rows
9:36 - Duplicating & Reordering Rows
9:50 - Styling TablePress with CSS
10:23 - Where to put custom CSS code
👉 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

Хобби

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

 

7 июл 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 124   
@Sofia-iw3fs
@Sofia-iw3fs 2 года назад
Omg! This is so awesome! I’ve been searching for a few days how to make these comparison tables but nobody teaches it for free, they always ask you to buy a plug-in! You saved me! Thank you!! 🙏🏻🙏🏻🙏🏻
@scotimages
@scotimages 3 года назад
Very good and comprehensive description, without any messing about, false excitement or hype. Well done and many thanks. Will embed this video on my club site for future web editors.
@BuildThatWebsite
@BuildThatWebsite 3 года назад
Thank you so much! I appreciate the feedback.
@thismoment57
@thismoment57 2 года назад
Outstandingly clear and well-explained. Thank you! 👍🙏
@jninlove
@jninlove 3 года назад
Thanks for sharing this plugin. That's what I need!
@PRfollow
@PRfollow 2 года назад
Thanks a lot. The tutorial is clear to understand in every steps.
@skylarfact
@skylarfact 2 года назад
I can't believe how long i have been searching for a video like this. Thank you for the amazing tutorial. I was finally able to implement what i wanted to do.
@BuildThatWebsite
@BuildThatWebsite 2 года назад
I'm glad you liked it! If you're looking to learn more about styling tablepress, I've got two other videos on it: Make a head-to-head comparison table: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-eQS66XPi0zA.html Style Tablepress / make a pricing table: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-jNTJTBRrJIk.html
@skylarfact
@skylarfact 2 года назад
Let me check them out. Thank you 💯💯
@3nails1cross11
@3nails1cross11 Год назад
You are a hidden gem dude. Just recently installed a Tablepress plugin and I searched for it and luckily your link pop-ups. Thank you so much for sharing such knowledge. God bless you. 🙏
@BuildThatWebsite
@BuildThatWebsite Год назад
Welcome to the channel, glad I could help!
@juliewambua4577
@juliewambua4577 3 года назад
Very comprehensive and easy to understand- many thanks 🙏
@BuildThatWebsite
@BuildThatWebsite 3 года назад
Glad it was helpful!
@letyjay9715
@letyjay9715 3 года назад
subscribed, liked, clicked on the notification button! ii what a presentation! thank you so much for this.
@BuildThatWebsite
@BuildThatWebsite 3 года назад
Thanks so much for the positive feedback! I worked hard on that video, and I'm thrilled to hear it's useful. Do you have any suggestions for other tutorials or topics?
@TrangNguyen-jt9bj
@TrangNguyen-jt9bj 2 года назад
Thank you! It was exactly the type of table I was looking for
@bryanshobbies
@bryanshobbies 3 года назад
Thanks, you saved me about 2 hours and the money I was about to spend on a paid plugin!!
@BuildThatWebsite
@BuildThatWebsite 3 года назад
That's great! Which part of the video saved you from having to buy a paid table plugin?
@rscott7706
@rscott7706 Год назад
Excellent. A dynamite tutorial on a dynamite plugin. Thank you!
@fanastroneer
@fanastroneer 2 года назад
Дякую тобі. Мені дуже була потрібна ця інформація 😇
@Lenniefinch
@Lenniefinch 3 года назад
Thank you for doing this
@wozskiyeh9651
@wozskiyeh9651 Год назад
AWESOME, Thx mate!
@Omghita
@Omghita 2 года назад
A very complete video. You saved my life :)) Thaks a million !!
@BuildThatWebsite
@BuildThatWebsite 2 года назад
You're very welcome.
@lucianjagers8334
@lucianjagers8334 Год назад
you a Star!!thanx a mill i actually created a database with this table style..big uuups to you!!
@zavianzee2937
@zavianzee2937 3 года назад
Hi, Thank you for making this video, really appreciated
@BuildThatWebsite
@BuildThatWebsite 3 года назад
You're welcome! Glad it was useful.
@edwardswingler
@edwardswingler 2 года назад
You are a god send! Seriously you saved me so much headache. Thank you!
@BuildThatWebsite
@BuildThatWebsite 2 года назад
You're welcome!
@xsilverx1198
@xsilverx1198 9 месяцев назад
Thank you so much this was very informative
@NanaOssgh
@NanaOssgh 2 года назад
man you do all, thank you.
@hamzameraj3352
@hamzameraj3352 3 года назад
Saw many videos, But this video is the best about table press.
@BuildThatWebsite
@BuildThatWebsite 3 года назад
I love to hear that!
@dvlprsakib9970
@dvlprsakib9970 2 года назад
thank you...very efective video
@ghfans3032
@ghfans3032 3 года назад
Your explanation is great. Learned a lot from this video. Thank you for sharing your knowledge. Stay blessed
@BuildThatWebsite
@BuildThatWebsite 3 года назад
Thanks! I'm glad you enjoyed it. Let me know what else you'd like to learn and I'll try to make a video on it.
@benjaminpestner1514
@benjaminpestner1514 2 года назад
I like your videos, keep up the work man!
@BuildThatWebsite
@BuildThatWebsite 2 года назад
I appreciate it!
@psykotronikpicturesque
@psykotronikpicturesque 2 года назад
I think you covered all basis here. Thank you for planning this out so well. Great video. I just sub'd.
@BuildThatWebsite
@BuildThatWebsite 2 года назад
Thanks for the Sub! LMK if you have any ideas for future tutorials
@dailydriver5942
@dailydriver5942 2 года назад
Great video!! Thanks!!
@BuildThatWebsite
@BuildThatWebsite 2 года назад
You're welcome!
@maxab4372
@maxab4372 3 года назад
Informative and easy tutorial
@BuildThatWebsite
@BuildThatWebsite 3 года назад
Thank you 😃
@zaid-salameh
@zaid-salameh 2 года назад
thanks man amazing :)
@raghavank8788
@raghavank8788 3 года назад
good explanation.............thank you
@BuildThatWebsite
@BuildThatWebsite 3 года назад
You are welcome!
@techbestreview3989
@techbestreview3989 2 года назад
Thanks man!
@debajyotinath5021
@debajyotinath5021 2 года назад
excellent video
@pourjafar_com
@pourjafar_com 2 года назад
thank you 😍🧡
@samuelninsiima8580
@samuelninsiima8580 3 года назад
Thank you alot, this saved me alot of time and headache!!!
@BuildThatWebsite
@BuildThatWebsite 3 года назад
Awesome! Is there anything else you would like to learn about? I'm looking for video ideas.
@oldschoolgift5105
@oldschoolgift5105 2 года назад
@@BuildThatWebsite it would be great if you could do a video on "Content SEO"
@lightingglow2571
@lightingglow2571 3 года назад
Thank you
@BuildThatWebsite
@BuildThatWebsite 3 года назад
Welcome!
@asikurrahman7111
@asikurrahman7111 3 года назад
Thankss
@khonshobreview
@khonshobreview 2 года назад
Hi, Thank you. goodjop I form Thailand
@teknikindustri7895
@teknikindustri7895 3 года назад
thank you, yout video very helpfull
@BuildThatWebsite
@BuildThatWebsite 2 года назад
Glad to hear that!
@rubenbojorquez4614
@rubenbojorquez4614 Год назад
hi, if I want one of the cells with vertical text, how can I do that? Great video by the way.
@meshtarua
@meshtarua Год назад
nice one
@albertovillalbasanchez4511
@albertovillalbasanchez4511 2 года назад
this amazing than you again
@luft_hover
@luft_hover 10 месяцев назад
Thanks for the tutorial.. Very helpful and informative.. one further question.. if I want to create a category list (or category menu) on the same page the table is in. In the table, each column (or row) presents a product with its parameters. And when I click each item in the category list, the data table will show the corresponding product(s). How can I realize this? many thanks!
@desinervirtual6513
@desinervirtual6513 2 года назад
great tutorial, congratulations. I'm following your instructions. I do not speak english very well. I need to adjust the size of the search input field for mobile. It was too big in my version. I couldn't do it via css, could you help please?
@chulakapitigala5147
@chulakapitigala5147 Год назад
Hi this is very useful video, can you give a tip to show only selected columns and rows in the table... thank you very much your knowledge sharing and bless you 🙏🙏🙏
@sapple4028
@sapple4028 Год назад
Hi, can you please help me with a code that will make empty rows to not display on table press?
@TimFrisch
@TimFrisch 8 месяцев назад
Can javascript only be use for payfor version (for responsive)?
@smmsolensy
@smmsolensy Год назад
I have a question, how synchronize the prices on the website and in the table and without posting table on the site, but simply changed in Google Sheets and prices changed automatically on the site? Will be grateful for the answer.
@michaelhofby
@michaelhofby Год назад
Hey man thanks . Do you know how to "mark" some cells as titles and make them text-align center ?? Cuz it seems like tablepress only makes the top most cells titles
@BuildThatWebsite
@BuildThatWebsite Год назад
You can manually target any cell or row by using the row-num and column-num css classes (visible in the html markup)
@FRiddles45
@FRiddles45 4 месяца назад
Create table in elementor. easy way ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-0LDvMGmoZJ4.html
@valiik
@valiik 7 месяцев назад
Responsive 21:05
@LonghornLounge
@LonghornLounge Месяц назад
Any changes being done in the Inspect section are immediately reverting back to "normal" after changes are made.. Know what could be causing this?
@vesas5214
@vesas5214 3 года назад
Great tutorial! How much can you modify these tables? Like is it possible to multiple items in the same cell?. Let's say I wanted that there is photo of Reese's and under it it say "Reese's". What if I want that "Reese's" text to be a link? Or just that photo to be a link. Can I make the rows expand? I mean like if I click the Reese's row, it expands and shows for example the nutritional values.
@BuildThatWebsite
@BuildThatWebsite 3 года назад
There's no easy way to make the table rows expand with a click. You might be able to get that functionality in a paid table plugin. As for the links, yes you can make both the image and/or text a link as shown in the video. You can also Put multiple elements in the same cell, but it will obviously make the cell taller.
@vesas5214
@vesas5214 3 года назад
@@BuildThatWebsite alright thank you! I'll look into it.
@amitnair6455
@amitnair6455 5 месяцев назад
Hello, your tutorial is awesome! Great job. I am searching for WP table plugins that can integrate with WP scraping plugins. So my aim is to create table that has info from data scraped from various webpages. Is that possible with this plugin or some other plugin? I don't want to code that much, so looking for something very simple! Thanks a bunch in advance! :)
@BuildThatWebsite
@BuildThatWebsite 4 месяца назад
You'd probably need to use a 3rd-party scraper to CSV and then you could manually upload the CSV into TablePress. I don't think you're going to find a tool that scrapes directly to TablePress, but I could be wrong.
@sumitkumarjogi3093
@sumitkumarjogi3093 6 месяцев назад
I have attached a link in the table, while clicking on it, it opens in the New Tab where no header and footer are showing means showing on the Plain Page. Please help me out. Thanks
@evindejesusvisuals6407
@evindejesusvisuals6407 2 года назад
Does it have a transparent theme for the wordpress background
@BuildThatWebsite
@BuildThatWebsite 2 года назад
I believe the background is transparent by default. If not, it's easy to change the TD background with CSS as shown in my tutorial: www.buildthatwebsite.com/tablepress-css-styles
@huameicarbon6033
@huameicarbon6033 10 месяцев назад
Why didn't it change after I added the background color to "column-1"?
@sesawang7339
@sesawang7339 2 года назад
hi. i have a question. if i have a search function one home page. for example i search a name, can the result shown from the table?
@BuildThatWebsite
@BuildThatWebsite 2 года назад
I don't think so, but that's just a guess.
@evindejesusvisuals6407
@evindejesusvisuals6407 2 года назад
Also does it horizontal scoll
@BuildThatWebsite
@BuildThatWebsite 2 года назад
Yes you can enable horizontal scroll via the datatables javascript library (included).
@user-lh8cc1yt1l
@user-lh8cc1yt1l Год назад
may i ask? how to create table order with id order, name, status, n price in Tablepress? thx
@FRiddles45
@FRiddles45 4 месяца назад
Create table in elementor. easy way ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-0LDvMGmoZJ4.html
@justkrem7764
@justkrem7764 9 месяцев назад
How make link to all wide rows in TablePress? Now I can do it only in one sections of rows
@FRiddles45
@FRiddles45 4 месяца назад
Create table in elementor. easy way ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-0LDvMGmoZJ4.html
@Glovas
@Glovas Год назад
Im trying to make a table that wp login users can see a single line in a table with their own information. Is this posible? I tried with row plugin but I have no idea what I'm doing wrong. Can you help?
@BuildThatWebsite
@BuildThatWebsite Год назад
It looks like there's a solution via an extension already: wordpress.org/support/topic/tablepress-show-only-table-rows-that-contain-current-logged-in-user-id/ Otherwise you could hire someone on upwork to custom code that pretty cheaply I think.
@wayofliife3096
@wayofliife3096 2 года назад
hi,can i make restaurant menu using table press
@BuildThatWebsite
@BuildThatWebsite 2 года назад
Sure you can. It would be an OK tool for the job, and the main advantage is you can use the columns to space your menu layout. You would probably want to make the columns stack on mobile, using a technique like I showed here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-eQS66XPi0zA.html Personally, I think Elementor might be a better tool for the job though. And if you use Elementor Pro, you could combine it with advanced custom fields and pull in the menu data dynamically.
@georgelyimo1632
@georgelyimo1632 2 года назад
sorry the table press am using dont have a sorting option how do i get that help please
@BuildThatWebsite
@BuildThatWebsite 2 года назад
When editing the table, look for the option below the table to enable the 'javascript datatables library' which will give you sorting/filtering functionality.
@georgelyimo1632
@georgelyimo1632 2 года назад
@@BuildThatWebsite i have it activated but still having the same issue please
@BuildThatWebsite
@BuildThatWebsite 2 года назад
If you have 'Use Datables' checked and the 'enable sorting/filtering' boxes checked, then you must have an issue loading the javascript file. You either need to clear your cache or there could be an error in one of your javascript files that is causing things to break.
@huameicarbon6033
@huameicarbon6033 11 месяцев назад
how to I use this plugin in oxygen builder?
@BuildThatWebsite
@BuildThatWebsite 11 месяцев назад
You can insert the tables via a shortcode
@oldschoolgift5105
@oldschoolgift5105 2 года назад
How do i add a "No Follow" to the image and button link since the item is from AMAZON?
@BuildThatWebsite
@BuildThatWebsite 2 года назад
Tablepress lets you edit the HTML directly, so just add rel="nofollow" or rel="sponsored" to the tag like this: Buy
@BuildThatWebsite
@BuildThatWebsite 2 года назад
You can put in anywhere in the opening tag as I showed in my example. It can before the href="" or at the very end before the '>'
@cfreeze3691
@cfreeze3691 2 года назад
How much information can be in one table? Infinite?
@BuildThatWebsite
@BuildThatWebsite 2 года назад
You're only limited by your server's resources, but sure you could easily upload a CSV with thousands of rows. Tablepress has no built-in limit that I'm aware of.
@kangfumaster6734
@kangfumaster6734 3 года назад
ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-5R_04UIMkJM.html the search bar does not appear in my case when I insert the table shortcode in the post. Any idea why this is so? The "Search/Filtering" function is activated by default but yet the search bar does not appear.
@BuildThatWebsite
@BuildThatWebsite 3 года назад
It's hard to know without seeing your site. Make sure the 'datatables library' option is enabled. Also check the console in chrome inspector tools to see if there are any javascript errors. A Jquery error could possibly break it.
@uclertastekin5655
@uclertastekin5655 10 месяцев назад
​Ayrıntılara bakın 194 / 5.000 Çeviri sonuçları Çeviri sonucu Hello, I'm using tablepress, I have a file in zip format, I'm trying to link it in the table, but it didn't work. Can you help me on how to do it?
@teachnoor6754
@teachnoor6754 3 года назад
Sir tell me in this website theme .name please please please
@BuildThatWebsite
@BuildThatWebsite 3 года назад
The theme is GeneratePress. I use the Pro version but there is a (limited) free version also.
@atccompany1937
@atccompany1937 Год назад
Hi, Thanks a lot for sharing this video.. I have one question plz, the table I've created is not responsive! I've tried to add the CSS code you mentioned but that doesn't worked. can you please help with that? thanks, a lot .dataTables_wrapper .tablepress { width: 100% !important; }
@BuildThatWebsite
@BuildThatWebsite Год назад
Are you just trying to activate the Horizontal Scroll feature of Tablepress? Or are you using a different responsive method. For the horizontal scroll to work you have to check two settings in the table's admin page (latest version of Tablepress): 1. Offer the following functions for site visitors (CHECKED) 2. Enable horizontal scrolling (CHECKED)
@atccompany1937
@atccompany1937 Год назад
@@BuildThatWebsite no these settings are off, I used the CSS code you mention, this one only : .dataTables_wrapper .tablepress { width: 100% !important; } but this doesn't work
@BuildThatWebsite
@BuildThatWebsite Год назад
That css doesn't make the table responsive, it makes the table full-width when using the responsive datatables settings. If you don't enable that setting the css does nothing.
@atccompany1937
@atccompany1937 Год назад
@@BuildThatWebsite then I should add the CSS and enable these settings at the same time?
@BuildThatWebsite
@BuildThatWebsite Год назад
Sure that's one way to enable horizontal scrolling on your table. Another easy option is to wrap it in a div or use a generateblocks container block and set "overflow-x: scroll" on the wrapper
@zeroimpetuous
@zeroimpetuous 2 года назад
Lots of coding there.. not ideal.
@BuildThatWebsite
@BuildThatWebsite 2 года назад
Tablepress functions fine out of the box. But if you want to build more advanced tables, yeah it requires some CSS.
@Lamaffia360
@Lamaffia360 2 года назад
Hello, thanks for your videos I have learned a lot from Spain 👌​, I want to ask, in tablepress I can zoom just by mouse over the image Spanish Hola, gracias por tus videos he aprendido mucho desde españa 👌​, quiero preguntar, en tablepress puedo hacer zoom con solo pasar el raton por encima de la imagen
@BuildThatWebsite
@BuildThatWebsite 2 года назад
Puedes combinar TablePress con un 'Lightbox' or otro plugin que usa 'Shortcodes' y incluye zoom funcionalidad. Por ejemplo: wordpress.org/plugins/wp-image-zoooom/ (No lo he probado)
Далее
7 Wordpress Plugins I install on all websites (2024)
15:07
Make a WordPress Pricing Table with TablePress
20:20
Просмотров 13 тыс.
БЫДЛО НА ПУНКТАХ ВАЙЛДБЕРРИЗ
13:26
Creating a Dynamic Table with Ninja Tables Pro
18:51
Import Google Sheets To WordPress [Auto Sync]
12:46
Просмотров 32 тыс.
How To Make a WordPress Website - 2023
1:25:37
Просмотров 1,5 млн
How to Create a Searchable Database in WordPress
4:42
Sass and BEM for beginners
3:45:10
Просмотров 240 тыс.
How to Create Entire Website with ChatGPT (No Coding)
15:15
Жалко Кирилла? #юмор #шутка
1:00
ВЕЛОСИПЕД ЗАГОВОРИЛ
0:15
Просмотров 13 млн