Interactive HTML Tutorial


Lesson 6 - Tables


This lesson introduces the concept of tables as they are used in HTML documents.


Tables - An Introduction

Tables are used two ways in HTML: to display charts (what the designers of the <TABLE> tag originally intended it for); and as a means of controlling the layout of information on a web page. Although creating tables can be challenging, because readers of this tutorial will only be modifying information on existing web pages, all that is required is a basic understanding of the key elements and attributes which make up a table.

Explanation of Table Tags

<TABLE>...</TABLE>   Encloses the table. The TABLE tag has the following variable attributes:

"BORDER=" Specifies the thickness of the border around the table. When using a table to control a page's layout, the border is usually set to zero.

"CELLPADDING=" Defines spacing within cells.

"CELLSPACING=" Defines spacing between cells.

"WIDTH=" Specifies the width of a table; typically given as a percentage of the total browser window space available.

<TR>...</TR>   Specifies a table row within a table. You may define default attributes for the entire row. These are:

"ALIGN=" (either LEFT, CENTER, or RIGHT)

"VALIGN=" (either TOP, MIDDLE, or BOTTOM)

"BGCOLOR=" Sets the background color of a table row (see
Lesson 1 for more information on choosing colours).

"WIDTH=" Specifies the width of a row; typically given as a percentage of the total space available.

<TD>...</TD>   Specifies a table data within the table row. The attributes for table data are:

"ALIGN=" (either LEFT, CENTER, or RIGHT)

"VALIGN=" (either TOP, MIDDLE, or BOTTOM)

"BGCOLOR=" Sets the background color of the TABLE cell (see Lesson 1 for more information on choosing colours).

"WIDTH=" Specifies the width of a table row. Typically given as a percentage of the available space.

Explanation of Table Structure

Just as HTML documents have a basic structure, so too do tables:

<TABLE>

<TR>

<TD>This is the table data cell #1</TD>
<TD>This is the table data cell #2</TD>

</TR>

</TABLE>

Below are samples of the various <TABLE> tags and their respective browser display:

HTML Code   Browser Display
<TABLE BORDER=1 CELLPADDING=2 CELLSPACING=2>

<TR>

<TD>This is the table data cell #1</TD>
<TD>This is the table data cell #2</TD>

</TR>

</TABLE>
 
This is the table data cell #1 This is the table data cell #2

Two further notes about the creation of tables: Firstly, tables are often "nested" within each other as a means precisely controlling the layout of information on a page. Secondly, in order to make a table cell appear empty, some form of place holder must be inserted, be it the ASCII code for a blank space ( ) or perhaps a GIF consisting of a single pixel the same colour as the cell's background.



Try it out!

In the box below, type the following HTML code, then click the "View" button. The HTML document you have written will be displayed in your browser. You may wish to change some of the tags and/or attributes to experiment with some of the different items discussed in this lesson.

Try typing this:

<HTML>

<HEAD>
<TITLE>TABLE Manners</TITLE>
</HEAD>

<BODY BGCOLOR="#800080" TEXT="#FFFFFF">

TABLE Manners

<TABLE WIDTH=80% BORDER=1 CELLPADDING=2 CELLSPACING=2>
<TR>
<TD>Rule # 1</TD>
<TD>Always make sure you write all TABLE tags in the right order.</TD>
</TR>
<TR>
<TD>Rule # 2</TD>
<TD>It is inappropriate to nest too often.</TD>
</TR>
<TR>
<TD>Rule # 3</TD>
<TD>Sit up straight and do not put your elbows on the table.</TD>
</TR>
</TABLE>

</BODY>

</HTML>


(To return to this page after viewing click "Back" on your browser.)



 Lesson 5      Lesson 7 




Index | Lesson 1 | Lesson 2 | Lesson 3 | Lesson 4 | Lesson 5 | Lesson 6 | Lesson 7 | Lesson 8
HTML Reference Guide

Copyright Alternet Web Design