Tables

Organizing with Tables and Lists

Lists and tables are powerful tools to help you organize your web page. Each provides webmasters with simple ways to summarize large quantities of information and to control the spacing and layout of their pages. Care must be taken when designing in tables, as various browsers are more sensitive to the table tags than others. Also, some older versions of browsers so not support tables at all. Just another reason why webmasters should verify their code by viewing their work through various browser software packages.

Lists

HTML supports several list formats, the most popular being:

	Unordered Lists
	Ordered Lists
	Definition Lists

Unordered Lists

The <UL> tag allows you to create bullet lists which are useful for

	Hot lists or other collections
	Organizing short, nonsequential groups of data
	Emphasizing important points

Within the opening <UL> and closing </UL> tags, the <LI> tag defines individual entries. The <LI> tag doesn't require a closing tag. The unordered list above uses the following HTML:

<UL>
<LI>Unordered Lists
<LI>Ordered Lists
<LI>Definition Lists
</UL>

Ordered Lists

The <OL> tag allows you to create numeric lists which are useful for:

Table of Contents
Instructions or other sequential information

The <OL> tag also uses the <LI> tag to define individual entries. The ordered list above uses the following HTML:

<OL>
<LI>Table of Contents
<LI>Instructions or other sequential information
</OL>

Definition Lists

The <DL> tag allows you to create name-value lists such as glossaries.

Definition Term
Defining description in sentence format.

The term to be defined is in the <DT> tag. The definition is in the <DD> tag. Neither require closing tags. For example:

<DL>
<DT>Definition Term
<DD>Defining description in sentence format.
</DL>

Tables

The <TABLE> tag is one of the most versatile HTML tags. Tables can contain text, images, lists or other "nested" tables and can be used to:

	Control the layout of pictures and text.
	Add margins to your page.
	Create multi-column pages.
	Create bullet charts with special graphics,
	Create side headings.

While building tables is somewhat more complex than other HTML tags, learning them is well worth your time. The HTML to build a simple, one row, two column table is:

<CENTER>
<TABLE border="2" cellspacing="3" cellpadding="2">
<TR>
<TD> Data goes here </TD>
<TD> More data here </TD>
</TR>
<TR>
<TD>Second Row Starts</TD>
<TD> Second Row Column 2</TD>
<TR>
</TABLE>
</CENTER>

Here's how this table would be displayed

Data goes here More data here

Second Row Starts Second Row Column 2

The <TABLE> tag defines the beginning and end of the table. It has several important attributes:

	The width attribute controls the overall horizontal size of the table. Width can be specified in pixels or as a percentage of the screen. Unless otherwise specified, the table will use as much space as is necessary to contain the contents of the cells.
	The border attribute adds a chisel edged border around the outside of the table. Size of the border is set in pixels.
	The cell spacing attribute controls the spacing between cells in the table. Cell spacing is set in pixels.
	The cell padding attribute controls the spacing between the edge of the cell and its contents. Cell spacing is set in pixels.
	The vspace and hspace attributes control the space between the table and the surrounding text when text flows around the table. Value is in pixels.
	The bgcolor attribute changes the background color of the table. The value can be the RGB value preceded by a # or the standard color name.

The <TR> tag defines the rows of the table. Attributes include:

	The bgcolor attribute changes the background color for cells in the row. Value can be the RGB value preceded by a # or the standard color name.
	The align attribute sets the horizontal justification of pictures or text in the row to left, right or center. Default alignment is left.
	The valign attribute sets the vertical alignment of pictures or text in the row to top, middle or bottom. Default is middle.

The <TD> tag defines the cells in the row. Attributes include:

	The align attribute sets the horizontal justification of pictures or text in the cell to left, right or center. Default alignment is left.
	The valign attribute sets the vertical alignment of pictures or text in the cell to top, middle or bottom. Default is middle.
	The width attribute controls the overall horizontal size of the cell. Width can be specified in pixels or as a percentage of the screen. Unless otherwise specified, the cell will use as much space as is necessary to contain the contents of the cells.
	The bgcolor attribute changes the background color of the cell. The value can be the RGB value preceded by a # or the standard color name.