≡ 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 🙂