Web Programming at ITM

Welcome to ITM Web100 Training Program

Lesson 4

Tables and Frames

Time to get started with tables.

Basic Tables

Well, as I know you know by now, basic HTML does not actually give you much control over where things go on your page.
However with the introduction of HTML 3.2 came the first really powerful tools for HTML layout: Tables.
Tables give you the ability to position elements in your page with much greater accuracy.
Of course, the original intent of HTML Tables was to provide a way to present tabular data in rows and columns.
Thus the first tables looked something like the following:

Column One Header	Column Two Header
Row One/Column One	Row One/Column Two
Row Two/Column One	Row Two/Column Two

A table is composed of several tags that are outlined in the table below:

OPENING/CLOSING TAG	DESCRIPTION
<TABLE>...</TABLE>	Specifies an HTML table. (By default the table will have no borders)
<TR>...</TR>	Specifies a Table Row
<TH>...</TH>	Specifies a Table Header Cell
<TD>...</TD>	Specifies a Table Data Cell

Thus, the following code would create the very basic table that was shown previously:

<HTML>
<HEAD>
<TITLE>Table Example</TITLE>
</HEAD>
<BODY>
<TABLE>

<TR>
<TH>Column One Header</TH>
<TH>Column Two Header</TH>
</TR>

<TR>
<TD>Row One/Column One</TD>
<TD>Row One/Column Two</TD>
</TR>

<TR>
<TD>Row Two/Column One</TD>
<TD>Row Two/Column Two</TD>
</TR>
</TABLE>
</BODY>
</HTML>

One thing to keep in mind about tables is that you may include any Body HTML (i.e. markup that can go in the Body tag) in a table cell, including tables. Thus you could make the contents of a cell bold with the following table cell definition:

<TD><B>This text is bold</B></TD>

Table Attributes

As you can see, the basic table is extremely simple.
Fortunately, the <TABLE> tag comes with several attributes to make it look nicer.
The attributes are shown in the table below:

ATTRIBUTE	DESCRIPTION
ALIGN	Specifies the position of the table with respect to the document. This works the same as the ALIGN parameter for images. Valid values include LEFT, CENTER and RIGHT.
BGCOLOR	Colors the table background just as it would when used with the <BODY> tag.
BORDER	Specifies the pixel width of the border that divides table cells and the table itself. This table is set to BORDER = "0".
CELLPADDING	Specifies the amount of space between the borders of a table and the actual data in the cell.
CELLSPACING	Specifies the amount of space inserted between table cells.
HEIGHT	Specifies the height of the table in absolute pixels or as a percentage of the available space.
WIDTH	Specifies the width of the table in absolute pixels or as a percentage of the available space

Tables by Example

Let's take a look at a few examples....
Here is a basic table with no border.

Column One Header	Column Two Header
Row One/Column One	Row One/Column Two
Row Two/Column One	Row Two/Column Two

Here is the code for that table:

<TABLE>

<TR>
<TH>Column One Header</TH>
<TH>Column Two Header</TH>
</TR>

<TR>
<TD>Row One/Column One</TD>
<TD>Row One/Column Two</TD>
</TR>

<TR>
<TD>Row Two/Column One</TD>
<TD>Row Two/Column Two</TD>
</TR>
</TABLE>

Here is the same table with a border of 4.

Column One Header	Column Two Header
Row One/Column One	Row One/Column Two
Row Two/Column One	Row Two/Column Two

Here is the code for that table:

<TABLE BORDER = "4">

Here is the same table with a border of 4 and a CELLPADDING of 10.

Column One Header	Column Two Header
Row One/Column One	Row One/Column Two
Row Two/Column One	Row Two/Column Two

Here is the code for that table:

<TABLE BORDER = "4" CELLPADDING = "10">

Here is the same table with a border of 4, a CELLPADDING of 10, and a CELLSPACING of 10.

Column One Header	Column Two Header
Row One/Column One	Row One/Column Two
Row Two/Column One	Row Two/Column Two

Here is the code for that table:

<TABLE BORDER = "4" CELLPADDING = "10"
            CELLSPACING = "10">

Here is the same table with a border of 4 and colored cells.

Column One Header	Column Two Header
Row One/Column One	Row One/Column Two
Row Two/Column One	Row Two/Column Two

Here is the code for that table:

<TABLE BORDER = "4" BGCOLOR = "YELLOW">

Here is the same table with a width of 100.

Column One Header	Column Two Header
Row One/Column One	Row One/Column Two
Row Two/Column One	Row Two/Column Two

Here is the code for that table:

<TABLE BORDER = "4" WIDTH = "100">

Here is the same table with a border of 4 and a pixel width of 80%.

Column One Header	Column Two Header
Row One/Column One	Row One/Column Two
Row Two/Column One	Row Two/Column Two

Here is the code for that table:

<TABLE BORDER = "4" WIDTH = "80%">

More Info about Tables

Lesson 4