How to Make HTML Tables

by Kim on July 23, 2009 · 22 comments

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 — 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)

Previous post:

Next post: