Part II -- Tables

If nothing else is done to text in a HTML document, browsers will display the text that is aligned to the left margin. Paragraphs indicated by the presence of the <P> tag will be separated by one line space in whatever font the type is being displayed. The paragraph tag in level 0 and level 1 HTML is only used to indicate paragraph breaks and has no attributes. Level 2 HTML and higher introduces alignment attributes that can be used with the paragraph tag used as a container. Another alignment tag that is commonly used is the <CENTER> tag, a container which centers its contents. The <CENTER> tag is a "shortcut" for the more complex <p align="center">. More complex text alignment and the ability to "wrap" text around graphics is provided by tables which, unfortunately, cannot be displayed by browsers such as LYNX which are compliant to level 2 or below. If the author wishes to create a line break without adding an extra line space, the break (<BR>) tag is placed at the end of the line to be broken.

Tables are complex in that they are a collection of nested tags which are all dependent on one another to be displayed correctly. Use of table tags outside of a table "environment" will result in formatting that may or may not be what was intended by the author. A basic table is constructed in this way:

The <TABLE> ... </TABLE> container indicates the boundaries of the information contained within the table. Unless the <TABLE> tag contains a border attribute, the table will not display visible borders, a characteristic which is useful when "wrapping" text around graphics. The <TR> ... </TR> container indicates the boundaries of a Table Row, and the <TD> ... </TD> container indicates the boundaries of the Table Data, or information contained within each table cell. The HTML code above displays like this:

row 1 cell 1	row 1 cell 2
row 2 cell 1	row 2 cell 2

The <TR> and <TD> tags must not be used outside of the <TABLE> ... </TABLE> container. However, a <TD> ... </TD> container can contain an entirely separate <TABLE> ... </TABLE> construct with no problems. This makes tables extremely useful for formatting text on a page. An example of the creative use of nested tables can be seen here. If this were an actual class, I would offer extra points to the people who could re-create this table without looking at the source code. A complete guide to the use of tables in HTML 3.2 is available here and a complete guide to the use of tables in HTML 4.0 is available here. Good luck!

[ Return to the Table O' Contents | Return to Chapter 3 Part I | Procede to Chapter 3 Part III ]