Quantcast

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″>
<tbody>
<tr>
<td>This is space 1</td>
<td>This is space 2</td>
</tr>
<tr>
<td>This is space 3</td>
<td>This is space 4</td>
</tr>
</tbody></table>

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)

{ 21 comments… read them below or add one }

christina July 23, 2009 at 10:46 am

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

Reply

Jackie (Farm Lane Books) July 23, 2009 at 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!

Reply

Serena (Savvy Verse & Wit) July 23, 2009 at 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.

Reply

SuziQoregon July 23, 2009 at 12:02 pm

Great and very useful info!! Thanks!!

Reply

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

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

Reply

Dorte H July 23, 2009 at 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.

Reply

Nicole July 23, 2009 at 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.

Reply

softdrink July 24, 2009 at 12:27 am

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

Reply

Fyrefly July 24, 2009 at 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!

Reply

Megan August 5, 2009 at 9:33 am

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

Reply

jennygirl August 5, 2009 at 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 :)

Reply

Kim July 24, 2009 at 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).

Reply

Kim July 24, 2009 at 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.

Reply

Kim July 24, 2009 at 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!

Reply

Kim July 24, 2009 at 12:58 pm

No problem!

Reply

Kim July 24, 2009 at 12:59 pm

Good luck, can’t wait to see some tables ;)

Reply

Kim July 24, 2009 at 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.

Reply

Kim July 24, 2009 at 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.

Reply

Kim July 24, 2009 at 1:01 pm

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

Reply

Kim July 24, 2009 at 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.

Reply

Kim August 5, 2009 at 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? :)

Reply

Leave a Comment

Previous post:

Next post: