How do I create a Table?
Tables are one of the handiest tools you will ever learn to use in your web coding life. (How's that for an opening?) Formatting text and images is a breeze when you can put stuff on your page just about anywhere you like, without moving everything else around and screwing up all the work you have already done! Tables will allow you to do that!
There IS, however, one big drawback to using a table. Your browser will wait until ALL of the material contained in the table has been downloaded before it displays the table on the page. So, it is absolutely essential that you include Height and Width tags in any images you put into a table cell, so that the browser doesn't wait for every single graphic to download.
If you include the Height and Width attributes, the browser will know what the image size is, and set the rest of the page up around the image, without having to wait for the actual image to load first.
You will have seen this effect when you load a page and there are odd shaped empty boxes on a page that eventually become images.
CODING THE BASIC TABLE TAGS:
Tables are comprised of cells. Each of these cells can contain images, text or even another full table.
Here are the tags I use to create a table:
<TABLE> <-- this is the Opening Table tag
</TABLE> <-- this is the Closing Table tag
<TR> <-- this is the Opening Table Row tag
</TR> <-- this is the Closing Table Row tag
<TD> <-- this is the Opening Table Cell tag
</TD> <-- this is the Closing Table Cell tag
The Opening <TABLE> tag is quite easy to understand. It simply tells your browser that you want to create a table next. As with most of the tags we have discussed, the <TABLE> tag has several Attributes you can use to change the way your table looks and behaves:
BORDER=
If you want your table displayed with a border, you can specify a numerical value which will tell the browser how many pixels wide you want the border to be. Using BORDER="5" will give you a border 5 Pixels wide, etc.
GAZOO'S HINT: I ALWAYS set this value to "1" while I am creating the Table. This allows me to view the Table as I build it, then when I am finished the table and everything appears the way I want it, I can turn off the border altogether by using BORDER="0".
WIDTH=
By using this Attribute, you can specify how wide you want the table to be. If you do not specify a table width, the table will appear as wide as the objects you put into it. There are two methods you can use to specify the WIDTH= Attribute:
Percentage method
WIDTH="60%"
Using this method will create a table 60% the width of your screen. This method is recommended because people using different screen resolutions will always see the table as being 60% of their screen width, no matter whether they are using 640x480, 800x600 or whatever.
Absolute method
WIDTH="450"
Using this method you can specify an exact PIXEL width. This can be very handy if you are placing objects precisely on your page. Be warned though, if you specify a table has a width of 800, for example, and a viewer with a resolution of 640x480 (640 wide by 480 high)tries to view your table, then the viewer winds up not being able to see the whole table and has to scroll to the right constantly to see everything.
BGCOLOR=
You can use this Attribute to specify the background color of EVERY cell in your table. ALL of the cells in the table will have the same background color. Use the Hexadecimal Color Value of your choice, as we have covered in previous tutorials (The FONT Tag Explained). We would code the BGCOLOR= Attribute like this:
BGCOLOR="#ff0000"
ALIGN=
Using this Attribute you can define the alignment of the WHOLE table. Correct values for this Attribute are "right", "left" and "center". So we would code this like so:
ALIGN="right"
CELLPADDING=
This numerical value lets you specify how many pixels there should be between the object/text in the cell and the wall of the cell that the object is in. This value will affect ALL of the table's cells. You cannot have one cell with a different cellpadding value than another in the same table. We code it thusly:
CELLPADDING="2"
CELLSPACING=
This numerical value lets you specify how many pixels should be BETWEEN each cell. This value affects ALL cells in the table the same way. We code this one just like this:
CELLSPACING="3"
GAZOO'S HINT: If you are having trouble understanding the difference between cellpadding and cellspacing, imagine you have a crate full of beer cases. The space between the individual bottles and the case they are in, is the CELLPADDING. The space between each of the beer cases inside the crate is the CELLSPACING.
As always, you can COMBINE any or all of the Attributes into one <TABLE> tag like this:
<TABLEWIDTH="60%" CELLPADDING="2" CELLSPACING="3" ALIGN="RIGHT" BORDER="1">
Remember that the Table Attributes affect the ENTIRE Table. You can learn more about tables and customizing them in the Formatting Tables tutorial.
ENOUGH ALREADY! SHOW ME THE TABLE!!
Here is what a very simple table (with the border value set to "1" or greater) looks like:
|
| Row 1 |
|
Column 1 Column 2 Column 3
|
Here we have a table with three cells, three columns and one row with a wee bit of example text in each cell.
Let's take a look at the coding for the example table:
<TABLE BORDER="1"> <-- Opening table tag with the border 'on'
<TR> <-- starting the first row with this tag
<TD> Cell A </TD> <-- defining the individual cell
<TD> Cell B </TD> <-- defining the individual cell
<TD> Cell C </TD> <-- defining the individual cell
</TR> <-- ending the first row with this tag
</TABLE> <-- finishing the table with this tag
Try this on your own page! It is really quite simple to do.
Notice I used the Opening <TR> tag to specify the start of the row and the Closing </TR> tag way at the bottom to specify that I wanted the row to end.
BUT WHAT IF I WANT MORE THAN ONE ROW?:
If you want more than one row, all you have to do is tell the table to start a new row, and define more cells! Let's look at a table with two rows, three columns and six cells now:
| Cell A | Cell B | Cell C |
| Cell D | Cell E | Cell F |
| Row 1 Row 2 |
|
Column 1 Column 2 Column 3
|
Here is how I would code the table you see above:
<TABLE BORDER="1"> <-- Opening table tag with the border 'on'
<TR> <-- starting the first row with this tag
<TD> Cell A </TD> <-- defining the individual cell
<TD> Cell B </TD> <-- defining the individual cell
<TD> Cell C </TD> <-- defining the individual cell
</TR> <-- ending the first row with this tag
(here is where the second row comes in)
<TR> <-- starting the SECOND row with this tag
<TD> Cell D </TD> <-- defining the individual cell
<TD> Cell E </TD> <-- defining the individual cell
<TD> Cell F </TD> <-- defining the individual cell
</TR> <-- ending the SECOND row with this tag
</TABLE> <-- finishing the table with this tag
Try this on your own page and see what effects you can get by changing the Attribute Values around. For now, make sure you have the SAME number of cells in each row or your tables will get pretty wacky! We will be discussing how to set up tables with varying numbers of cells in each row, in the Formatting Tables tutorial.
TABLE TIPS TO REMEMBER:
ALL of the Table tags I have shown you are absolutely necessary to properly code your tables! If you leave out a tag or even a single bracket you could wind up with absolutely nothing showing on your page.
Always start a new Row with the <TR> tag and end the Row with the </TR> tag.
Good Luck building your Tables!
