Chapter 6 - Tables

                                 

[Chapter 5] << [CONTENTS] >> [Chapter 7]

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

• Tables - An Introduction
• Explanation of Table Tags
• Explanation of Table Structure

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.

Share on Google Plus