HTML Tables

Simple Tables

<TABLE></TABLE> and <TR></TR> and <TD></TD>

The Code in This Column...Will Display Like This
<TABLE>
<TR><TD>fruits</TD><TD>vegetables</TD></TR>
<TR><TD>apple</TD><TD>carrot</TD></TR>
<TR><TD>orange</TD><TD>potato</TD></TR>
</TABLE>
fruitsvegetables
applecarrot
orangepotato


Tables with Borders

<TABLE BORDER=n></TABLE>

The Code in This Column...Will Display Like This
<TABLE BORDER=2>
<TR><TD>fruits</TD><TD>vegetables</TD></TR>
<TR><TD>apple</TD><TD>carrot</TD></TR>
<TR><TD>orange</TD><TD>potato</TD></TR>
</TABLE>
fruitsvegetables
applecarrot
orangepotato


Tables with Headers

<TH></TH>

The Code in This Column...Will Display Like This
<TABLE BORDER=2>
<TR><TH>fruits</TH><TH>vegetables</TH></TR>
<TR><TD>apple</TD><TD>carrot</TD></TR>
<TR><TD>orange</TD><TD>potato</TD></TR>
</TABLE>
fruitsvegetables
applecarrot
orangepotato
<TABLE BORDER=2>
<TR><TH>fruits</TH><TD>vegetables</TD></TR>
<TR><TH>apple</TH><TD>carrot</TD></TR>
<TR><TH>orange</TH><TD>potato</TD></TR>
</TABLE>
fruitsvegetables
applecarrot
orangepotato

Data Alignment

<TR ALIGN=middle, left or right></TR>

The Code in This Column...Will Display Like This
<TABLE BORDER=2>
<TR ALIGN=middle>
  <TH>fruits</TH><TH>vegetables</TH>
</TR>
<TR ALIGN=middle>
  <TD>apple</TD><TD>carrot</TD>
</TR>
<TR ALIGN=middle>
  <TD>orange</TD><TD>potato</TD>
</TR>
</TABLE>
fruitsvegetables
applecarrot
orangepotato

There are a lot more options than this for formatting Tables which utilize Netscape Extensions. If you need more flexibility you can check it out.


[ Home | Basic Tags | Lists | Images | Links | Tables | Extensions | Lab Exercise]