How to make HTML tables for your WordPress blog

htmltable

Update:
March 24, 2010.Please see  Align images: HTML tables for wordpress.com blogs. An HTML Table Generator allows you to create tables on the fly without having to write all that code. But there are some basics that you need to know.  Then you can:
  • Select the number of rows and cells
  • Generate the code
  • Copy the generated HTML code into your blog.

HTML TABLES

  • <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

The code must be pasted into the HTML editor in “code” mode to actually produce an HTML table like the one illustrated below.

table1Images 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.

Differences Between HTML 4.01 and HTML5 – HTML5 only supports the “border” attribute, and its value can be “1″ or “”. More here w3 schools HTML table tag.

87 thoughts on “How to make HTML tables for your WordPress blog

  1. I found this article very informative. I followed the steps and it worked and saved the page as private to copy and paste in other pages and posts. I wanted to display training videos but soon discovered just to link to the source. However, it is a great way to organize page items. I later decided to use this setup for another page, Boutique, to display items in two columns. One column for a PayPal button and the second column for the product picture.

    This is a great place to learn techniques!

  2. Pingback: Pinterest, Creative Property Rights, and Miscellany « The Shop Sampler

  3. Pingback: What Happened to New Year Resolve?! « Blackwork Lessons

  4. Pingback: The 10 HTML Tags You Must Know to Blog | Learning from Lorelle

  5. Pingback: 2011 Nov – Weight still the same as last | the chunky purple turtle

  6. Pingback: What did a new blogger learn in 12 months? « one cool site

  7. 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

  8. 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

    • 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.

  9. 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!

  10. 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 :)

  11. 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.

    • 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?

    • 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

  12. 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

  13. Pingback: From hidden to visible | Love versus Goliath : A Partner Visa Journey

  14. Pingback: Music « ferenczicosmin

  15. 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 :)

    • 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/

  16. Do you know how to make the lines in the table invisible cause the stylesheet doesn’t seem to work!

  17. 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.

  18. 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!

  19. 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? :)

  20. 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

  21. 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!

      • 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?

        • 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.

  22. Pingback: Wordpress Blues

    • 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/

  23. 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

  24. 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.

  25. 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!

    • @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.

  26. 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).

    [table style="height: 60px;" cellspacing="1" cellpadding="1" width="175"]

  27. 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/

    • 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.

        • 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.

          • 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.

      • 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 :-(

  28. 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.

  29. 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.

    • 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/

  30. Pingback: Word press layout and other online help links « George Schils Blog

Comments are closed.