≡ Menu

How to Make HTML Tables

html catI’m no html expert, but I like to dabble in it occasionally to see what I can figure out. One of the coolest things I’ve learned is how to create tables for my blog. I love being able to add tables because it can keep pictures and text lined up, something my OCD personality really appreciates.

I used a table in a long-ago Weekly Geeks Post and my mini reviews to end 2008, just for a couple examples.  Fyrefly from Fyrefly’s Book Blog uses tables (I think) to make a calendar view of the books she’s read each month.  I think tables are great, so I’m going to try and explain how to create your own html table if you have a little bit of html experience.

On the left is a table.  On the right is the code that I used to create that table.

This is space 1 This is space 2
This is space 3 This is space 4
<table border=”1″>
<td>This is space 1</td>
<td>This is space 2</td>
<td>This is space 3</td>
<td>This is space 4</td>

Here’s what this means:

  • <table border=”1″> is the start of the table.  The border=”1″ says how thick the border on the table will be.  If you don’t include anything there, you won’t be able to see a border for the table.
  • <tr> and </tr> indicates the beginning and ending of a row on the table. You can add more rows to a table by  just adding more <tr> </tr> code.
  • <td> and </td> indicates the beginning and end of a single cell.  See how the <td> markers are inside the <tr> markers?  Anything you write between the <td> and </td> will be the text you see in the spaces. You can also put pictures in these spaces (that’s what I did with my mini reviews).

So, that’s the basic code for the table. You can do a  lot with html tables once you get the hang of it. You can add colors, adjust the borders or change formatting inside the table cells.  I’m no html expert, so I usually just putz around with different attributes (the border=”1″ is an attribute) until the table looks like I want it to.

The best website for learning html is w3schools.com — they have great examples, plus areas where you can play around with adding code to see what happens. This is the website I rely on the most when trying to teach myself something new.

This is my first “how to” post, so I hope it was helpful!

Photo by Noah Sussman (via flickr)

Comments on this entry are closed.

  • christina July 23, 2009, 10:46 am

    Thanks for the great bit of information. Im quite intimidated with html. :)

  • Jackie (Farm Lane Books) July 23, 2009, 10:51 am

    That is great to know. I have never used html to make a table though – I used to copy mine from microsoft word, but now I have the TinyMCE Advanced plugin with wordpress and that has table functions within the post editing section.

    I am getting more used to html. Thanks for the link – that site looks great and I still need to do a ‘how to’ post before tomorrow!

  • Serena (Savvy Verse & Wit) July 23, 2009, 11:55 am

    I’ll have to give this a try and check out how I can make some of these tables with pictures in them.

  • SuziQoregon July 23, 2009, 12:02 pm

    Great and very useful info!! Thanks!!

  • Ali (Worducopia) July 23, 2009, 12:55 pm

    Great tutorial, thanks, Kim! I’ll have to give this a try. Bookmarking the other site, too.

  • Dorte H July 23, 2009, 2:08 pm

    Really useful!

    I don´t need it right now, but another blogger told me some time ago how useful it is to have a testblog so when I come across usefull tricks of the trade, I store them away there.

  • Nicole July 23, 2009, 6:01 pm

    Great post. I find html a little scary but since I have been self-hosted I have been trying to figure it out more. Actually make that, I have had to figure it out more.

  • softdrink July 24, 2009, 12:27 am

    Oooh, pretty. I’ve always about tables, so thanks for this post!

  • Fyrefly July 24, 2009, 12:12 pm

    Thanks for the link! My calendars are tables, yes… pretty much entirely self-taught from this tutorial, plus a lot of mucking around to get it to look right. I’m also a big fan of invisible tables, like in the posts you linked to… it’s just so much easier to get your posts looking the way you want!

  • Megan August 5, 2009, 9:33 am

    Awesome! I’ve always been intimidated by tables. Great info!

  • jennygirl August 5, 2009, 12:11 pm

    Thanks for the info! I don’t know very much about HTML but would like to learn a little bit. Your explanation makes sense and it’s visual. Thank you so much :)

  • Kim July 24, 2009, 12:55 pm

    It’s not too scary once you have a little sense of how it works. I use tutorials all the time to try and help myself out but I still make mistakes and mess things up. The nice thing about html is that you can just scrap it and start over (most of the time anyway).

  • Kim July 24, 2009, 12:57 pm

    A table plugin would be awesome, much less tedious than hand coding. I usually just copy and paste stuff when i need it.

    w3schools is a great site — I’ve learned almost every little html trick I know from them.

  • Kim July 24, 2009, 12:57 pm

    It’s very easy if you know html. Just put the table in, then insert the image between the and tags. It takes a little more work to align things, but if you use attributes you can make it work. Good luck!

  • Kim July 24, 2009, 12:58 pm

    No problem!

  • Kim July 24, 2009, 12:59 pm

    Good luck, can’t wait to see some tables 😉

  • Kim July 24, 2009, 12:59 pm

    A test blog sounds like a very good idea. I usually just use draft posts, since I don’t mess much with the html of my blog overall. But once I self host, that will be something to think about.

  • Kim July 24, 2009, 1:00 pm

    It can be sort of scary, especially when you think something should work and then it doesn’t. I’m not a great troubleshooter, I get impatient, but after awhile some of the weird stuff html does gets a little easier to deal with.

  • Kim July 24, 2009, 1:01 pm

    No problem, I hope you can try a table out!

  • Kim July 24, 2009, 1:01 pm

    I love invisible tables. I hate when photos and text don’t line up, it’s a huge pet peeve for me. The tables are sort of a pain, but I always feel happier when I can look at stuff on different pages and know it will stay lined up the way I want them to.

  • Kim August 5, 2009, 9:49 am

    I’m glad it’s helpful. Tables can be sort of scary at first, but once you make a few it gets a lot easier. Then html will suddenly decide to not work and you have to learn some stuff over again, but that’s part of the fun… right? :)