Creating tables in HTML

Advanced tables

Advanced tables really aren't that hard to make, they just require careful editing of the table controls mentioned before. An example of these can be seen below, this particular one comes from my website at JP Montoya.

 Date  Circuit Qualified Finished
04 Mar 2001 Melbourne, Australia 11th Retired - Engine
18 Mar 2001 Sepang, Malaysia 6th Retired - Spun off
01 Apr 2001 Interlagos, Brazil 4th Retired - Hit by Jos Verstappen
15 Apr 2001 Imola, San Marino 7th Retired - Clutch
29 Apr 2001 Barcelona, Spain 12th 2nd
13 May 2001 A-1 Ring, Austria 2nd Retired - Hydraulics
27 May 2001 Monte Carlo, Monaco 7th Retired - Hit barrier
10 Jun 2001 Montreal, Canada 10th Retired - Hit barrier
24 Jun 2001 Nurburgring, Europe 3rd 2nd
01 Jul 2001 Magny-Cours, France 6th Retired - Engine
15 Jul 2001 Silverstone, Great Britain 8th 4th
29 Jul 2001 Hockenheim, Germany 1st Retired - Engine
19 Aug 2001 Hungaroring, Hungary 8th 8th
02 Sep 2001 Spa Francorchamps, Belgium 1st Retired - Engine
16 Sep 2001 Monza, Italy 1st 1st
30 Sep 2001 Indianapolis, USA 3rd Retired - Hydraulics
14 Oct 2001 Suzuka, Japan 2nd 2nd

This table was easy to construct,but to put all the code here would take to long, so I will concentrate on the entry for Melbourne, Australia.

<TABLE ALIGN="center" BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="80 %">
<TR bgColor=#FFF700>
 <TD><FONT face="arial, helvetica" size=2>04 Mar 2001</FONT></TD>
 <TD><FONT face="arial, helvetica" size=2>Melbourne, Australia</FONT></TD>
 <TD align=middle><FONT face="arial, helvetica" size=2>11th</FONT></TD>
 <TD align=middle><FONT face="arial, helvetica" size=2>Retired - Engine</FONT> </TD>
</TR>
</TABLE>

The code above when interperated by the browser will produce this;

04 Mar 2001 Melbourne, Australia 11th Retired - Engine

Lets go through this code now to clear up any questions about it.

  • Line 1 - Table is aligned in the center, with no border, cellpadding or cellspacing, but with a width of 80%. The table is also not given a background colour at this point.
  • Line 2 - The TR tag starts a new row, and this individual row is given it's own BGCOLOR, to change row colours simply change each TR tag.
  • Line 3 - The FONT tag is used to give the row it's own font and size. There are several listed to ensure the table works on different computers. The </font> is the tag to close the font.
  • Line 5 - This is to make the text in the 3rd cell position itself in the center, without affecting other cells.

You might also like...

Comments

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“In theory, theory and practice are the same. In practice, they're not.”