HTML TABLES

Tables in HTML

There are graphic tables and text tables.
Text tables use <PRE> pre formatting and a fixed width font to keep columns aligned.
Graphic tables use the following tags. (these are the most common tags with their most common attributes:)
ALL Of these tags use ending tags!
<TABLE>

(ALIGN, BGCOLOR, BORDER, CELLPADDING, CELLSPACING, WIDTH)
Cell spacing is the amount of space between the cells. Cell padding is the amount of space between the cell text and the cell border. In other words, the amount of "padding" around the text.
Width can be expressed in pixels or as a percentage.
The thicker the border the more of a 3-D effect you get. border=0 is invisible

align= left or right and other elements on the screen will wrap around, center is not an option, create a division and center the table within it <div align=center><table>...</table></div>

<TR>
row (ALIGN, VALIGN, BGCOLOR)
<TH>
header (a type of table data) (ALIGN, HEIGHT, VALIGN, WIDTH, NOWRAP, BGCOLOR, COLSPAN, ROWSPAN)
<TD>
data (each cell within a row) (ALIGN, VALIGN, WIDTH, NOWRAP, BGCOLOR, COLSPAN, ROWSPAN)

You can make your HTML code easier to read and follow by using these techniques:
1- Start each table row on its own separate line in the HTML file.
2- Add blank spaces between table rows. Indent to show levels.
3- Generously add Comment tags. 
4- Don't leave any empty cells, always put in at least a blank space

Examples: (View the source code (right click on the page) to see the table design!)

A table with 2 rows, 3 columns and a caption.
This table has cellpadding=0, cellspacing=5, align=center, width=50%, bgcolor="light yellow "
colspan=2		rowspan=2, valign=top
bgcolor=red in a single cell	Table Header	rowspan=2, valign=top

A table with 4 rows, 3 columns and a caption.
Settings: cellpadding=10, cellspacing=0, border=1, align=left (default), width=100%, bgcolor= lt. blue
Notice that with the cellpadding=10 there is plenty of space between the text and the cell borders.	Any cell in a table can be designated a header and will appear bold and centered.	The cell below has been deleted. Its inner borders are not visible but the outer table border is.
This row is aligned center	with a bgcolor of light purple
The following cell is empty -->		<-- empty cell over there
The next cell has a blank space-->		<--cell with blank space

To see the code for many variations on table design, try: http://www.netscape.com/assist/net_sites/table_sample.html (link good as of 5/2003)