TIP

A table is similar to one used in a word processing package. A table consists of columns and rows. The columns are the vertical cells and the rows are the horizontal cells.

TIP

You can insert and align text, graphics or movies in a table's cell. You can also have many tables on a page or one table with many cells.

TIP

Do not forget to use the closing </table> tag. Different browsers give you unexpected results from this omission.

TIP

When you wish to put two images next to each other they will join together with space between them. If you want your images to be placed side by side with no gaps inbetween, put them in neighboring table cells and turn off borders in the table tag.

Glossary

TABLE - the main table - opening tag

CELLPADDING adds space around the contents of the cell making the walls of the table bigger. changing the size of individual cells.

BORDERCOLORS can be a good device to visually separate text. The code for this is as follows and is placed within the BORDER tag: BORDERCOLOR="#ABCDEF"

Tables

A table is created by first defining the table as a whole, then defining the cells starting in the upper-left corner and moving to the right, dividing your text and graphics into columns, and then inserting breaks to begin new rows.

There are many kinds of tables.

<TABLE BORDER CELLSPACING = 5>(opening tag for table)
<TR>
<TH> (opening tag for table header) <B>Schools</B></TH>
<TD><B>3</B></TD>
</TR>
<TR>
Waverley High School
<TD>1</TD>
</TR>
<TR>Alexander High School
<TD>2</TD>
</TR>
<TR>Xedoc High School
<TD>3</TD>
</TR>
</TABLE>

In the table tag you can define the size of the table with the WIDTH and HEIGHT attributes. Depending on the dimensions of the table it will affect the size of the individual cells. You can use absolute dimensions -actual pixels or relative dimensions -percentage of the page to define the table size. For example, <table width =80%> or <table width =420>

Look at the "VIEW/Source"(MIE) or View/Page Source (Netscape) to see the way the tables have been set up on this page to include two columns. For the first column which includes the tips and glossary I have designated 25% width and for the main column 75%.

You need to consider when it is appropriate to use the absolute dimensions of pixels or percentages when you need to consider the various types of monitor settings on which the web pages will be viewed. For instance, if a pixel based table was 700 pixels in width and the monitor viewing the table has a 640 X 480 setting, the table would be cut off and vital information could be lost. Thus, in this case it would be wiser to choose a percentage attribute.

When you are browsing the Internet and see a well structured page, look at the source code and see if you can ascertain how to reproduce it. Remember to cut and paste to include the open and closed tags for table, td - column and tr- row.

David Siegal, author of "Creating Killer Websites" has strong opinions on the use of tables on a webpage. He recommends table borders should always be turned off, using the BORDER="0" attribute on the table tag." He further states that a good table presents information as cleanly as possible. Whether presenting straighforward text or numeric information, try to show only a minimum of extra embellishments that may take attention away from the information.

David recommends a website which is dedicated to various layout techniques utilising borders turned off. Some of them are good fun.

Go to the previous page.
Go to the next page.
Go to the Home page.