HTML Tutorial

What is a table and How do I use it?
Tables allow you to arrange the look of your web site with more control with cells that can be arranged in any order. Instead of using trying to figure out what it might look like, a table will allow you to have a general idea and more control of where you want to place specific words, images, or block of information. The basic command is to open the table with <TD> and just like all tags there must be a closing table tag like so </TD>.

What are the basic commands for a table?
There are only four tags being used again and again to create a table. Listed below:
<TABLE> starts and ends the entire table.
<CAPTION> and </CAPTION> places a caption over your table. The caption will be bolded and centered. - Not necessary, this can be done with the <TD> </TD> tag.
<TR> is used when you want a new Table Row to begin.
Notice that you need to end every table row with an </TR>.
<TD> denotes Table Data. You put this in front of every piece of information you want in a cell.
You also need to end every one with an </TD>.
</TABLE> ends the table.
Below is an example of a simple table:
Name Phone Number
John Doe 555-1212
Jane Doe 555-1234

The code:
<table>
<tr>
<td><b>Name</b></td>
<td><b>Phone Number</b></td>
</tr>
<tr>
<td>John Doe</td>
<td>555-1212</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>555-1234</td>
</tr>
</table>

What is happening, the table does not look right?
What the table tags do is create a series of cells. Each cell's data is denoted by the <TD> tag.

Note: that even though the table above has each cell (or TD) tag on a new line, the cells keep going to the right until you tell the computer that a new row of cells will start by using the <TR> or Table Row tag.

Think of a table as constructing a Tic Tac Toe board. You'll need nine cells for the board right? Three across in three rows. Use the <TD> tag to make three cells across, use <TR> to jump to the next row, and so on until you have nine cells in three rows of three.

Note: A <TR> is needed first to start the first table row.

Remember that whatever follows the <TD> tag will appear in the cell. And the cells, by column, will be of equal size using the largest cell as the model for the others.

How do I customize a table?
If it looks like all the work is done in the <TABLE> tag -- it is. You are using four attributes to do the work for you:
BORDER tells the table how large the border should be. This is all relative in terms of pixels. Three is larger than two and two is larger than one, etc. Try different numbers. I happen to like the look of BORDER="3". BORDER="0" removes the borders altogether.
CELLSPACING (all one word) gives the amount of space between cells. Keep this kind of small, large spacing tends to defeat the purpose.
CELLPADDING (all one word) gives the amount of space (or padding) between the cell border and the cell contents. Note the cell border walls tend to fill out. A higher number fills out more. Try a few different settings. Sometimes bigger is better.
WIDTH tells the table what size it should be. The width can either be in pixels or percent. If you decide to use pixels, if the browser window is resized the table will remain the same. If you decide to use percent, when the browser window is resized the table will also resize.

The TR and TD also have attributes that can help customize your table:
WIDTH each TD can have a width, either in pixels or percent.
BGCOLOR (background color) this tells the table what color you want the TR or TD. If used in the TR tag - the table row will will have a background color. If used in the TD tag - the table data will have a background color.