TablePress Tutorial: build Beautiful, Responsive WordPress Tables
HTML-код
- Опубликовано: 7 июн 2024
- 👉 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 
Хобби
![TRASH or PASS! Eminem ( Houdini ) [REACTION!!!]](http://i.ytimg.com/vi/cB1WrZcMwMc/mqdefault.jpg)
![Import Google Sheets To WordPress [Auto Sync]](/img/1.gif)
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!! 🙏🏻🙏🏻🙏🏻
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.
Thank you so much! I appreciate the feedback.
Outstandingly clear and well-explained. Thank you! 👍🙏
Thanks for sharing this plugin. That's what I need!
Thanks a lot. The tutorial is clear to understand in every steps.
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.
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: ruclips.net/video/eQS66XPi0zA/видео.html
Style Tablepress / make a pricing table: ruclips.net/video/jNTJTBRrJIk/видео.html
Let me check them out. Thank you 💯💯
subscribed, liked, clicked on the notification button! ii what a presentation! thank you so much for this.
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?
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. 🙏
Welcome to the channel, glad I could help!
Very comprehensive and easy to understand- many thanks 🙏
Glad it was helpful!
Thank you! It was exactly the type of table I was looking for
Excellent. A dynamite tutorial on a dynamite plugin. Thank you!
you a Star!!thanx a mill i actually created a database with this table style..big uuups to you!!
Hi, Thank you for making this video, really appreciated
You're welcome! Glad it was useful.
Thank you so much this was very informative
AWESOME, Thx mate!
Your explanation is great. Learned a lot from this video.
Thank you for sharing your knowledge.
Stay blessed
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.
Дякую тобі. Мені дуже була потрібна ця інформація 😇
Saw many videos, But this video is the best about table press.
I love to hear that!
Thanks, you saved me about 2 hours and the money I was about to spend on a paid plugin!!
That's great! Which part of the video saved you from having to buy a paid table plugin?
Thank you for doing this
I think you covered all basis here. Thank you for planning this out so well. Great video. I just sub'd.
Thanks for the Sub! LMK if you have any ideas for future tutorials
A very complete video. You saved my life :)) Thaks a million !!
You're very welcome.
man you do all, thank you.
You are a god send! Seriously you saved me so much headache. Thank you!
You're welcome!
I like your videos, keep up the work man!
I appreciate it!
Thank you alot, this saved me alot of time and headache!!!
Awesome! Is there anything else you would like to learn about? I'm looking for video ideas.
@@BuildThatWebsite it would be great if you could do a video on "Content SEO"
thank you...very efective video
Informative and easy tutorial
Thank you 😃
thanks man amazing :)
Thanks man!
Great video!! Thanks!!
You're welcome!
thank you 😍🧡
excellent video
Hi, Thank you. goodjop I form Thailand
good explanation.............thank you
You are welcome!
thank you, yout video very helpfull
Glad to hear that!
hi, if I want one of the cells with vertical text, how can I do that? Great video by the way.
nice one
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 🙏🙏🙏
this amazing than you again
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!
Thankss
Thank you
Welcome!
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?
Can javascript only be use for payfor version (for responsive)?
Hi, can you please help me with a code that will make empty rows to not display on table press?
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.
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! :)
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.
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
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.
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.
@@BuildThatWebsite alright thank you! I'll look into it.
Why didn't it change after I added the background color to "column-1"?
Any changes being done in the Inspect section are immediately reverting back to "normal" after changes are made.. Know what could be causing this?
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
You can manually target any cell or row by using the row-num and column-num css classes (visible in the html markup)
Create table in elementor. easy way
ruclips.net/video/0LDvMGmoZJ4/видео.html
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?
I don't think so, but that's just a guess.
Does it have a transparent theme for the wordpress background
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
Also does it horizontal scoll
Yes you can enable horizontal scroll via the datatables javascript library (included).
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?
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.
How make link to all wide rows in TablePress? Now I can do it only in one sections of rows
Create table in elementor. easy way
ruclips.net/video/0LDvMGmoZJ4/видео.html
may i ask?
how to create table order with id order, name, status, n price in Tablepress?
thx
Create table in elementor. easy way
ruclips.net/video/0LDvMGmoZJ4/видео.html
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?
how to I use this plugin in oxygen builder?
You can insert the tables via a shortcode
Responsive 21:05
hi,can i make restaurant menu using table press
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: ruclips.net/video/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.
How much information can be in one table? Infinite?
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.
sorry the table press am using dont have a sorting option how do i get that
help please
When editing the table, look for the option below the table to enable the 'javascript datatables library' which will give you sorting/filtering functionality.
@@BuildThatWebsite i have it activated but still having the same issue please
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.
ruclips.net/video/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.
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.
How do i add a "No Follow" to the image and button link since the item is from AMAZON?
Tablepress lets you edit the HTML directly, so just add rel="nofollow" or rel="sponsored" to the tag like this:
Buy
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 '>'
Sir tell me in this website theme .name please please please
The theme is GeneratePress. I use the Pro version but there is a (limited) free version also.
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;
}
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)
@@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
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.
@@BuildThatWebsite then I should add the CSS and enable these settings at the same time?
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
Lots of coding there.. not ideal.
Tablepress functions fine out of the box. But if you want to build more advanced tables, yeah it requires some CSS.
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
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)