HTML Table Tutorial

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

Table Tutorial

Introduction and Conventions

- - 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.

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

 
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

 

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

 

Row 1 Col 1

ROWSPAN=3
Element 1,2

Row 1 Col 3

Row 2 Col 1

ROWSPAN=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

 

Demonstration of COLSPAN

Row 1 Col 1

COLSPAN=2
Element 1,2


COLSPAN=3 - Element 2,1

Row 3 Col 1

Row 3 Col 2

Row 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>&ltA HREF=http://www.charm.net/~bgarfolo>
       <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

 

       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

Monday

Tuesday

Wednesday

Row 1 Column 1

Row 1 Column 2

Row 1 Column 3

Row 2 Column 1

Row 2 Column 2

Row 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

Monday

Tuesday

Wednesday

Week One

Row 1 Column 1

Row 1 Column 2

Row 1 Column 3

Week Two

Row 2 Column 1

Row 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