WesternWashington.Com Gateway to the Pacific Northwest
Send Email To WesternWashington.com
menu 1
menu 2
menu 3
menu 4
Home > 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 X X X
VALUE X X X



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



Click Here
to Refer WesternWashington.Com To Your Friends
Back to Top
Search WesternWashington.Com:

Direct Questions and Comments to: Webmaster
1998 - 2002 WesternWashington.com. All rights reserved. Terms of Use Administrator