HomeОбразованиеRelated VideosMore From: WordPress Tutorials - WPLearningLab

Build HTML Tables In WordPress | WP Learning Lab

103 ratings | 6986 views
Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL Creating a WordPress HTML table is just like creating a regular HTML table only you're doing it in WordPress. You still use the same tags, table, tr, th, td and the same styles. Luckily, creating tables is quite easy and it's a great way to display data. The biggest drawback of tables is that they are not mobile responsive. So you need to test your tables on mobile to make sure they work how you expect. A good rule of thumb is to make sure that your table doesn't have too many columns because those are what will get in you trouble on mobile. Important table tags you need to know: table - this tag contains the table in its entirety. You can add specific parameters and styles to this tag. Parameters include border, cellpadding and cellspacing. The CSS using the style parameter to create inline styles and the sky is the limit if you know CSS. If you want to learn some CSS check out my CSS channel over here: https://www.youtube.com/channel/UCeFLITjl2v9vtIkftw9UMsw tr - This tag defines the rows of the table. th - Is a special cell tag that goes inside the tr tags. It is the heading data cell. Anything you enter into this cell will centered and bolded. These cells are normally only contained in one row in a table (the heading row). Heading cells are optional. td - This is a regular data cell that will populate every other row in your table. These td tags will contain your data. You can have as many rows (tr) as you want. Inside the rows, the number of td tags will define how many columns your table has. Remember the more columns you have the more likely it is that your table won't be mobile optimized. I hope this information helps you! If you have any questions leave a comment below or ping me @WPLearningLab on Twitter. -------------- If you want more excellent WordPress information check out our website where we post WordPress tutorials daily. https://wplearninglab.com/ Connect with us: WP Learning Lab Channel: http://www.youtube.com/subscription_center?add_user=wplearninglab Facebook: https://www.facebook.com/wplearninglab Twitter: https://twitter.com/WPLearningLab Google Plus: http://google.com/+Wplearninglab Pinterest: http://www.pinterest.com/wplearninglab/
Html code for embedding videos on your blog
Text Comments (15)
Isaac Taylor (4 months ago)
Does anyone know how to add rows to an existing table?
abrar shovon (10 months ago)
Hi, I just applied it in my site. It looks good but I can't make the verticle divider between the two cells and overall table border also doesn't look good. Will you plz tell me how I solve the probs? i am using splash theme by theme shop and WordPress version 4.9.1.
abrar shovon (9 months ago)
That's very kind of you that you want to check.The site is under development. Here is the link of this page "http://babiescarrier.com/best-baby-wrap-carrier/" please, please,please check the page from top to bottom cause in this page there so many tables .Specially check this Topic/heading "Baby K’tan Breeze VS Active". The table is big and i want to present it nicely .And please inform me how can i nicely present the table. And again so nice of you . And thanks for replying
Hi Abrar, Sorry for the delay. It sounds like a CSS issue. The theme may be adding styling you don't like or custom selectors that are difficult to identify. Do you have a link to the table I can check out?
CurrentWave (1 year ago)
Hello, very helpful tutorial.... I currently have a html table I add content to weekly over the course of a year. Then I start a new page. I am working on moving the site to WP. I am looking for a way to set up the same layout-design in wordpress and this looks like it will do the trick :) Is there other ways - CSS, or template or?
CurrentWave (1 month ago)
Thank You! I found a plugin called TablePress and it is awesome :) the creator is super, and really supports his plugin.
There are some themes and plugins that have custom table-building functionality, but if you want to just copy and paste your existing HTML tables into WordPress that's probably the easiest. You could CSS to make your tables look different, but if you want to have the same layout-design as your current set up then you'd just have to copy over what you already have. The trickiest part may be making the site itself look exactly like what you currently have unless you have already have a theme in mind.
Brittany Quinn (1 year ago)
You are absolutely right suggesting that plugin the plugin garbage collector. It's so ironic LOL that you responded to my comment today. The reason I say this is that somehow I stumbled upon the plugin the plugin garbage collector today. I recommend everyone use it. I had 60 tables and know have 32. I stopped having server overloads with the CPU and memory usage being in the red. Your video on deleting transits also helped. The plugin wp optimize shrunk my database a ton and also wp sweep it has a option to delete transits with it as well. Thanks for responding back wp learning lab. All of your videos have been extremely helpful.
+Brittany Quinn Hi Brittany, it sounds like these plugins should be the topic of a video :) I'm happy my videos are helpful, that's what I make them for :) Thanks for being a loyal member of the WPLL community!
Brittany Quinn (1 year ago)
Do you have a video on how to clean up the database? I have 60 tables I believe some might be from old plugins or themes. What is your suggestion?
+Brittany Quinn good question Brittany. I haven't tried this plugin, but it may do the trick: https://en-ca.wordpress.org/plugins/plugins-garbage-collector/
Mark M (1 year ago)
good info! question, did you allow likes on this because the like buttons, share, and the rest are not showing up
+Mark H That's good to know, thanks for the insight!
Mark M (1 year ago)
I was using the Android Youtube app, none of those buttons show up for me, but do for others, I am using the PC now and all the buttons are there. Must be problem with the app. Weird
Hi Mark, thanks for the heads up on the missing buttons. They are showing up for me and the video has some likes and shares so they must be showing up for others as well. If you're viewing on mobile sometimes the engagement buttons are hidden below the video. You can reveal them by clicking the small down arrow below video and on the right side of the screen. Other than that, I'm not sure why they wouldn't be showing up for you :( I don't think I even have the ability to turn them off. Thanks watching Mark!

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.