So you want to do tables on your web page huh? Good. They are great. Tables facilitate the positioning of text and graphics on your pages. Once you get the hang of tables you'll probably use them all the time. It allows for a page set up like this one, with a navigation bar on the left and the text to the right. You can nest tables within tables for even more ability to position what you want where you want it.

It's a little confusing at first, but think it while you write it and you'll get there in no time.

Let's start with a basic table.

<table>
<tr>
<td>This is my table</td>
</tr>
</table>

Here is what it looks like:

This is my table

OK, so in that particular little table example there isn't really anything tabular to see. Please understand that in tables rows are the horizontal (left to right) rows in any table. Columns are the vertical (top to bottom) columns in any table.

C

R O W S

L

U

M

N

S

Notice the start table <table> and the end table </table>. They mark the start and end of a table.

Then you see a tab row <tr> and further down you see the end tab row </tr>. Within that left to right tab row are the actual cells of a table, i.e., the columns. The actual cells of a table start with the tab define <td> and ends with the end tab define </td>.

OK, I did say tab define. I believe it's actually supposed to be tab data as referring to the fact that you are beginning a field that will contain data. Well, I taught myself this stuff, and called it define I did that because within the <td> tag you define the attributes for the next tab field. So ... you think it your way, and I'll think it my way. We'll all get the table set up right anyway.

Let's put that together. <table> to start a table. <tr> to start a table or tab row. <td> to start a tab cell. Think of <td> as tab define. That will become more clear as we get into the different things you can do with a cell in a table. Then we end that tab cell </td>, then end the tab row </tr> and then end the table itself </table>.

Well, it is simple, but you might be a little confused with the tab row here. That's because we only had one row, and one field in that row. In essence a table with one row and one column. So let's go on and add a second field to our table and a second row too.

<table>

<tr>
<td>First Row,<br>First Cell or Field</td>
<td>First Row,<br>Second Cell or Field</td>
</tr>

<tr>
<td>Second Row,<br>First Cell or Field</td>
<td>Second Row,<br>Second Cell or Field</td>
</tr>

</table>

I hope you notice the way I break the coding up into parts.

Here is how this table will look:

First Row,
First Cell or Field First Row,
Second Cell or Field

Second Row,
First Cell or Field Second Row,
Second Cell or Field

OK. Our first row has two fields in it. We have a second row with two fields in it too! If you're following along here then it all should make sense to you. If not, go back and reread it. Make sure you say it the way it is. Start table, start tab row, start tab define, end tab define, start tab define, end tab define, end tab row, end table (in that order).

Let's move on to some of the variables that you can define for your tables.

< Previous: Images — Next: Tables Part Two >

Daily SEO Tips eMail
SEO Blog
SEO Training
SEO Basics 101 eBook
Learn All the Basics to SEO

8153 / 051006 / 304076