America's Town Square
HTML Table Tutorial

 HTML 3.0 Table Tutorial 
by Urb LeJeune
LeJeune@usats.com

Caution

 This is Netscape Country  

  I started this tutorial while writing the book, Netscape & HTML EXplorer. Tables are included in the proposed HTML 3.0 standards. Since HTML 3.0, or HTML+ as it's frequently called, is a proposal and not a standard, tables are not widely implemented by Web browsers. However, Netscape, Internet Explorer, and Mosaic support tables, albeit with major differences. Netscape and Internet Explorer have also added their own enhancements. Surprise, surprise.

  Many Netscape enhancements are employed in this tutorial. Be aware the enhancements may display differently on different browsers, not display at all on some browsers, and actually break some browsers. I have also made the background Netscape's default gray since table borders do not display well on white or colored backgrounds.

  Speaking of the Netscape & HTML EXplorer, you might want to take a look at the capsule review, or the Table of Contents. If you're at all like me you will also be interested in the book's money back guarantee and discount offer.

Tutorial Table of Contents

  1. Tutorial and Conventions
  2. A Simple 2 Row by 3 Column Table
  3. A 2 Row by 3 Column Table With
    Special Effects
  4. Spanning Rows
  5. Spanning Columns
  1. Spanning Columns
  2. Simple Top and Side Headers
  3. Online references
  4. Online Examples
  5. Urb LeJeune, Your Friendly
    Table Tutorial Tour Guide

Table Tutorial

Introduction and Conventions

Disk File: TABLE01.HTM
  Tables are interesting critters. Many people prefer information presented in the two dimensional linear style offered by tables. It's not an accident of time that a spread-sheet program provided the catalyst for the desktop computer revolution -- desktop revolting some might say.

On the other hand, highly creative people -- like most Mac users -- don't like tabular displays of data, preferring presentations with more pizzazz. What ever your bag, the addition of tables to the proposed HTML 3.0 standard creates display options previously unavailable for your Web documents.

Both Netscape and Mosaic have implemented table constructs in their latest beta versions. This tutorial will review table implementations for those browsers. Keep in mind, HTML 3.0 is a proposal, not a standard. Syntactic structure may change in the final standard. In addition, Netscape has added enhancements to the proposed standards -- not exactly page one news.

Tutorial Conventions

  A few simple conventions. Tag labels in the examples will be all upper case. Anything within a table shown in either upper or mixed case is something you will construct. All tutorial tables, with the exception of the first, will show the actual table, immediately followed by the HTML construction which produced the table.

Let the Tutorial Begin

  Let's start this tutorial with -- you guessed it, a table. The following is a tabular listing of basic table tags.

HTML Table Tags
Starting
Tag		Ending
Tag
Tag Description
<TABLE> </TABLE> Containers for borderless table.
<TABLE BORDER> </TABLE> Tag pair for table with borders.
<TR> </TR> Establishes a row within a table.
<TD> </TD> Defines a cell within a table.
<TH> </TH> Centers a heading at a table's top or side.
<CAPTION> </CAPTION> Places a title at the top of the table.

The title, "HTML Table Tags " is a part of the table, as is everything else contained within the <TABLE> ... </TABLE> tags. The data contents of each cell is included between the <TD> ... </TD> pair. Only textual data has been used in table shown above. As we will see shortly, graphics can be used to create special effects. The <TR> ... </TR> pair defines rows. The <TH> ... </TH> tag pair defines heading elements while the <CAPTION> ... </CAPTION> centers a top title.

Normal textual tags, such as <BR>, <P>, or the <B>..</B> pair may be used within the individual cells. Each table cell may be looked upon as its own HTML document opening up many areas for creative expression.

Go to Table of Contents or go to Top of Table Tutorial

The World's Simplest Table

  Conceptually, an empty table is the simplest table. However, an empty table is not very useful it just sits there and does nothing. The simplest practical table would be a one by one structure and is show below:
Row One - Column One

Example 2 - A borderless one by one table

The HTML code producing Example 2 is: 
<TABLE>
  <TD>Row One - Column One</TD>
</TABLE>
Typically, a table with a border is cosmetically more appealing. The table shown in Example 2, with a border, is shown below.
Row One - Column One

Example 3 - A one by one table with border

The HTML code producing Example 3 is: 
<TABLE BORDER>
  <TD>Row One - Column One</TD>
</TABLE>

Go to Table of Contents or go to Top of Table Tutorial

Table Example Two

Demonstrating an Almost "plain vanilla" 2 Row by 3 Column Table
and A Not So "plain vanilla" 2 Row by 3 Column Table

Disk File: TABLE02.HTM
An Almost "Plain Vanilla"
2 Row by 3 Column Table
Row 1 Column 1 Row 1 Column 2 Row 1 Column 3
Row 2 Column 1 Row 2 Column 2 Row 2 Column 3

Centered Not So "Plain Vanilla" 2 Row by 3 Column Table
BORDER=5 and CELLSPACING=20 and CELLPADING=20
Row 1 Column 1 Row 1 Column 2 Row 1 Column 3
Row 2 Column 1 Row 2 Column 2 Row 2 Column 3

The HTML producing the above table is:

<TABLE BORDER=10>
      <CAPTION ALIGN=TOP><B>
         A Not So "Plain Vanilla"<BR> 2 Row by 3 Column Table
      </B></CAPTION>
  <TR>
    <TD>Row 1 Column 1</TD><TD>Row 1 Column 2</TD><TD>Row 1 Column 3</TD>
  </TR>
  <TR>
    <TD>Row 2 Column 1</TD><TD>Row 2 Column 2</TD><TD>Row 2 Column 3</TD>
  </TR>
</TABLE>

Go to Table of Contents or go to Top of Table Tutorial

Table Example Three

Demonstrating A 2 Row by 3 Column Table With Special Effects

Disk File: TABLE03.HTM
This is Emphasis

Heading 3

 Unformatted text
Bold
with
three lines

This table demonstrates text formatting within cells. The center cell in the second row is a null cell produced with an empty entry. The cell at the lower right corner contains a GIF image. The following is the HTML used to produce this table. 

<TABLE BORDER>
  <TR>
    <TD><EM>This is Emphasis</EM></TD>
    <TD><H3>Heading 3</H3></TD>
    <TD>Unformatted Text;</TD>
  </TR>

  <TR>
    <TD><B>Bold<BR>with<BR>three lines</B></TD>
    <TD></TD>
    <TD><IMG SRC="home.gif"></TD>
  </TR>
</TABLE>

The Same 2 Row by 3 Column Table with Special Formatting Effects
and Vertical and Horizontal Alignment and Width Parameters.

This is Emphasis

Heading 3

 Unformatted text
Bold
with
three lines		 >

The upper left corner is specified as:
<TD WIDTH=50%><EM>This is Emphasis</EM></TD>
The lower left corner is:
<TD ALIGN=CENTER><B>Bold<BR>with<BR>three lines </B></TD>
The lower right corner is specified as:
<TD ALIGN=RIGHT VALIGN=BOTTOM><IMG SRC=" home.gif"></TD>

Go to Table of Contents or go to Top of Table Tutorial

Table Example Four -- Spanning a Row

Table Example 4: Demonstrating a ROWSPAN

Disk File: TABLE04.HTM
Row 1 Col 1 ROWSPAN=3
Element 1,2		 Row 1 Col 3
Row 2 Col 1ROWSPAN=2
Element 2,3
Row 3 Col 1

    This table demonstrates the ROWSPAN parameter. It takes the form:

     <TD ROWSPAN=integer>data-element</TD>

Where integer is the number of additional rows to span and data-element is text or an inline image.

<TABLE BORDER>
  <TR>
    <TD>Row 1 Col 1</TD>
    <TD>ROWSPAN=3>ROWSPAN=3<BR>Element 1,2</TD>
    <TD>Row 1 Col 3</TD>
  </TR>
	
  <TR>
    <TD>Row 2 Col 1</TD>
    <!-- There is no entry for Row 2 Col 2 -->
    <TD ROWSPAN=2>ROWSPAN=2<BR>Element 2,3</TD>
  </TR>
	
  <TR>
    <TD>Row 3 Col 1</TD>
    <!-- There is no entry for Row 3 Col 2 -->
    <!-- There is no entry for Row 3 Col 3 -->
  </TR>
</TABLE>

Go to Table of Contents or go to Top of Table Tutorial

Table Example Five
Spanning a Column

Table Example 5: Demonstrating a COLSPAN

Disk File: TABLE05.HTM

Demonstration of COLSPAN

Row 1 Col 1 COLSPAN=2
Element 1,2
Urb's Home Page
COLSPAN=3 - Element 2,1
Row 3 Col 1Row 3 Col 2Row 3 Col 3 
<TABLE BORDER>
  <TR>
    <TD>Row 1 Col 1</TD>
    <TD COLSPAN=2>COLSPAN=2<BR>Element 1,2</TD>
  </TR>

  <TR>
    <TD COLSPAN=3><A HREF=http://www.charm.net/~lejeune>
      <IMG ALIGN=CENTER SRC=home.gif>
      Urb's Home Page</A><BR> COLSPAN=3 - Element 2,1</TD>
  </TR>
</TABLE>

Go to Table of Contents or go to Top of Table Tutorial

Simple Top and Side Headers - Under Construction

Simple Top and Side Headings

Table Example 6: Demonstration of Headings

Disk File: TABLE06.HTM
       Top and side headers are titles which appear centered within their respective cells one and take the form:

       <TH>title</TH>

This is the table's caption. In bold
MondayTuesdayWednesday
Row 1 Column 1Row 1 Column 2Row 1 Column 3
Row 2 Column 1Row 2 Column 2Row 2 Column 3 
<TABLE BORDER>
<CAPTION>This is the table's caption. <B>In bold</B></CAPTION>
  <TR>
    <TH>Monday</TH><TH>Tuesday</TH><TH>Wednesday</TH>
  </TR>
  
  <TR>
    <TD>Row 1 Column 1</TD><TD>Row 1 Column 2</TD><TD>Row 1 Column 3</TD>
  </TR>
  
  <TR>
    <TD>Row 2 Column 1</TD><TD>Row 2 Column 2</TD><TD>Row 2 Column 3</TD>
  </TR>
</TABLE>

An Example of Both Row and Column Headings

BORDER=5 WIDTH=100% CELLPADDING=10 CELLSPACING=10
MondayTuesdayWednesday
Week One Row 1 Column 1Row 1 Column 2 Row 1 Column 3
Week Two Row 2 Column 1Row 2 Column 2 Row 2 Column 3 
<TABLE BORDER>
  <TR>
    <TH></TH> <! This is a null cell>
    <TH>Monday</TH><TH>Tuesday</TH><TH>Wednesday</TH>
  </TR>
  
  <TR>
    <TH>Week One</TH>
    <TD>Row 1 Column 1</TD><TD>Row 1 Column 2</TD><TD>Row 1 Column 3</TD>
  </TR>
  
  <TR>
    <TH>Week Two</TH>
    <TD>Row 2 Column 1</TD><TD>Row 2 Column 2</TD><TD>Row 2 Column 3</TD>
    <TD>Row 2 Column 3</TD>
  </TR>
</TABLE>

Go to Table of Contents or go to Top of Table Tutorial

On Line References and Background Material

Thanks to Steve Febbraro, stefeb@oasis.ot.com, for supplying many of these references

Example of Interesting Table Applications

To view the HTML source, drop View menu and select Source

  • Browser Watch. by Dave J. Garaffa, dgaraffa@iworld.com Highly informative page with great use of a tables.
  • Browser Watch What's New Table.
  • Welcome to CyberCat Technology GIFs and Anchors in table.
  • John Makulowich's tables and frames on the same page are also an excellent source of information.
  • Ed Gregory's WebSearch95. Great use of tables and border color to perform queries on a variety of search engines.
  • Urb LeJeune's FTP Tutorial. Tables with changing border color.
  • Alexander Chislenko's Great Thinkers and Visionaries An outstanding page with creative use of nested tables.

    Go to Table of Contents or go to Top of Table Tutorial

    Author of this tutorial

      This tutorial is -- hopefully -- an ongoing work. If you have any ideas or corrections it's contents or suggestion for enhancements I'd really appreciate hearing from you. You can reach me at LeJeune@usATS.Net

    Please subscribe to the free ATS Newsletter so we can keep you
    up to date with our "free stuff", special offers, and other goodies.
    We will not supply your e-mail address to anyone else.
    Your e-mail address:

    Back to the ATS Home Page

    Please sign our self-updating guestbook

    How about some free stuff from ATS?

    Please send our crotchety Webmaster some mail.
    Copyright ©1995-98 America's Town Square
    15 Hunter Drive
    Tuckerton, NJ 08087
    (609) 294-0320 [an error occurred while processing this directive]