Beginner Tables

Tables are an essential piece for creating a professional layout. HavenFX uses many tables to organize and display data, even though the tables probably are not visible. Here you will learn the basic tags used in creating tables.

Playstation 2	GameCube	XBOX
Final Fantasy	Metroid Prime	Halo

Now that is an example of a very basic table, it may not look like one but it is. Here is the coding used to create that table.

<TABLE> <TR> <TD>Playstation 2</TD> <TD>GameCube</TD> <TD>XBOX</TD> </TR> <TR> <TD>Final Fantasy</TD> <TD>Metroid Prime</TD> <TD>Halo</TD> </TR> </TABLE>

Now this may seem complicated but it really is not. There are only the three basic table codes being repeated. So let's break em down:

<TABLE></TABLE> - These are the beginning and closing tags of tables. Not that hard to remember, eh?
<TR></TR> - TR signifies the start of a new Table Row. When you want to make a new row in the table, you obviously add in this tag. Always put the </TR> after you are finished with the row or your table will not look the way you want it to.
<TD></TD> - ALways insert the TD tag when you want to insert new data. TD stands for Table Data, and it opens a cell for your data. Close your Table Data with the closing </TD> tag when you are done.

Now you may want to know how to change the widths, border size, border color, and a whole bunch of other things. Well here it is:

Playstation 2	GameCube	XBOX
Final Fantasy	Metroid Prime	Halo

As you can see, I dictated the width, alignment, and border in the table. I added some other codes as well. The code for the above table is directly below.

<TABLE width="300" border="1" bordercolor="#000000" align="center" cellpadding="1" cellspacing="0"> <TR> <TD width="100">Playstation 2</TD> <TD width="100">GameCube</TD> <TD width="100">XBOX</TD> </TR> <TR> <TD width="100">Final Fantasy</TD> <TD width="100">Metroid Prime</TD> <TD width="100">Halo</TD> </TR> </TABLE>

As before, we have the same table tags, but now we have inserted some attributes to the table.

Width - Sets the width of the table, in pixels or percent. As you can see, the width code is in the TD tag as well.
Border - Sets the size of the border. Most times, it will be either 1 or 0, depending on the data you are displaying.
Border Color - Sets the colors of the border, in HEX.
Align - How the table will appear on the page: left, center, or right.
Cellpadding - Will dictate in amount of space between the cell content and the cell border, in pixels. 1 or 0 are usually good amounts to set.
Cellspacing - Gives the amount of space between cells. If you want a thin border, set it to 0, which is a good number to use.

Finally, you are going to learn how to change the background color of a table.

Playstation 2	GameCube	XBOX
Final Fantasy	Metroid Prime	Halo

You may have noticed that the background color is now white. It is a simple code to insert into the table tag. Here is the whole table code:

<TABLE width="300" bgcolor="#C3C3C3" border="1" bordercolor="#000000" align="center" cellpadding="0" cellspacing="0"> <TR> <TD width="100">Playstation 2</TD> <TD width="100">GameCube</TD> <TD width="100">XBOX</TD> </TR> <TR> <TD width="100">Final Fantasy</TD> <TD width="100">Metroid Prime</TD> <TD width="100">Halo</TD> </TR> </TABLE>

bgcolor - Set your whole table background to a solid color, such as white. Use HEX codes to apply.
background - If you don't want a solid color, you can use a background image for a backdrop to your text. I do this here, and it is very useful. To apply, instead of bgcolor, insert background="url/to/image". GIF Format is recommended and for the background image to look right, make sure the table width is the exact same number of the width of the image.