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

Comments are closed.