Organizing with Tables and List



Lists and tables are powerful tools to help you organize your web page. Both provide you with simple ways to summarize large quantities of information and to control the spacing and layout of your page.

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 have 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:
  1. Tables of Contents
  2. 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>Tables 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 List
Allows you to create name-value lists.
The term to be defined is in the <dd> tag. The definition is in the <dt> tag. Neither require closing tags. For example:

<dl>
<dt>Definition List
<dd>Allows you to create name-value lists
<dl>

Tables

The <table> tag is one of the most versatile HTML tags. Tables can contain text, images, lists or other 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:

<table>
<tr>
<td> Cell Contents Here </td>
<td> More Cell Contents Here </td>
</tr>
</table>

Here's how this table would be displayed

Cell Contents Here More Cell Contents Here

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

  • The align attribute sets the table's alignment on the page to left, right or center. Default is left. Text will flow around left or right aligned images.
  • 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 RBG 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 RBG 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 RBG value preceded by a # or the standard color name.



Use your BackSpace key to return to the MAIN page
Copyright,�, 1998, Charles and Susan Albritton.
Site Design and Maintained by Charles and Susan Albritton
If you have any questions or Comments mail to WebMaster 		Go to Top Of Page