Formatting Pages with HTML Tables

by Donald W. Hyatt

The Basic Table Tags

The TABLE tags in HTML are not only very useful for displaying data, but also for helping for formatting a web page. Essentially, the tags allow a web designer to specify where items are to be placed in the various rows or columns of a table, thus giving some control over relative positions on that page.

First, lets take a look at some of the basic tags related to tables:
Opening Tag
Closing Tag
<TABLE> Start of a Table       </TABLE> End the Table
<TR> Start of a Row in a Table       </TR> End of a Row
<TD> Start of a Table Data Cell       </TD> End the Data Cell
<TH> Start of a Table Header Cell       </TH> End the Header Cell

Table Tag Modifiers

There are a number of modifications that can be included within the table tags to specify parameters or provide additional functionality. Some of them are:

BORDER = n Existence and size of a border around table cells.
WIDTH = n Width of the Table or Data Cell
CELLPADDING = n Amount of space around data in a cell. (Default is 1)
CELLSPACING = n Amount of space between cells. (Default is 2)
COLSPAN = n Number of columns spanned by a data cell.
ROWSPAN = n Number of rows spanned by a data cell.
VALIGN = position Alignment of data within a table cell (TOP, BOTTOM, RIGHT, LEFT)


The following example sets up a table of 4 cells in a 2 by 2 matrix. Each cell contains the word "Cell" and a number.

Example:   table1.html

       <HTML>
       <BODY BGCOLOR = "#FFFFFF">
       <H1> A Simple Table </H1>
       <TABLE>
       <TR>
       <TD> Cell 1  </TD>
       <TD> Cell 2  </TD>
       </TR> <TR>
       <TD> Cell 3  </TD>
       <TD> Cell 4  </TD>
       </TR> </TABLE>
       </BODY>
       </HTML>
See the web page

Trying Some Simple Modifications

  1. The default table is without borders, so to make them visable, include BORDER = 1 inside the table tag.
          <TABLE BORDER = 1>
    See the results

  2. To add padding around cell items, include CELLPADDING = 10 inside the table tag.
          <TABLE BORDER = 1 CELLPADDING = 10>
    See the results

  3. To specify the absolute width of 100 pixels for a cell, include WIDTH = 100 inside one of the Data Cell tags. Widths can also be specified using percents for relative sizes.
          <TD WIDTH = 100>
    See the results

  4. To have a cell span two columns, insert ROWSPAN = 2 inside the Data Cell tag.
          <TD ROWSPAN = 2>
    See the results: With Borders     Without Borders

  5. To align the data at the top of the cell, insert VALIGN = TOP inside the Data Cell tag.
          <TD ROWSPAN = 2 VALIGN = TOP>
    See the results: With Borders     Without Borders

  6. To color the data cell Red, insert BGCOLOR = "#FF0000" inside the Data Cell tag.
          <TD ROWSPAN = 2 VALIGN = TOP BGCOLOR = "#FF0000">
    See the results: With Borders     Without Borders

  7. To add a cell that spans two columns, insert COLSPAN = 2 inside the Data Cell tag.
          <TD COLSPAN = 2 BGCOLOR = "#FF0000">
    See the results: With Borders     Without Borders

Many of the examples here are show with and without borders for comparison. When borders are not used, blocks of text and graphics can be creatively arranged in relative positions on a webpage, thus allowing greater control over the layout. Designers should be warned that they must consider the ramifications of a user changing the font size of the text displayed by the browser and how that might affect the overall format.

Tables can also be nested inside of other tables, allowing for rather complex formats. Be careful though, because tables can be difficult to debug when cell components are improperly matched, or sizes exceed allowable dimensions. Text can sometimes be hidden behind large graphics, and when table tags are incomplete, often nothing will be displayed to the screen at all.

Using Tables to Define a General Website Format

Sometimes, a web designer will spend significant time planning the format of a web page using tables so that all pages will have a consistent look and feel. Let's take a look at a possible model for a web page with the following requirements:
Once this format structure is established, the web author can import blocks of text into the various regions to give each page the same general feel. In the example below, each table region is given a different color to show the parts. To see how the page is designed, just click on "View" and then "Source" on the browser's navigation bar. Seeing how others created web sites you admire is a great way to learn web design.

See the results: With Borders     Without Borders