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
- The default table is without borders, so to make them
visable, include
BORDER = 1
inside the table tag.
<TABLE BORDER = 1>
See the results
- To add padding around cell items, include
CELLPADDING = 10
inside the table tag.
<TABLE BORDER = 1 CELLPADDING = 10>
See the results
- 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
- 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
- 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
- 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
- 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:
- Title centered across the top
- A navigation bar along the left side
- A graphic in the upper right, below the title
- Text in the center, wrapping around the graphic.
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