Tables

Tables are used to align documents as well as data within your documents. Tables are used to organize your data and make your website look clean and professional. We will be looking at two types of tables here ... a Border Setup Table and Tables inside Tables.

Border Setup Tables

As you saw in the borders page, tables are used extensively in aligning documents. What is important is that your documents must display in all browsers and look clean and uniform in all screen resolutions (sizes). Tables are ideal for this function.

First we must explain the attributes of a simple table border setup table.

The < table > tag and it's < /table > closing tag will define the beginning and closing of each table.

You may specify any borders surrounding your tables within the opening table tag as follows:

< table border=0 > will display no borders at all and is normally used in formatting documents for borders.

You may also specify table width in the opening table tag as follows:

< table width=100% > means the table will display at 100% in your document. Most other tables inside a document will be less - 80% is a good number.

The next table tag is the < TH > and < /TH > table header tags. Please notice (VIEW SOURCE) that an image file has been placed within these tags in this document. This is a transparent background filler GIF that takes the text off the border edges and is highly recommended for uniformity. You may download this transparent gif file below but first you must find it :). Run you mouse over the next line with your right mouse button clicked until you see a menu up with the option to *save file as* available - it is located close to the border on the right side of page near the left border bar.


The following table tag is the < TR > and < /TR > table rows tags. These define the number of rows appearing in your document. For a border setup table this tag remains empty.

The next table tag is the < TD > and < /TD > table data tags. This acts like the body tag of your document. Please notice that I have two sets of Table data tags in the document setup table. The first set is empty because it serves to accomodate data inserted inside your left border. As my left border is empty this tag contains no data. If however you wish to put data such as an index or images in the left border, the data will be enclosed in this first set of < TD > < /TD > tags.

If you insert data or images in the left border, you will want them to appear at the top of the border. To do this you must define the verticle alignment command in your < TD > tag as follows:

< TD VALIGN=TOP > Insert Image or text < /TD >

The second < TD > table data tag opens your body data within the main table setup border. Here you will fill in your entire document's data and this will be the first tag closed when you close your final table prior to closing your < /BODY > and < /HTML > tags.

Sometimes your data will sit on the border of the left margin. This is easily resolved by using the < blockquote > and closing < /blockquote > tag when your data entry is finished.

Closing your document setup table requires the following tags.

  • Close your table data tag first with the closing < /TD > tag.
  • Close your table rows tag with the closing < /TR > tag.
  • Close your table with the closing < /TABLE > tag.
  • Close all font tags that remain open with the closing < /FONT > tag.
  • Close any centering tags with the closing < /CENTER > tag.
  • Close your document's body tag with the closing < /BODY > tag.
  • Close your document with the closing < /HTML > tag.


For a review of document setup table tags please revisit the borders page .

Inside Tables

Often tables are used inside of document setup tables to organize and display data for easy reading. I've used inside tables on several pages in this website. Please see the Tags page for examples of inside tables to organize and present data.

Below is a step-by-step guide to setting up inside tables. The first table, the basic tags table, is aligned 100% in the right border with a double border edge and the second table, the background attributes table, is aligned at 70% with a double border edge.

Basic Tags Table

< table WIDTH=100% BORDER=2 >
Sets up the table in the right border (because it is located in the second opening < TD > tag) at 100% resolution (WIDTH=100%) and with a double border (BORDER=2).

< caption > < b > BASIC TAGS < /b > < /caption >
Names your table with a title. Note that I have hilighted the caption with the < b > and < /b > bold tags. A table caption is optional.

< th width=15% > TAGS < /th >
< th width=20% >Description < /th >
< th >Function < /th >

These < TH > tags name and define the width of each of your column headers. Take another look at this table on the tags page to see the results. You must name and also define the width of each column up to a total of 100% of the table.
The first < TH > table header tag (TAGS) is 15% of the table width, the second (Description) is 20% of the table width, and the final column (Function) is automatically defined at 65% of the table width which is the remaining space. Remember that the < TH > tag defines your entire table's titles and will remain stationary throughout the table.

< tr valign=top >
< td align=center > HTML < /td >
< td align=center > < i > < html > < br > < /html > < /i > < /td >
< td align=left > Opens all HTML documents. The closing tag, < /html > goes at the very bottom of your documents and closes the page. < /td >
< /tr >
Each table row < TR > will be defined seperately per item and must be closed with the closing < /TR >tag to complete the row. Again take a look at the results of the first table on the tags page for clarification.
The opening < TR > tag above has an attribute added < TR VALIGN=TOP > which provides that each item entry will appear at the top of the cells.

The next tag, < TD > is the table data entry which defines the content of each row. For uniformity, all cell data is aligned to be centered .... < TD ALIGN=CENTER >. To move onto the second cell data entry, you must first close each < /TD > tag.

To move down to the second row of the table you must first close your < /TR > cell and then open another for the next row.

< tr valign=top > < td align=center >Title < /td >
< td align=center > < i > < title >
< /title > < /i > < /td >
< td ailgn=left > Names your documents. Example: this page is called Basic Tags. I programmed this with the following tags:
< head > < title > Basic Tags < /head > < /title > < /td >
< /tr >


Each row in your table must follow the examples above to format properly. At the end of your inside table close it with the < /TABLE > tag.

Background Attributes


This second table is formatted exactly as the above table and any other table will be. The only difference between the two table is the number of rows. Please visit the Tags page and do a "VIEW SOURCE" to see the slight differences in the table setup.

Do not let table construction intimidate you when all it takes is practice and trial and error to get it right. Go ahead and open a test page on your website and try out different sized tables. Good luck.


|Home| URLs| Themes| Content| Directories| Tags|
|Colors| Fonts| Images| Links| Lists| Frames| Borders
|Documents| Exposure| Guestbook| Thank You E-Mail|
1