Tables are one of the most useful tools for controlling the layout of a web page. In a web page a table does not have to be a data table, instead it is a way to organize page layout. You can use it for traditional data tables, but it is much more flexible than this. Be warned, however, that the apperance of a table can vary dramatically depending upon the viewers browser and monitor settings. I caution you not to try and specify an exacting page layout that makes everything perfect on your computer. If you do, it will probably come out terribly on another. Give up some of the control and let the browser make some of the decisions. It may not look perfect, but it will usually be pretty good.
- Table Tag. This tag marks the beginning and the end of the table. This
table is 60% the width of the browser window each cell will have a border
(these specifications are optional).
<TABLE WIDTH=60% BORDER></TABLE>
- Caption. This tag marks the beginning and end of a caption at the top of
<CAPTION ALIGN=top>Table Caption</CAPTION>
- Row. This tag marks the beginning and end of each row in the table.
- Header. This tag is used for column or row headers. Text in the header is
centered in the cell and displayed in a bold font.
- Data. The data tag is used to mark the start and stop of each cell in the
table. The data may be anything that can be displayed in a browser.
Including text, images, and links.
This table is created using the HTML shown below.
|Top Col 1
||Top Col 2
||Top Col 3
<TABLE WIDTH=60% ALIGN=center BORDER>
<TH>Top Col 1</TH>
<TH>Top Col 2</TH>
<TH>Top Col 3</TH>
Useful Features for the Data Tag. Add these elements to a data tag as needed.
- ALIGN= setting .
- setting specifies how information is aligned
within the cell. Options include left, right, center, justify. Default is left.
- setting specifies the vertical alignment of
information within a cell. Options include top, middle, bottom or baseline.
- # specifies how many columns the data cell spans.
A data cell with COLSPAN=2 would be two columns wide.
- # specifies how many rows the data cell spans. A
data cell with ROWSPAN=2 would be two rows high..
- Specifies the width of the cell. This may be in pixels (ie: 150) or in percentages (ie: 20%). Pixels works well for images but the actual size of the cell will depend upon the resolution and size of the monitor. Percentages work well for text since the size will be proportional to the screen size.
- setting may be the name of a color or a
hexadecimal number in the format rrggbb. Where rr specifies the amount
of red, gg specifies the amount of green, and bb specifies the amount of
blue. Selecting colors is a bit difficult and it is easiest to do with a program
that generates the color codes.
Generating and editing tables
- Netscape will generate tables. You specify the number of columns
and rows. Then the outline of the table is generated and you can enter the
data for each cell. You may add rows or columns easily and have good
control over format and style for each cell, row, or column. Editing is much like editing a table in Word. Use the drop down menues or right click.
- HTML Editors usually include a table generator. You specify format features and enter data in a set of cells. Then the program generates all the table codes. Additional editing is done by hand. This may be a bit tedious, but it
provides complete control. These can often input an ASCII delimited file to quickly build data tables.
- Word processors that export HTML are capable of generating tables. However, they do
not provide much control of the layout. If you like the format they produce, they are very easy to use. In general they over specify the details of the table and produce HTML that only looks good on a specific browser and computer combination.
- HTML 4.1 Specifications, Tables. These are the standards for Tables based upon HTML 4.1. It details all the tags and variables that may be used. Other tags may be browser specific and may not display properly on all browsers.
- Beginners Guide to HTML This is a great place to start. Highly recommended reading for anyone starting to write HTML.
- Composing Good HTML This is a more advanced and detailed discussion about writing HTML documents. This is highly recommended for anyone who has started writing HTML and they are ready for some more detail and to find out what they are doing that is not so good.
This page is maintained by
Scott Van Bramer
Department of Chemistry
Chester, PA 19013
Please send any comments, corrections, or suggestions to
This page has been accessed
times since 1/1/97.
Last Updated Tuesday, September 10, 2002 11:06:16 AM