Let's Start with Tables by Looking at the Table Tag

HTML Tables

A Basic Table

Let's start with tables by looking at the table tag:

<TABLE> ...... contents of table...... </TABLE>

The <TABLE> tag begins the table, you place what you want inside, and end the table with the </TABLE> tag.

To add contents to your table, you will need the <TD> tag. The "TD" stands for table data, which is what you will place after this tag. You end a table data section with the </TD> tag. Here is a basic table with just one cell:

<TABLE>
<TD>
This is my table!
</TD>
</TABLE>

The table will turn out like this:

This is my table!

To get a border we just add the border command to the <TABLE> tag, like this:

<TABLE border="2">
<TD>
This is my table!
</TD>
</TABLE>

And now the table has the border around it:

This is my table!

You can set the border to be as big or small as you like by changing the number inside the quote marks. If you set it to border="0", you will have a table with no border around it.

Of course, you probably want the table to have more than one cell in it. To add another cell on the same line, just use the <TD> tags again, like this:

And now we have two cells:

This is a cell / This is a cell

Well, what if you want to go to the next line, or in table terms, the next row? To do this, you use the table row tags, <TR> and </TR>:

Now there are two rows, each with two cells:

This is a cell / This is a cell
This is the new row / I'm on the new row, too!

There are a couple of commands you can add to the <TABLE> tag to get more spacing between cells. Here they are:

1. cellspacing=" "
Use this command to add more space around each cell. Place a number inside the quote marks.

2. cellpadding=" "
Use this command to add more space inside each cell. Place a number inside the quote marks.

Here is an example. Let's say we added the cellspacing command to our last table, and set it to equal 12, like this:

Now the table would look like this:

This is a cell / This is a cell
This is the new row / I'm on the new row, too!

Now, suppose we used the cellpadding command, and set it to 12, like this:

Now the table looks like this:

This is a cell / This is a cell
This is the new row / I'm on the new row, too!

And of course, you can use both at once:

This is a cell / This is a cell
This is the new row / I'm on the new row, too!

You can add just about anything you would like inside the cells.

You can add links, images, headings, paragraphs and more.

To use a link inside a cell, just place the link tag inside your <TD> tags, like this:

<TD>
<A HREF="http://www.pageresource.com">My Favorite Web Site!</A>
</TD>

Now you will have a link inside your cell:

My Favorite Web Site!

To place an image inside a cell, you do the same thing with the image tag:

Everything is aligned to the left side of each cell. This is the default setting. You can change the alignment of your cell contents, make cells stretch across more than one column or row, define a table width, and change cell background colors.

Alignment, Color, and More

Define the width of your table. To do this, add the width=" " command to your <TABLE> tag. Place the number of pixels wide you would like the table to be between the quote marks. So, if you wanted a table 600 pixels long, you would do this:

<TABLE width="600" border="2">
<TD>
This table really long!
</TD>
</TABLE>

This table has just a little text, but stretches all the way to 600 pixels, because we told it to!

This table really long!

What if you wanted your contents to be aligned to the center or to the right? To do this, you add the align=" " command to your <TD> tag. You can use the command three ways:

1. align="left"
Aligns your cell contents to the left.

2. align="center"
Aligns your contents to the center.

3. align="right"
Aligns your cell contents to the right.

Let's take a look at a table using these commands:

<TABLE width="450" border="2" cellspacing="7" cellpadding="7">
<TD align="center">
I'm in the center!
</TD>
<TD align="right">
I'm aligned to the right!
</TD>
</TABLE>

The first cell will have the text in the center, while the second cell has text aligned to the right.

I'm in the center! / I'm aligned to the right!

You can also use another alignment command for your cells, the vertical alignment command. It looks like this: valign=" " . Here's what it can do:

1. valign="top"
Aligns contents to the top of the cell.

2. valign="middle"
Aligins contents halfway between the top and bottom of the cell.

3. valign="bottom"
Aligns contents to the bottom of the cell.

Here is a sample table using the vertical alignment commands:

<TABLE width="550" border="2" cellspacing="7" cellpadding="0">
<TD align="center" valign="top">
I'm on top! <br>
So I start on top! </TD>
<TD align="center" valign="middle">
I'm in the middle
</TD>
<TD align="center" valign="bottom">
I start at the bottom.
</TD>
</TABLE>

The table looks like this:

I'm aligned to the top!
So I start on top! / I'm in the middle. / I start at the bottom.

The vertical alignment commands only come in useful if your table cells don't have the same number of lines inside each cell. Since I had 2 lines of text in the first cell while the others had one line, the vertical alignment made a difference in how the table looked. If I had only used one line of text in each cell, the vertical alignment commands wouldn't make any difference.

So, how about stretching out the rows and columns? Well, now you get two more commands for the <TD> tag, rowspan and colspan.

1. rowspan=" "
Defines the number of vertical table rows the cell should take up. Place your number inside the quote marks.

2. colspan=" "
Defines the number of horizontal columns the cell should take up.

Suppose you wanted your table to do this:

Nice guy, isn't he? /
Met him at the store.

To make it happen, you use the rowspan command in your table cell containing the image. You set rowspan="2" and the cell with the picture takes up 2 table rows. Here is the code:

<TABLE border="2">
<TD align="center">
Nice guy, isn't he?
</TD>
<TD rowspan="2" align="center">
<IMG SRC="../images/scare.jpg">
</TD>
<TR>
<TD align="center">
Met him at the store.
</TD>
</TR>
</TABLE>

Now, suppose you want a table like this:

Star Wars Folks
Luke Skywalker / Princess Leia / Han Solo

This time you use the colspan command and set colspan="3". You get the first cell to stretch across the other three on the second row below it. Here is the table code for this:

<TABLE border="2" cellpadding="5">
<TD colspan="3" align="center">
<B>Star Wars Folks</B>
</TD>
<TR>
<TD align="center">
Luke Skywalker
</TD>
<TD align="center">
Princess Leia
</TD>
<TD align="center">
Han Solo
</TD>
</TR>
</TABLE>

We will now change the background color of a table cell! You can change the background color of the entire table, each row, or each cell. To change the background color of the table, add the bgcolor=" " command, just like in the body tag:

<TABLE border="5" bgcolor="red">
<TD>
Red Rules!
</TD>
</TABLE>

Now the whole table has a red background:

Red Rules!

To change the color of each cell, add the bgcolor command to each <TD> tag you want to change:

Now we have two different colored cells:

red / blue

And finally, to change the color of a table row, add the bgcolor command to the <TR> tag:

<TABLE width="200" border="2" >
<TR bgcolor="red">
<TD> red </TD>
<TD> red again... </TD>
</TR>
<TR bgcolor="blue">
<TD> blue </TD>
<TD> blue again! </TD>
</TR>
</TABLE>

And now the rows are different colors:

red / red again...
blue / blue again!

You can design calendars, price lists, or whatever comes to mind using tables.

Tables Within a Table

Nested Tables

Well, suppose you had this problem: You need to put two tables on the same line on your page. Oh no, the table tag automatically sends you to the next line! Well, you can get around this by placing your two tables inside one large table, thus keeping them on the same line.

Let's start out by just placing one table inside another. Here is the code:

<TABLE width="400" border="6"> 
<TD align="center"> 
<TABLE width="300" border="2"> 
<TD align="center"> 
I'm inside the small table! 
</TD> 
</TABLE> 
</TD> 
</TABLE>

Here is what you get from the code above:

I'm inside the small table!

This can get a bit confusing at times. Just remember to keep track of which table you are in while you are writing the code, those td tags get me every time......

As for the problem at the beginning of the section, all we have to do is add another table cell to the big table, and then use a second smaller table inside that cell. To hide the appearance of the big table, we set the border on the big table to zero. Here is the example:

<TABLE width="600" border="0">
<TD align="center">
<TABLE width="275" border="4">
<TD align="center">
I'm in the first small table! Ha!
</TD>
</TABLE>
</TD>
<TD align="center">
<TABLE width="275" border="4">
<TD align="center">
I'm in the second small table! Ha, ha!
</TD>
</TABLE>
</TD>
</TABLE>

And now we see the two inside tables on the page side by side:

I'm in the first small table! Ha!
/ I'm in the second small table! Ha, ha!

Of course, you can make the inside tables or the outside tables as complicated as you want. Add all the cells and rows you can handle.....you can go table crazy if you want to.