Now we are going to do some tables. No, not the kind that you eat on, the kind that are used in HTML to layout goodies for your visitor to see. We will start with a very simple table and work our way up to nested tables, tables with hot links, tables with different colors in the cells, etc. Well, let's get started having fun making tables.

The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells. Each table may have an associated caption (see the CAPTION element) that provides a short description of the table's purpose. A longer description may also be provided (via the summary attribute) for the benefit of people using speech or Braille-based user agents.

Table rows may be grouped into a head, foot, and body sections, (via the THEAD, TFOOT and TBODY elements, respectively). Row groups convey additional structural information and may be rendered by user agents in ways that emphasize this structure. User agents may exploit the head/body/foot division to support scrolling of body sections independently of the head and foot sections. When long tables are printed, the head and foot information may be repeated on each page that contains table data.

Authors may also group columns to provide additional structural information that may be exploited by user agents. Furthermore, authors may declare column properties at the start of a table definition (via the COLGROUP and COL elements) in a way that enables user agents to render the table incrementally rather than having to wait for all the table data to arrive before rendering.

Table cells may either contain "header" information (see the TH element) or "data" (see the TD element). Cells may span multiple rows and columns. The HTML 4 table model allows authors to label each cell so that non-visual user agents may more easily communicate heading information about the cell to the user. Not only do these mechanisms greatly assist users with visual disabilities, they make it possible for multi-modal wireless browsers with limited display capabilities (e.g., Web-enabled pagers and phones) to handle tables.

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use casading style sheets to control layout rather than tables.

OK, now you got all that, right. Below is the coding for a very simple table.

<table>
<tr>
<td>Text, link, what ever<td>
</tr>
</table>

Using the above example your table would render as:

Now lets slowly start adding a few more attributes to our table to see what will happen, OK. All the added attributes will be in RED.

The first thing that we are going to do is add a border to our table so that you will be able to see when different attributes are added and what they do to the table.

<table border="xx">
<tr>
<td>Text, link, what ever<td>
</tr>
</table>

Using the border attribute you can make the border as thick or narrow as you desire. The "xx" is a number in pixels, indicating the border width. The bigger the number the wider the border. The table below will have a border of 8 pixels.

Using the align attribute you can align or position your table anywhere on your page that you desire. The table below will be aligned to the left with a border of 2 pixels

<table align=" left | center | right" border="2">
<tr>
<td>Text, link, what ever<td>
</tr>
</table>

Using the cell spacing attribute, one is able to space the cells of a table a certain distance from each other. The table below will have three more cells added to the table making it a four cell table.

<table  cellspacing="4" align=" left | center | right" border="2">
<tr>
<td>Cell 1<td>
<td>Cell 2<td>
<td>Cell 3<td>
<td>Cell 4<td>
</tr>
</table>

Using the cell spacing attribute, one is able to space the cells of a table a certain distance from each other. Cell spacing is determined by pixels, which is stated with numbers. The greater the number the more spacing in the cells. The table below will have three more cells added to the table making it a four cell table. We are now going to brake the table in to two rows instead of four cells across, we will now have two cells on top of each other.

<table cellspacing="4" align=" left | center | right" border="2">
<tr>
<td>Cell 1<td>
<td>Cell 2<td>
<tr></tr>
<td>Cell 3<td>
<td>Cell 4<td>
</tr>
</table>

Using the cell padding attribute, one is able to add padding around the cells of a table. This will allow you to pull the edges of the table away from the text or graphic that you might place in the cells. Cell padding is stated in number of pixels. The larger the number the more padding in the cells.

<table cellpadding="8" cellspacing="4" align=" left | center | right" border="2">
<tr>
<td>Cell 1<td>
<td>Cell 2<td>
<tr></tr>
<td>Cell 3<td>
<td>Cell 4<td>
</tr>
</table>

Using the border color attribute, the designer is able to change the color of the border surrounding the table cells. In the below example the color Blue is used stated in the Hex code of 0080FF.

<table  bordercolor="#xxxxxx" 
cellpadding="8" cellspacing="4" align=" left | center | right" border="2">
<tr>
<td>Cell 1<td>
<td>Cell 2<td>
<tr></tr>
<td>Cell 3<td>
<td>Cell 4<td>
</tr>
</table>

Here are some of the more commonly used attributes that go with the Table - bordercolordark="#xxxxxx" bordercolorlight="#xxxxxx" background="URL of Back Ground graphic" bgcolor="#xxxxxx" width="xx"

<table bordercolordark="#xxxxxx"
 bordercolorlight="#xxxxxx"
 bgcolor="#xxxxxx" width="xx" bordercolor="#xxxxxx"
cellpadding="8" cellspacing="4" align=" left | center | right" border="2">
<tr>
<td>Cell 1<td>
<td>Cell 2<td>
<tr></tr>
<td>Cell 3<td>
<td>Cell 4<td>
</tr>
</table>

In the table above, you can see a light yellow on the top and left border and a dark purple on the bottom and right border. The background color of the cells is a light purple and the table covers 50 percent of the page.

You are now able to produce basic tables. Now we are going to add some more goodies to the table so that you have have more fun with them.

First thing we are going to do is add a caption to the table so folks know what the table is about. Here goes.

<table bordercolordark="#xxxxxx"
 bordercolorlight="#xxxxxx"
 bgcolor="#xxxxxx" width="xx" bordercolor="#xxxxxx"
cellpadding="8" cellspacing="4" align=" left | center | right" border="2">
<caption>What you are titling your table</caption>
<tr>
<td>Cell 1<td>
<td>Cell 2<td>
<tr></tr>
<td>Cell 3<td>
<td>Cell 4<td>
</tr>
</table>

Now let's add some Heading to our table, to give the rows some meaning.

<table bordercolordark="#xxxxxx"
 bordercolorlight="#xxxxxx"
 bgcolor="#xxxxxx" width="xx" bordercolor="#xxxxxx"
cellpadding="8" cellspacing="4" align=" left | center | right" border="2">
<caption>My First Table With Title</caption>
<th>Heading Title</th>
<th>Heading Title</th>
<tr></tr>
<tr>
<td>Cell 1<td>
<td>Cell 2<td>
<tr></tr>
<td>Cell 3<td>
<td>Cell 4<td>
</tr>
</table>

Now let's add some attributes to the Table Cells.

<table bordercolordark="#xxxxxx"
 bordercolorlight="#xxxxxx"
 bgcolor="#xxxxxx" width="xx" bordercolor="#xxxxxx"
cellpadding="8" cellspacing="4" align=" left | center | right" border="2">
<caption>My First Table With Title</caption>
<th>Heading Title</th>
<th>Heading Title</th>
<tr></tr>
<tr>
<td align="center | left | right">Cell 1<td>
<td background="url of graphic">Cell 1<td>
<tr></tr>
<td align="center | left | right">Cell 1<td>
<td align="center | left | right">Cell 1<td>
</tr>
</table>

This will give you the basics of creating tables for layout control on web sites. There are a few other things that can be done with tables. You can make one or all of the cells hot links to other pages or sites, you can change each cells back ground color individually, add a different back ground to each cell, control the width, height and or column span of a table row. For more information use your search engine and look up HTML Tables information or contact Starvation Graphics for group or individual training. Now its time to go to the next item, Forms.