A Mini-Menu:
HTML Tags Used to Create a Table
Attributes & Their Definitions
Different Uses of Tables

Many people may associate tables with charts and data listing, and therefore think that tables are straightforward and unimportant. However, in HTML and the creation of web pages, Tables are the essence of organization, creating complex and professional looking pages. First off, let's get your acquainted with some terminology. Below is a table with 2 rows, 3 columns, and 6 cells. [note: if using Netscape, the '?' are actually arrows: the one next to column is pointing downward and the one next to row is pointing to the left] 

   ↓ a column
  This is a cell  
a cell   a cell
← a row

HTML tags:

HTML Tags: What they mean:
<table></table>  This indicates where a table begins and ends.
<tr></tr>  Table row. These rows are horizontal, and goes within the table tags.
<td> </td> Table data. These are individual cells within a row.

<th> </th>		 Table heading (same as table data, except text is in bold)
Tables are formed when the above tags are arranged like this:
<table><tr><td></td></tr></table>
However, simply using the above tags, you will create a table with only one row and one cell.

Here is an example of how to use the tags to create a table with more than one cell.
HTML source: What you see:
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table> 
Cell 1 Cell 2 Cell 3

Here is an example of how to use the tags to create a table with more than one row.
HTML source: What you see:
<table border="1">
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
</table> 
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3

Attributes

Here is a list and descriptions of important attributes that can be placed within the specified tag(s) to change the look or style of the table. Symbols such as # or %, that are required to be in the attribute value, are in bold.

Tag(s) Attributes What it does
<Table> Border=pixel# Borders outline the cells. The attribute decides the thickness of them.
Bordercolor=#colorcode Specifies a color for the border
Width=pixel# or #% Specifies the width of the table in pixels (w/o percent sign) or as a percentage of the page (w/ percent sign). 
Align=left, right, or center Aligns the table to left side, right side, or center of the page. Left is the default.
Cellpadding=pixel# Sets the amount of space between edges of cells and cell content. Pretend a cell is a 2 dimensional room; cellpadding would be cushions lining the walls.
Cellspacing=pixel# Sets the amount of space between the edges of the cells themselves.
Bgcolor=#colorcode Specifies a background color for the table.
Background=imagename Specifies an image to be the background for the table.
<tr>
<td>
<th>		 Align=left, right, or center Determines the horizontal alignment of the contents either within an entire row (if placed in the <tr> tag) or just an individual cell (if placed in<td> or<th>). Left is default in <tr> and <td>. Center is default in <th>.
Valign=top, middle, or bottom Determines the vertical alignment of the contents within a row or cell. Center is default.
Bgcolor=# colorcode Specifies a background color for a row or cell.
<td>
<th>		 Colspan=# of columns Specifies how many columns the cell should span.
An example
Rowspan=# of rows Specifies how many rows the cell should span.
An example

Some Examples of Table Usage

Many of the tables used in web pages are invisible, and are used to render precise page compositions. Tables ensure the accuracy in alignment that white space cannot provide. Due to the diverse and complicated use of Tables, we will only discuss the simple, common usage of tables on a page with a border background. If you wish to explore the possibilities of tables, simply go on any commercial web page, go to Edit under the File menu, and, if you are in Netscape, you will see the page in Netscape Composer, which will outline the invisible borders; (in Microsoft, you'll only see the HTML code in Notepad).

On a page with a bordered background, one's goal would be to shift all the material off of the border background. You will need to create an invisible table with one cell. If your border scrolled down the left, like in the example, the table/cell will be aligned to the right. If it was on both sides (like on my index page), then align=center...and so on. Another attribute that you need to alter is the width of the table, which has to be altered according to the width of the border, and with trial and error. Usually, I set the width with '%' value instead of pixels, but in both cases, since the width is the width of the table, if the border is still covered, the width value should be decreased. Click here to see an example.