Tables

So far we have looked at how we format a Web page. We have not looked at how we may position things within a web page.

Tables provide an simple way to organise a web page.

The <TABLE> .....</TABLE> tag defines a table environment.

Within the Table data is organised as a sequence of rows with <TR> .... </TR> tag.

Data in each row can be defied as being:

Header

-- defined by <TH> .... </TH>. Usually printed in larger emphasised font

Data

-- defined by <TD> .... </TD>. The main elements of table can be any HTML tag or text.

Each table element (header or data) in a row is called a cell.

Therefore to create a simple table we can do:

<TABLE >

<TR>
	<TH><BR></TH>
	<TH>Red</TH>
	<TH>Yellow</TH>
	<TH>Blue</TH>
</TR>
<TR>
	<TH>Red</TH> 
	<TD>Red</TD>
	<TD>Orange</TD>
	<TD>Purple</TD>
</TR>
<TR>
	<TH>Yellow</TH> 
	<TD>Orange</TD>
	<TD>Yellow</TD>
	<TD>Green</TD>
</TR>
<TR>
	<TH>Blue</TH> 
	<TD>Purple</TD>
	<TD>Green</TD>
	<TD>Blue</TD>
</TR>
</TABLE>

which looks like this:

	Red	Yellow	Blue
Red	Red	Orange	Purple
Yellow	Orange	Yellow	Green
Blue	Purple	Green	Blue

We might want to add things to a table:

• A Caption is frequently useful to give context to the table within a Web page.

  The <CAPTION>...</CAPTION> tag can be used to supply this.

• It may be useful to put a border to separate individual cells. The BORDER attribute of the TABLE tag can be set via <TABLE BORDER> to give this effect.
• Borderless tables are a useful way of organising a web page.
• Bordered tables are a useful way of presenting information in an easy to read table.

So to return to the above example and give a Caption and a Border to the Table we can do:

<TABLE BORDER>
<CAPTION><B>Table 1.1:</B> HTML Table 
  with border and caption</CAPTION>
<TR>
	<TH><BR></TH>
	<TH>Red</TH>
	<TH>Yellow</TH>
	<TH>Blue</TH>
</TR>
<TR>
	<TH>Red</TH> 
	<TD>Red</TD>
	<TD>Orange</TD>
	<TD>Purple</TD>
</TR>
<TR>
	<TH>Yellow</TH> 
	<TD>Orange</TD>
	<TD>Yellow</TD>
	<TD>Green</TD>
</TR>
<TR>
	<TH>Blue</TH> 
	<TD>Purple</TD>
	<TD>Green</TD>
	<TD>Blue</TD>
</TR>
</TABLE>

which looks like this:

Table 1.1: HTML Table with border and caption

	Red	Yellow	Blue
Red	Red	Orange	Purple
Yellow	Orange	Yellow	Green
Blue	Purple	Green	Blue

Table Elements can be aligned horizontally and vertically by setting the respective ALIGN or VALIGN attributes of the TD or TH tags:

Alignment Options

Horizontal Alignment
Left	Center	Right
Vertical Alignment
Top	Center	Bottom

The HTML to produce this is:

<TABLE BORDER>
<CAPTION>Alignment Options
</CAPTION>
<TR ALIGN=CENTER>
	<TH COLSPAN=3>Horizontal 
     Alignment</TH>
</TR>
<TR>
	<TD ALIGN=LEFT>&nbsp;<BR>
	Left&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;
	<BR>	&nbsp;</TD>
	<TD ALIGN=Center>
	&nbsp;<BR>&nbsp;&nbsp;
&nbsp;&nbsp;Center&nbsp;
&nbsp;&nbsp;&nbsp;
	<BR>&nbsp;</TD>
	<TD ALIGN=RIGHT>
	&nbsp;<BR>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;
&nbsp;Right
	<BR>&nbsp;</TD>
</TR>
<TR ALIGN=CENTER>
<TH COLSPAN=3>Vertical 
    Alignment</TH>
</TR>
<TR ALIGN=CENTER>
	<TD VALIGN=TOP>
	Top<BR>	&nbsp;<BR>&nbsp;</TD>
	<TD VALIGN=MIDDLE>Center</TD>
	<TD VALIGN=BOTTOM>&nbsp;<BR>	
 <BR>&nbsp;
	Bottom
	</TD>
	</TR>
</TABLE>

You do some quite complex table arrangements (View the results and study the HTML source code):

• longrow.html (Long rows)
• car1.html (Multiple spanning of rows/cols)
• cellpad.html (Padding Cells)
• comp4.html (Comples Table arrangement

Further information on tables may be found at:

• http://www.htmlgoodies.com/tbl.html
• Hints on Tables
• Shortcuts for making tables
• A calender example table and maker

Also check the online TABLEMAKER resource which provides an HTML form based interface to produce HTML TABLE source code live via a Perl script.