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> |
<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> |
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.
