Get help putting HTML tables on your web site
If you’ve ever seen a web page with pictures and text in nice columns or “grid like” format, and think you could never do that, you are about to be surprised. HTML tables are awesome, with them you can create pages that look so good they look professional. All of the pages on this site were made with HTML tables.
One thing you have to remember while making HTML tables, neatness. If you don’t keep the table neat, you will never be able to catch mistakes or update it very well. Come up with a system to organize all the tags and content of the tables. These tags they have a lot of attributes in them and your will be shown which attributes are mandatory and which are not. Below are the different HTML tables tutorials.
HTML TABLES
The Table Tag
The Row Tag
The Conventional Cell Tag
The Header Cell Tag
Basic Example w/Source Code
Detailed Example w/Source Code
- <table> means “start” the table.
- you can adjust #s in border, cellspacing, and cellpadding; align center, right, or left
- body means start entering your contents into the table
- tr means start a table row
- td means put data, picture, text
- repeat td as many times as you want cells across your table
- repeat the table rows (tr) as many times as you want
-
for every < there is a > <something>for every start < >, there must be a close < / > - </table> means close the table
See the example of code above. The code must be pasted into the HTML editor in “code” mode to actually produce the table illustrated below.
Images can be uploaded into the cells of the table using the same method we always use to upload images into posts and static pages. Text can also be typed into the cells.
Now you know how to make HTML tables for your wordpress blog. You can either code the table yourself or you can use a HTML table generator.Note: You will find that windowslivewriter has a built in HTML table feature that you can use to make tables for your blog. In some themes what’s required is Overriding default table borders.
Other References:
Learning HTML Tables
Help With HTML Tables
Auto Table Generator
Overriding default table borders
anyunk
January 28, 2010
Thanks for your tips. As a newbie, it means to me.
timethief
January 28, 2010
You’re welcome.
Tom
January 31, 2010
The easiest way to get great-looking tables into a wordpress post is to write the post in MS Word, then publish from word directly to the wordpress blog. In mere minutes, you can create complicated, visually pleasing tables that would take forever to make with html and css. The downside — if you want to call it that — is that it’ll put inline CSS into the post, making it nearly impossible to edit later on in the wordpress editor.
timethief
January 31, 2010
I avoid using Microsoft Word like I avoid getting the flu. Why? Because Microsoft inserts formatting garbage into the code that the tinyMCE editor will strip out provided we use the correct icon. What’s the point of producing garbage code and stripping it out? Meh … I’d rather switch to the html editor on tinyMCE and input the code directly into the editor. That being said, whatever works for you is cool, so thanks for commenting and sharing your approach.
Reference: http://en.support.wordpress.com/microsoft-word/
Tom
February 1, 2010
I suppose it’s possible that, in the distant past, Word added superfluous code to published posts. But these days, the code it produces is beautiful. How do I know? I just checked it out on my own site using the same text and formatting they used in their example. There’s no unnecessary HTML in the post.
Either either of two methods — copy/paste or publish — the HTML produced using their sample text is perfect.
Of course, they’re talking about pasting from Word and OO. And while pasting worked perfectly for me, I was talking about publishing directly from word to the blog — bypassing the blog editor completely. Obviously, if you copy a screen from a word processor, you run the risk of getting more than just plain text.
Another (free) option is the Windows Live Writer. With it, you can produce tables in no time at all. While some enjoy crafting a blog post, others just want to get it published with as little extra effort as possible. For those folks (who don’t want to spend time learning HTML), it’s the way to go.
WordPress dot com is doing a disservice to its users by publishing that inaccurate, anti-Word FUD that you referenced. I voted it down, along with a bunch of others, so maybe they’ll revisit it at some point and fix their writeup.
timethief
February 1, 2010
Thanks again for your contributions. :)
idagency
February 9, 2010
Thanks for your post, very useful, cannot believe WP hasn’t made an easy feature for tables…
timethief
February 9, 2010
Really? I can’t see why they would bother when there are free generators online and coding a table is so easily done.
mitchaki
February 21, 2011
There is a plugin, tinymce advanced, that you can add table code to tinymce. You can add a whole slew of buttons to tinymce.
http://wordpress.org/extend/plugins/tinymce-advanced/
and it does work with wp3.0.5
timethief
February 21, 2011
Hello there,
You have not told me anything I did not already know. I am sad. Please read on to understand why. :(
Here’s the deal. Only individual free standing wordpress.ORG installs can have plugins uploaded into them. On the wordpress.COM multuser blogging platform we individual bloggers do not have FTP access to our blogs, and we cannot upload plugins, themes or anything else into them.
Unless or until wordpress.COM Staff makes the policy decision to upload the full features into Tiny MCE including the HTML tables function we are flummoxxed. Have I made such a request to wordpress.COM Staff “yes”. What became of it — nothing.
mitchaki
February 21, 2011
My apologies, I randomly found this post through google and didn’t realize it was for wp.com.
timethief
February 22, 2011
Not to worry. The code is standard and ought to work on all blogs. If it doesn’t that’s usually because the standard quotation marks ” are being replaced with “curly” quotes. When we edit and change them to standard quotation marks that clears up the problem.
Not the Jakarta Post
August 22, 2011
I can see the sense in what you say, and maybe the real complaint should be that there is no (as far as I can see) publicity about those “free generators” by WordPress – it took me a while to find this helpful thread to find a way forward with my own small project :-(
timethief
August 22, 2011
I’m glad you found it and best wishes to you.
sammich
February 20, 2010
Most people don’t give a darn about TR and TD codes – they just want a table. That’s why.
timethief
February 20, 2010
Well if one wants to join the blogosphere and have HTML tables in their wordpress.com blog then they have to learn either how to use an HTML table generator or how to understand and work with code. I have a new post that’s almost ready to publish on this topic you may wish to read.
randy fritz
March 10, 2010
Can you please help me.
I can create a table easily enough for my wordpress blog (using a separate html editor or dean’s FCKeditor) and it looks fine in the editing window of wordpress but as soon as I go to review or the real post than….
- all the pictures have large margins around them so it makes the rows much larger than they should be
I tried putting “0″ in the properties of the margins of the pictures and the cells of the tables but it doesn’t help
What I’m trying to do is create a table of my best posts to show up on the ‘home’ page which has a pict on the left, a title and summary on the right. Instead of showing square borders which look bad I wanted to keep borders at 0 and insert a graphic of a line (in a separate table row) between two posts.
Maybe there is a easier way to do this……?
This is the result of me trying http://realfoodforlife.com/best-posts/
timethief
March 11, 2010
Here we go. Remove
border=”1″
from the table code and there will be no border.
Change the square brackets I must use below at the beginning and end to make the code show here to the correct arrowhead shaped ones (no italics).
Sianrose
March 20, 2010
nicely explained ..I am new to blogging…but know a bit about html…I didn’t realize you could put html in it…….thanxs
timethief
March 20, 2010
@Sianrose
You’re welcome.Yes we can use the visual editor to make HTML tables and I think a lot of wordpress.com bloggers don’t know that. It’s the very best way to display a thumbnail photo gallery on pages or in posts, as the alignment settings in the editor are for aligning text and not images. So when bloggers try to use the alignment icons in the editor to align images without entering any text between them they end up with a mess. In contrast when we use an HTML table to display thumbnail images and captions for them they all align perfectly and when readers click the thumbnails they can view the full sized images.
recom
April 26, 2010
well, I really proud of you. this is recommended blog to increasing blogging knowledge. you have to know that this post solve my problem on making table at my blog. anyways newbe say “BIG” Thank you! this is useful posting!
timethief
April 26, 2010
Thanks for the positive feedback. You will find my second post on making HTML tables for your blog here > http://onecoolsite.wordpress.com/2010/03/24/align-images-html-tables-for-wordpress-blogs/
The Chatty Boutique
July 20, 2010
I’m building a blog for a friend, and was hitting a wall trying to make a table in CSS language. I’m so happy to find out that html tables work! She now gets to have her pink content background, and written content beside her column Amazon widgets.
Brilliant! Thank you so much.
timethief
July 20, 2010
That’s great news. Best wishes with your blogging. :)
tazandjojo
July 29, 2010
Thanks for the tips. I am new to blogging, but not html. Let the fun begin!
timethief
July 29, 2010
You’re welcome and happy blogging. :)
Greg
August 2, 2010
Thanks for this tutorial post. I have always wondered how bloggers are able to create a page to compare products side by side. Now, I know.
But for a newbie like myself, execution is quite another thing. Should I run into problem I will have to post here again.
Again, thanks a lot
timethief
August 2, 2010
Once one learns how to make a basic HTML table it becomes very easy to do. :)
tom
August 4, 2010
Is there anyway to create a table in WordPress that will auto reflow the content?
timethief
August 4, 2010
No, that would be “dynamic” and would most likely require Javascript which the software here at wordpress.COM will strip out to preserve security. If what you are looking for is the ability to auto-fill a blog with content then wordpress.COM is not the place for you. Getting a wordpress.ORG install is the way to go.
http://support.wordpress.com/com-vs-org/
LegalJeff
August 11, 2010
Thanks for the table code, helped alot. I still have a lot to learn and therefore will be following your blog. Thanks again…
timethief
August 11, 2010
I’m happy to hear you found it helpful. Best wishes with your blog. :)
Chris
September 3, 2010
When ever i make tables and put the content in them using dreamweaver, i then paste the code in a post, and it comes all all totally crazy wrong and beat up, whats that about?? thanks!
timethief
September 4, 2010
I don’t use dreamweaver and cannot help you with it.
Chris
September 4, 2010
Actually its not dream weaver I need help with, see i just use it to generate the html for tables, then i copy and paste the html to a post, and the tables are all out of whack. Dreamweaver really has nothing to do with it, its just a tool so i dont have to type out all the html for tables. i think iv come to realize wordpress has its own settings for how tables are displayed, so when i insert html for tables, it automatically puts its styleing to them..
do you know how to change that?
timethief
September 6, 2010
No I’m sorry I can’t help with that. I hane heard others recommend using windowslivewriter for posting articles with HTML tables in them, perhaps that’s the way to go.
Chris
September 6, 2010
I figured it out, in the wordpress styles.css file there are settings made for the style of tables, so even if you manually enter the tables and table styles via html in the post, the code in the styles.css will overwrite it. so i removed the styling for Tables in the styles.css file and my tables now appear just as they are in dreamweaver, which i copy and paste the html generated. thank you all
timethief
September 8, 2010
That’s good to hear. Thanks for sharing your good news. :)
dlmom918
January 1, 2011
You really are a genius on this! The grid above would probably work for me, and I copied/pasted it into my code. But when I went to visual, it was only one column. I am looking for a grid that I can download a picture into one box, and put the text into the box beside it. As I won’t always have the same number of pictures is there a way to just have a side by side box, and I just keep adding it more for each picture/text I want in a post? I use Coraline theme. Does this make any sense? :)
timethief
January 1, 2011
This code above will produce the table just as it appears in my post.
mybarclays
January 20, 2011
Thank you so much!!! :)
timethief
January 20, 2011
I’m happy you found what you needed. best wishes with your blog. :)
Anbu
February 16, 2011
I was just searching for this.. Thank you very much..
providentialfoodies
February 19, 2011
Hi there,
I have tried and tried to get the photos and text to line up on the site I’m working on, but I can’t seem to figure out what is going on. Do you have any suggestions as to what’s going on here: http://wildgamedinner.wordpress.com ? I’ve been working for hours on trying to find a way to align the text and images to the center of the boxes. I’m about to just delete the image tags and call it good. I’ve added color to the borders so you can see them.
Thanks in advance!
timethief
February 19, 2011
Does this help? http://en.support.wordpress.com/images/image-alignment/
providentialfoodies
February 21, 2011
No, unfortunately it doesn’t. I could kick myself for trying to start from scratch using last year’s post. It worked exactly the way I wanted it to work, but for some reason, things just aren’t lining up right. :\ Oh well. Thanks anyway! :)
timethief
February 22, 2011
I simply click the images and then align them right, center or left by using the icons. http://en.support.wordpress.com/images/image-alignment/ I also know that unless the amount of text occupies the same same as the images they do not align well. I’m sorry you are having such trouble. Does this post help? http://onecoolsitebloggingtips.com/2010/03/24/align-images-html-tables-for-wordpress-blogs/
providentialfoodies
February 19, 2011
P.S. The same code seemed to work fine in Firefox when I created in an html file via Notepad. I’m not sure why I can’t get it to work in WP.
legetøj online
March 4, 2011
Do you know how to make the lines in the table invisible cause the stylesheet doesn’t seem to work!
timethief
March 4, 2011
Yes. in some themes what’s required is Overriding default table borders.
Team Oyeniyi
April 25, 2011
Love it, love it. Using it, but will be a little while before the post is published.
timethief
April 25, 2011
Hello there,
We can align images without using an HTML table but doing so can be frustrating. Let me explain what I mean.
Images of the same size – no text to wrap
If we have several images of the same size that we have optimized and pre-sized to be the same size the cropping tool does not come into play and that means the best image quality is retained. If we upload them and have no text to wrap we can easily place them in an orderly grid pattern without use of an HTML table. We simply set the alignment of the first image to “left” and set all the others to “none”. As the images are the same size this will create an ordered grid layout.
Creating a Gallery
A gallery will display a set of thumbnail images attached to a particular post or page. If you upload images using the Add an Image button while editing/creating the post or page, they will be attached automatically. http://en.support.wordpress.com/images/gallery/
Note that the Gallery function ignores any external links. Use an HTML table to insert your thumbnail images and links instead. http://agallerydemo.wordpress.com/parent-page/child-page-1/grandchild-page/
Images of different sizes with text wrapping
If our images are not the same size and/or the text we wish to wrap using either the left or right alignment icons does not occupy the same space as the images we place beside the images then we run into difficulties as the result is staggered. These are the instances wherein use of an HTML table can save us much frustration and time when it comes to creating an orderly display. http://en.support.wordpress.com/images/image-alignment/
In all cases I find it easier to create an HTML table than to use the other methods that involve text wrapping so that’s why I shared this method with me readers. Note that if you use windowslivewriter to compose your posts in and publish directly from it to your blog there is an HTML table maker included in it. In addition every post or page you create will automatically be backed up in a file on your own computer.
P.S. See my other post on the same topic here > http://onecoolsite.wordpress.com/2010/03/24/align-images-html-tables-for-wordpress-blogs/
Fantasy Bøger
April 27, 2011
Thanks for the easy-to-follow advice on how to create tables in WP. I am going to use it on my own blog in order to show a list of my favorite fantasy books. This is what I love about the internet – people sharing what they know :)
timethief
April 27, 2011
You’re welcome. :)
Nostra
June 3, 2011
Great info, immediately used it to create a table on one of my blogs. Thank you!
timethief
June 3, 2011
I’m glad you found it. Happy blogging. :)
Regional School of Ballet
June 6, 2011
Hi I’ve added a table to my blog based upon this and other websites. When I switch to the Visual portion of the page builder the table looks how I want it. I’ve saved the page and then previewed it. The actual preview of the table is stretched out over the whole page and the spacing between lines is very large.
http://www.regionalschoolofballet.wordpress.com (it’s the tuition page I’m working on right now)
Summer Session Tuition
any ideas or advice? thanks for sharing your knowledge with all us newbies
timethief
June 6, 2011
I’m using Firefox 4.0 and looking here > http://regionalschoolofballet.wordpress.com/corvallis-ballet-dance-class/
What I see is a normal appearance. This usually means you have a browser issue. See here for waht to do > http://en.support.wordpress.com/browser-issues/#force-refresh
Regional School of Ballet
June 6, 2011
You’re so great. I’ll give this a try.
timethief
June 6, 2011
Whenever something doesn’t look right I clear my browser and that alomsot always clears up the problem. If you are not running a current version then your blog won’t display accurately. You can update easily here http://browsehappy.com
Ben
September 1, 2011
Hello,
Thanks for your post.
I am struggling with WordPress. I am trying to use tables to display products side by side but for a reason I ignore, the table automatically generate a large blank space for each product and I cannot make it fit onto my page.
lostincagold.com store
Your feedback would be greatly appreciated.
Thanks a lot.
timethief
September 1, 2011
I’m familar with over 130 themes here at WordPress.com and how they operate. I’m not familiar with your theme. May I suggest that you use a free online table generator?
totosugito
September 6, 2011
I use microsoft word, create table, save as html and copy that html text to wordpress. But I dont satisfied with output html text from microsoft word. Thank for sharing your method :)
timethief
September 7, 2011
You’re welcome. I’m glad you like this approach.
Halim
September 18, 2011
I’ve never tried HTML before so I was hesitant. But your post is clear and helpful, and I’ve just set up my first ever table on WordPress.
Thank you so much for sharing!
timethief
September 18, 2011
Hello there,
I clicked in and saw your Book List table. Good for you! (I’m also an Agatha Christie fan.)
Best wishes with your blog. :)
Halim
October 5, 2011
Oh wow thanks for clicking in, and for the well wishes! :-)
timethief
October 6, 2011
You’re welcome Halim. :)
Karen
September 27, 2011
Hi, I’ve just found your blog post on HTML tables – I have been teaching myself HTML for tables so I can make my posts look good with images nicely lined up. I thought I had done a great job – in the backend of my site the post looks all lined up as I want it in the Visual editor and my HTML coding appears to be in order but when I click on “Preview”, only the title of the blog displays. When I click on “Publish”, only the title of the post displays – nothing in the table (i.e. text or images) will display. It’s getting very frustrating as I want to publish my blog but I can’t do it. Since you seem to know quite a bit about WordPress I thought I would ask you in case you might be able to help me. I would be so grateful if you could assist. I’m quite new to blogging and wordpress and am stumped.
I hope to hear from you soon.
Kind Regards
Karen
timethief
September 27, 2011
Some themes are coded in such a way that they do not support HTML tables and yours which is not a theme for free hosted WordPress.com blog appears to be one of them. Also note that precious HTML codes are deprecated now and that could be an issue. It’s also possible that you have a browser issue and need to clear your browser cache and cookies or that your browser version is outdated and you need to upgrade it.
Douglas
October 11, 2011
I found the table I added on my WordPress site, does not formulate to the right size in relation to the rest of the website, when viewing from an IPhone
timethief
October 11, 2011
I’m sorry to hear that. You can, of course, enter values for width and height. That may do the trick.
Kelly E. Carter
October 28, 2011
It took me a lot of clicking back and forth but I did it! Thank you so much timethief for explaining it so even I could understand it.
timethief
October 29, 2011
That’s good to hear. best wishes with your site. :)