I’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.
|
<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!
Comments on this entry are closed.
Thanks for the great bit of information. Im quite intimidated with html. 🙂
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!
I’ll have to give this a try and check out how I can make some of these tables with pictures in them.
Great and very useful info!! Thanks!!
Great tutorial, thanks, Kim! I’ll have to give this a try. Bookmarking the other site, too.
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.
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.
Oooh, pretty. I’ve always about tables, so thanks for this post!
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!
Awesome! I’ve always been intimidated by tables. Great info!
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 🙂