Developer Tips

This week in Web Developer Tips.
HEADERS, ALIGN/VALIGN and NESTED TABLES.
by Rick Harden:

In the following I will give you a few examples of how to script different types of tables. Tables are becoming the most popular way to lay out your webpages. Today most web browsers have no problem reading tables.

Column Headers:

Below is a table that uses column headers.

<TABLE BORDER>
<TR>
<TH>MEATS</TH>
<TH>VEGETABLES</TH>
<TH>DAIRY</TH>
</TR>
<TR>
<TD>BEEF</TD>
<TD>CARROTS</TD>
<TD>MILK</TD>
</TR>
<TR>
<TD>FISH</TD>
<TD>BEETS</TD>
<TD>CHEESE</TD>
</TR>
</TABLE>

Here is an example of the above code.

MEAT	VEGETABLES	DAIRY
BEEF	CARROTS	MILK
FISH	BEETS	CHEESE

ALIGN/VALIGN:

In this table we will use the align/valign attributes.

<TABLE BORDER BGCOLOR="gray">
<TR>
<TD><TH ROWSPAN="2"></TH>
<TH COLSPAN="3">Food Groups</TH></TD>
</TR>
<TR>
<TD></TD><TH>MEAT</TH>
<TH>VEGETABLES</TH>
<TH>DAIRY</TH></TD>
</TR>
<TR>
<TH ROWSPAN="2" VALIGN="top">Products</TH>
<TH>AMOUNT</TH>
<TD ALIGN="center">X</TD>
<TD ALIGN="center">X</TD>
<TD ALIGN="center">X</TD>
</TR>
<TR>
<TH>VALUE</TH>
<TD ALIGN="center">X</TD>
<TD ALIGN="center">X</TD>
<TD ALIGN="center">X</TD>
</TR>
</TABLE>

Here is an example of the above code.

		Food Groups

MEAT

VEGETABLES

DAIRY

Products

AMOUNT

VALUE

Nested Tables:

In this table we will nest a simple table inside another table.

<TABLE BORDER>
<TR>
<TD ROWSPAN=2>Info cell spans two rows
<TABLE BORDER>
<TR>
<TD>Info Cell 1</TD>
<TD>Info Cell 2</TD></TR>
<TR>
<TD>Infor cell 3</TD>
<TD>Infor cell 4</TD>
</TR>
</TABLE>
</TD>
<TD>These Cells</TD><TD>would</TD>
</TR>
<TR>
<TD>contain</TD><TD>other info</TD>
</TR>
</TABLE>

Here is an example of the above code.

Info cell spans two rows

Info Cell 1	Info Cell 2
Infor cell 3	Infor cell 4

These Cells

would

contain

other info