Tables (if you were looking for furniture, immediately hit the BACK button on your browser NOW).

For me, tables are by far the most useful HTML element. As mentioned in the main page, there is little horizontal control of your web page. Only tables and <MULTICOL> give you what little control you have. In many instances, my entire document is one giant table.

The Simple Table

A table (or matrix) begins with, what else, <TABLE> and ends with </TABLE>. Tables consist of rows designated by <TR> and end with </TR>. Within the row, you have the table data <TD> and ending with </TD>. So to set up a table with two rows and three columns, the HTML would be: 

<TABLE>
<TR>
	<TD> this is row 1 column 1 </TD>
	<TD> this is row 1 column 2 </TD>
	<TD> this is row 1 column 3 </TD>
</TR>
<TR>
	<TD> this is row 2 column 1 </TD>
	<TD> this is row 2 column 2 </TD>
	<TD> this is row 2 column 3 </TD>
</TR>
</TABLE>

The effect of the above markup is:
this is row 1 column 1 this is row 1 column 2 this is row 1 column 3
this is row 2 column 1 this is row 2 column 2 this is row 2 column 3
Instead of <TD> one can use <TH> for Table Header. It is not really a header and can appear anywhere within the row. What <TH> does is to center the contents of the table and makes the text bold.

Just about all tags valid in the <BODY> container are valid within the <TD> (or <TH> container).

Here is the same table with row and column headers. 

<TABLE>
<TR>
	<TH>upper left</TH>
	<TH>col header 1</TH>
	<TH>col header 2</TH>
	<TH>col header 3</TH>
</TR>
<TR>
	<TH>row header 1</TH>
	<TD> this is row 1 column 1 </TD>
	<TD> this is row 1 column 2 </TD>
	<TD> this is row 1 column 3 </TD>
</TR>
<TR>
	<TH>row header 2</TH>
	<TD> this is row 2 column 1 </TD>
	<TD> this is row 2 column 2 </TD>
	<TD> this is row 2 column 3 </TD>
</TR>
</TABLE>
upper left col header 1 col header 2 col header 3
row header 1 this is
row 1 column 1 		this is
row 1 column 2 		this is
row 1 column 3
row header 2 this is
row 2 column 1 		this is
row 2 column 2 		this is
row 2 column 3
Notice how the headers are centered and bolded.

Still, not very intersting. What is useful are the options that can be used on the various table tags.

Options within the <TABLE> Tag

Border

One can specify a border about the table within the <TABLE> tag. The thickness of the border can specified. The syntax is
<TABLE BORDER=size>
where size is the number of pixles.

Same table with a border of 1
upper left col header 1 col header 2 col header 3
row header 1 this is
row 1 column 1 		this is
row 1 column 2 		this is
row 1 column 3
row header 2 this is
row 2 column 1 		this is
row 2 column 2 		this is
row 2 column 3

With a border of 5 pixles.
upper left col header 1 col header 2 col header 3
row header 1 this is
row 1 column 1 		this is
row 1 column 2 		this is
row 1 column 3
row header 2 this is
row 2 column 1 		this is
row 2 column 2 		this is
row 2 column 3

Now 10 pixles.
upper left col header 1 col header 2 col header 3
row header 1 this is
row 1 column 1 		this is
row 1 column 2 		this is
row 1 column 3
row header 2 this is
row 2 column 1 		this is
row 2 column 2 		this is
row 2 column 3

The border color is picked up from the BGCOLOR= on the <BODY> tag. This will happen whether or not you have a background image on the page.

Width

The width of the table can also be specified. One can specify the number of pixles or a percentage of the viewing window.

Here is a table that is 200 pixles wide. Also, a number has been left off the border statement. The syntax is

<TABLE border width=200>
upper left col header 1 col header 2 col header 3
row header 1 this is
row 1 column 1 		this is
row 1 column 2 		this is
row 1 column 3
row header 2 this is
row 2 column 1 		this is
row 2 column 2 		this is
row 2 column 3

Here is a table with the width 100% of the viewing screen.

<TABLE border width=100%>
upper left col header 1 col header 2 col header 3
row header 1 this is
row 1 column 1 		this is
row 1 column 2 		this is
row 1 column 3
row header 2 this is
row 2 column 1 		this is
row 2 column 2 		this is
row 2 column 3

If you want to center a table, you need to enclose the entire table within the <CENTER> </CENTER> container. The <P align=center> </P> won't work for some browsers.

Here is a table with the default border, 50% of the screen and centered.

upper left col header 1 col header 2 col header 3
row header 1 this is
row 1 column 1 		this is
row 1 column 2 		this is
row 1 column 3
row header 2 this is
row 2 column 1 		this is
row 2 column 2 		this is
row 2 column 3

Cellpadding and Cellspacing

Cellspacing defines the number of pixles between the individual cells while cellpadding defines the number of pixles between the cell border and the test (or image) within the cell.

Here is the original table:
upper left col header 1 col header 2 col header 3
row header 1 this is
row 1 column 1 		this is
row 1 column 2 		this is
row 1 column 3
row header 2 this is
row 2 column 1 		this is
row 2 column 2 		this is
row 2 column 3

Here is the table with the default border and a CELLPADDING=10.
upper left col header 1 col header 2 col header 3
row header 1 this is
row 1 column 1 		this is
row 1 column 2 		this is
row 1 column 3
row header 2 this is
row 2 column 1 		this is
row 2 column 2 		this is
row 2 column 3

Changing the CELLPADDING to 10, our original table looks like:
upper left col header 1 col header 2 col header 3
row header 1 this is
row 1 column 1 		this is
row 1 column 2 		this is
row 1 column 3
row header 2 this is
row 2 column 1 		this is
row 2 column 2 		this is
row 2 column 3

Here is a table with both the CELLPADDING and CELLSPACING set to zero.
upper left col header 1 col header 2 col header 3
row header 1 this is
row 1 column 1 		this is
row 1 column 2 		this is
row 1 column 3
row header 2 this is
row 2 column 1 		this is
row 2 column 2 		this is
row 2 column 3

The table tag in the previous example is:

<TABLE border cellspacing=0 cellpadding=0>

Table Background Color

The entire background color of a table can be set by using the BGCOLOR= option within the table tag.

A table tag of;

<TABLE border bgcolor=white>
produces:
upper left col header 1 col header 2 col header 3
row header 1 this is
row 1 column 1 		this is
row 1 column 2 		this is
row 1 column 3
row header 2 this is
row 2 column 1 		this is
row 2 column 2 		this is
row 2 column 3
The rules on colors are the same as those for text colors.

Setting the border=0 in the above example produces:
upper left col header 1 col header 2 col header 3
row header 1 this is
row 1 column 1 		this is
row 1 column 2 		this is
row 1 column 3
row header 2 this is
row 2 column 1 		this is
row 2 column 2 		this is
row 2 column 3
As you can see, the background still shows through still giving the effect of cells. This distance is the default cellspacing distance.

Setting the cellpadding=10 (producing some spacing for the text) and the cellspacing=0 produces:
upper left col header 1 col header 2 col header 3
row header 1 this is
row 1 column 1 		this is
row 1 column 2 		this is
row 1 column 3
row header 2 this is
row 2 column 1 		this is
row 2 column 2 		this is
row 2 column 3

By setting the width to be 100% and changing the bgcolor to silver, one gets a horizontal bar across the page.
upper left col header 1 col header 2 col header 3
row header 1 this is
row 1 column 1 		this is
row 1 column 2 		this is
row 1 column 3
row header 2 this is
row 2 column 1 		this is
row 2 column 2 		this is
row 2 column 3

Onto Tables Part II