Understanding HTML tables

Borders width cellpadding background images rowspan
alignment height cellspacing background colour colspan


HTML Tables

Huh? What's a table?

A table is one of these things:


Not much to look at huh...and why would you want one of those on your page??

How about if I show how else you can build a table:


Still not impressed? How about if I do this:

are you impressed yet?


You're a bit hard to please, aren't you?? Ok, I'll dig into my bag for some more party tricks.

are you now???
impressed


Still don't get it? Look what else I can do...

I can pictures!!
do


Go on, say it...so? Who cares? Who wants those ugly boxes on their website anyway? Let me show you another example...this time, I've made the table without a border:

I can pictures!!
do


Ah, see...now you get it! By using tables, you can CHOOSE where you want stuff on your page, not just on the next line down. Makes it all a whole lot more interesting, huh. Got you thinking now, haven't I??

Yeah...but what's a table??

Tables are a very organised piece of work. Within each table, you have rows where your information goes. Each row is broken up into as many pieces as you want. These pieces are called 'table data'.

Tables can get very confusing sometimes...if they're not done exactly right, your page can end up all over the place. The first rule you need to remember is each table you build will have a row, or several rows...and each row has a data cell in which you place your data, or information. Computers are pretty stupid in that they need telling EXACTLY what to do (I guess you know that by now!!). As such, you have to understand how a computer reads a 'table'.

First of all, it sees a "<table>" tag, and knows it has to look for a "<tr>" (table row). Once it defines that there's a row, it then proceeds to display all of the "<td>" (table data) cells within that row. It displays the data cells in that row across the page until it hits a "</tr>" telling it that row is finished, and to look for a new one. If there's no new "<tr>" (table row) then it looks for a closing "</table>" tag.

So how do I do it?

This is where you need to put your thinking cap on. A basic table is set out like this:

<table>
<tr>
<td>
info goes here
</td>
</tr>
</table>
info goes here


You put the information you want in the table between the "<td>" and "</td>" tags.

If you want two or more cells of data in the one line, you add another set of "<td>" and "</td>" tags within the table row.

For two cells of data, you'd type it like this:

<table>
<tr>
<td>
info goes here
</td>
<td>
info goes here
</td>
</tr>
</table>
info goes here info goes here


You can add as many table data cells as you like, or as space permits. The next thing you need to know is how to do two rows of data. Notice the ending of a row with </tr> and the <tr> showing the start of the next one:

<table>
<tr>
<td>
row 1 cell 1
</td>
<td>
row 1 cell 2
</td>
</tr>
<tr>
<td>
row 2 cell 1
</td>
<td>
row 2 cell 2
</td>
</tr>
</table>
row 1 cell 1 row 1 cell 2
row 2 cell 1 row 2 cell 2


Within the table data cells, you can use the normal font size tags, font colour tags....they all work. If you want an image in one of the cells, instead of typing anything you'd just put your <img src=pic.gif> within the <td></td> tags.

<table>
<tr>
<td>
row 1 cell 1
</td>
<td>
<img src="smiley.gif">
</td>
</tr>
<tr>
<td>
row 2 cell 1
</td>
<td>
row 2 cell 2
</td>
</tr>
</table>
row 1 cell 1
row 2 cell 1 row 2 cell 2

You can see that the table will automatically adjust it's size to suit what's in it. You can fix what size you want the data cells if you like...that's covered in another lesson.


That about covers the basics on tables. There's a whole heap more to learn, you've only scratched the surface. For instance, you can add various attributes to the <table> and <td> tags that will help you get exactly what you want. The next lesson will cover how to place the data cells precisely where you want them on a page.