Learn HTML: The Magic of Tables

The Magic of Tables

There are SO many things you can do if you know how to make a table. It's useful for just about anything, from framing text to organizing links. Most people like tables because it's the only way they can place a large amount of text next to a pitcure, or large lists of text side by side. There are many, many possibilities opened up to you when you learn how to make tables. You can even eliminate the table borders so that your items don't appear to be framed.

The first thing you need to do is set the table up. Mainly, setting the border and the appearance of the cells. (The cells are the area your text or object appears in.)

<TABLE>

That's a start. But you need to tell the browser about the table's border, as well. How thick do you want it? "0" would be no border at all. "1" is a nice thin border, but you can go thicker and thicker. 2, 3....whatever you want. Let's try "1" for this example.

and of course the table is not complete without an end:

</TABLE>

But we still have to put something IN the table, and you can't do that without setting up rows and cells within the table. You need at least one table row:

with at least one cell in the row:

Now, let's put something in it to make it complete: How about the word Name:? Put it right in the middle of the cell tags:

It will appear like this:

Name:

Now add a second cell, right beside the first one:

Type your name in that cell:

<TABLE BORDER="1">
<TR><TD>Name:</TD><TD>Marie</TD></TR>
</TABLE>

It will appear like this:

Name: Marie

Now add a second row to your table, with two cells in it just like the first row:

<TABLE BORDER="1">
<TR><TD>Name:</TD><TD>Marie </TD></TR>
<TR><TD></TD><TD></TD></TR>
</TABLE>

This time type the word "Age:" in the first cell, and your age in the second cell:

<TABLE BORDER="1">
<TR><TD>Name:</TD><TD>Marie </TD></TR>
<TR><TD>Age:</TD><TD>Guess : )</TD></TR>
</TABLE>

It will now appear like this:

Name: Marie

Age: Guess =)

You can also control how close your items are to the edges of the cell by adding the "CELLPADDING" command. Again, numbers 0, 1, 2, etc. will determine how much space there is between the item and the edges of the cell it's in. Let's play with it a little:

<TABLE BORDER="1" CELLPADDING="2">
<TR><TD>Name:</TD><TD>Marie </TD></TR>
<TR><TD>Age:</TD><TD>Guess : )</TD></TR>
</TABLE>

Result:

Name: Marie

Age: Guess =)

Now lets see what happens if we add more padding:

<TABLE BORDER="1" CELLPADDING="6">
<TR><TD>Name:</TD><TD>Marie </TD></TR>
<TR><TD>Age:</TD><TD>Guess : )</TD></TR>
</TABLE>

Result:

Name: Marie

Age: Guess =)

Heh. Ok, now lets determine the amount of space we want between cells with the "CELLSPACING" command. Again, any number 0 - whatever. For this example we'll use 3 for the cellspacing and put the cellpadding back to 2.

<TABLE BORDER="1" CELLPADDING="2" CELLSPACING="3">
<TR><TD>Name:</TD><TD>Marie </TD></TR>
<TR><TD>Age:</TD><TD>Guess : )</TD></TR>
</TABLE>

Result:

Name: Marie

Age: Guess =)

You can also play around with the width of your table. If you want the table to take up that whole area of your page you would add WIDTH="100%" to the TABLE command. If you wanted to specify a certain percent of the page you specify it there. 25%, 42%, whatever you want. Or you could just do it in pixels...the old 1, 2 , 3, 500...whatever you want. This is relatively small table so we can have a lot of fun with it. First we'll try 100%, just to see what happens:

<TABLE BORDER="1" CELLPADDING="2" CELLSPACING="3" WIDTH="100%">
<TR><TD>Name:</TD><TD>Marie </TD></TR>
<TR><TD>Age:</TD><TD>Guess : )</TD></TR>
</TABLE>

Result:

Name: Marie

Age: Guess =)

Yikes! Of course it looks terrible. I think, for a table this size we are better off sticking with pixels. Lets try 150 pixels.

<TABLE BORDER="1" CELLPADDING="2" CELLSPACING="3" WIDTH="150">
<TR><TD>Name:</TD><TD>Marie </TD></TR>
<TR><TD>Age:</TD><TD>Guess : )</TD></TR>
</TABLE>

Result:

Name: Marie

Age: Guess =)

Whew! Much better, don't you think? So, you think you have the idea yet? It's not too hard. But there is SO much more! Heh, your head spinning yet? EACH CELL can have it's own distinct personality. It's like having several mini web pages within your web page. You can set the background color, the font color, center the contents of the cell...just like you do on your web page. Let's play around with that a little. Let's give the fist cell a different background color:

<TABLE BORDER="1" CELLPADDING="2" CELLSPACING="3" WIDTH="150">
<TR><TD BG COLOR="#DB9370">Name:</TD><TD>Marie </TD></TR>
<TR><TD>Age:</TD><TD>Guess : )</TD></TR>
</TABLE>

Result:

Name: Marie

Age: Guess =)

Now let's change the background AND the text color of the of the second cell:

<TABLE BORDER="1" CELLPADDING="2" CELLSPACING="3" WIDTH="150">
<TR><>TD BGCOLOR="#DB9370">Name:</TD><TD BGCOLOR="#DBDB70"><FONT COLOR="#000000">Marie</FONT></TD></TR>
<TR><TD>Age:</TD><TD>Guess : )</TD></TR>
</TABLE>

Result:

Name: Marie

Age: Guess =)

Well! Now you know the basics. Let's play with lists a little bit to give you an idea just how flexible tables really are. I'm going to put two lists side by side; a To do list and a Not To Do list. I want this list to take up a good portion of the page where it's located, so I'm going to set the width at 70%. I want just a little bit of space between the side of table and my text, so I'll set the padding at 1. I'm only going to have two cells and it's a wide enough table that I don't need any spaces between the cells, so I'll set the spacing at 0 and I want a nice thin border, so I'll set the border at 1:

In my first row I'm going to set up the headings for my lists. I want a white background and black letters:

To Do Not To Do

Hmm. I think I would like to center that table:

<CENTER>
<TABLE BORDER="1" CELLPADDING="1" CELLSPACING="0" WIDTH="70%">
<TR>
<TD BGCOLOR="#FFFFFF"><FONT COLOR="#000000">To Do</FONT></TD>
<TD BGCOLOR="#FFFFFF"><FONT COLOR="#000000">Not To Do</FONT></TD>
</TR>
</TABLE>
</CENTER>

And center the text in those first two cells:

To Do

Not To Do

Ahhh! Much better. Now I can start my lists. I'll add a second row, with two more cells. This time I'm going to make the background black and the text white.

In my first cell I'll put all my To Do items, and in the second cell I'll put all my NOT TO DO items. I am going to put a

<BR>

after each item so the items will each be on seperate lines in the cell.

<CENTER>
<TABLE BORDER="1" CELLPADDING="1" CELLSPACING="0" WIDTH="70%">
<TR><TD BGCOLOR="#FFFFFF"><FONT COLOR="#000000"><CENTER>To Do</CENTER></FONT></TD>
<TD BGCOLOR="#FFFFFF"><FONT COLOR="#000000"><CENTER>Not To Do</CENTER></FONT></TD>
</TR>
<TR>
<TD BGCOLOR="#000000"><FONT COLOR="#FFFFFF">
Work on Tutorial<BR>
Update Passwords pages<BR>
Fix Scanner <BR>
Email mom <BR>
Call Sis<BR>
Give dog a bath<BR>
</FONT></TD>
<TD BGCOLOR="#000000"><FONT COLOR="#FFFFFF">
Clean scanner with Sprite<BR>
Feed dog baked beans<BR>
</FONT></TD></TR>
</TABLE>
</CENTER>

To Do	Not To Do
Work on Tutorial Update Passwords pages Fix Scanner Email mom Call Sis Give dog a bath	Clean scanner with Sprite Feed dog baked beans

Notice how the items in the cell on the right automaticly center themselves to align with the items in the cell on the left. If I don't like them in the center of the cell, I can just add a couple of <BR> to even the cells out. I'll add 4 <BR> so that the browser will read it as 6 items in each list:

<CENTER>
<TABLE BORDER="1" CELLPADDING="1" CELLSPACING="0" WIDTH="70%">
<TR>
<TD BGCOLOR="#FFFFFF"><FONT COLOR="#000000"><CENTER>To Do</CENTER></FONT></TD>
<TD BGCOLOR="#FFFFFF"><FONT COLOR="#000000"><CENTER>Not To Do</CENTER></FONT></TD>
</TR>
<TR>
<TD BGCOLOR="#000000"><FONT COLOR="#FFFFFF">
Work on Tutorial<BR>
Update Passwords pages<BR>
Fix Scanner <BR>
Email mom <BR>
Call Sis<BR>
Give dog a bath<BR>
</FONT></TD>
<TD BGCOLOR="#000000"><FONT COLOR="#FFFFFF">
Clean scanner with Sprite<BR>
Feed dog baked beans<BR>
<BR>
<BR>
<BR>
<BR>
</FONT></TD>
</TR>
</TABLE>
</CENTER>

To Do	Not To Do
Work on Tutorial Update Passwords pages Fix Scanner Email mom Call Sis Give dog a bath	Clean scanner with Sprite Feed dog baked beans

Well! I think I've given you the idea. You can put just about anything in a table and boss it around cell by cell using the same commands and codes as a regular web page. That goes for images, too. If you don't want your items to look like they are in a table, just eliminate the border by setting it at "0". Have fun!

Back to

Created using WordPad by ~Marie