Creating Tables

Tables are one of the biggest assets you can use to make your webpage design more flexible.  As always, however, moderation is the key.  The important thing to remember is that the more tables there are in a webpage, the slower some browsers (like Netscape) are able to load up the page.  Another thing to remember is that different browsers interpret the HTML coding for tables differently.  In this lesson, I will look primarily at the differences between Netscape 2.0 to 4.0 (Netscape) and Internet Explorer 3.0 to 4.0 (IE) as these are the most common browsers being used as of this update.


Important Notes to Remember

  1. If you forget to close a tag (i.e., put the > on the end), everything beyond the mistake disappears in Netscape.  Also, if you don't close the table with the </TABLE> tag, the entire table will not show up as well as any text that may have followed it.
  2. If you are using a specific font other than the default in your tables, keep in mind that while Internet Explorer assumes you are using the same font throughout the table, Netscape does not.  Therefore, if you want the specific font in all your cells in Netscape, you should specify the font in every cell (TD) tag.
  3. If possible, check out your webpage design using both Internet Explorer and Netscape to make sure your tables are working in both.

Starting and Ending Tags

So, how to make tables.  As with everything else we've used so far, there are the opening and closing tags:

<TABLE>...</TABLE>

To start and end each row in your table, you must use the following tags:

<TR>...</TR>

To start and end each cell in your table, you must use the following tags:

<TD>...</TD>

Commands

Following are some of the commands you can use within the TABLE, TR or TD tags.  All the commands do not need to be included.  For those that are omitted, the computer uses the default properties.

Command Description In tag(s)...
ALIGN="..." - This aligns the content within the table cells horizontally.  You can use "LEFT", "CENTER" or "RIGHT".  The default is left alignment.<TABLE>, <TD>
BACKGROUND="file" - If you wish, you may make the background of your table a picture, as you could for your webpage.    Please keep in mind the guidelines listed earlier in this tutorial when doing so, however.  There is a notable difference here between IE and Netscape.  In IE, the image will appear over the entire table, whereas in Netscape, the image appears in each cell.  This will be demonstrated in the examples.<TABLE>, <TD>
BGCOLOR=#XXXXXX - You can specify the background colour of all the cells in your table by putting this in your TABLE tag.  The default is the background colour specified for you page.  If you want to have a different colour for every cell in your table, specify the colour in the cell content tag.<TABLE>, <TD>
BORDER=n - This allows you to control how wide you want the border of your table (note: NOT the border of each cell) to be.<TABLE>
BORDERCOLOR=#XXXXXX - This allows you to choose the colour of your table border (note again: NOT the cell border).  The difference will be explained in the examples.<TABLE>
CELLPADDING=n - This specifies how much space (in pixels) you want between the content of the cell (text, picture, etc.) and the border of the cell.  Replace the 'n' with a number<TABLE>
CELLSPACING=n - This command specifies the amount of space between the cells.  Yes, there is a difference between this command, and the last one.  We will try to show you later in an example.<TABLE>
COLS=n - If this command is not used, the computer will simply use a default width for each column, depending on the maximum number of characters in each cell of the column.  When this command is used (with 'n' specifying the number of columns you want), the columns are equally spaced, and all are the same width.  This attribute only works in Netscape.<TABLE>
COLSPAN=n - You can make one of your cells span over 'n' columns using this command.<TD>
HEIGHT=m or HEIGHT=n%- - You can specify how high your table will be when used in the <TABLE> tag.  You can dictate the height in 'n' pixels or in 'm'% of the screen.  If you wish to specify the height of your table cells, you can do so in the cell content (<TD>) tag.<TABLE>, <TD>
ROWSPAN=m - you can also make a cell span over 'm' rows.<TD>
VALIGN="..." - This aligns the content within the table cells vertically.  Commands possible are "CENTER", "TOP" and "BOTTOM".  The default is center.<TABLE>, <TD>
WIDTH=n or WIDTH=m% - This command dictates how wide your table will be when used in the <TABLE> tag.  You can dictate the width in 'n' pixels or in 'm'% of the screen.  If you wish to specify the width of your table cells, you can do so in the cell content (<TD>) tag.<TABLE>, <TD>

Now, you have all the tools at your fingertips.  Using them is quite easy, once you have the picture in your head.  So, in order to better visualize the tables, let's take a look at a few examples on the following page.

Return to the HTML Lesson Guide
Table Creation Examples
Read the next lesson: Frames

This page created by Kat Lai.
Feel free to e-mail me with any comments or questions.