Tables

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.


Basic Tags

  1. 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).
  2. <TABLE WIDTH=60% BORDER></TABLE>

  3. Caption. This tag marks the beginning and end of a caption at the top of the table.
  4. <CAPTION ALIGN=top>Table Caption</CAPTION>

  5. Row. This tag marks the beginning and end of each row in the table.
  6. <TR></TR>

  7. 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.
  8. <TH></TH>

  9. 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.
  10. <TD></TD>


Example

This table is created using the HTML shown below.

Table Caption
Top Col 1 Top Col 2 Top Col 3
data 1a data 2a data 3a
data 1b data 2b data 3b
data 1c data 2c data 3c

<TABLE WIDTH=60% ALIGN=center BORDER>
<CAPTION ALIGN=top>
Table Caption</CAPTION>
<TR>
<TH>Top Col 1</TH>
<TH>Top Col 2</TH>
<TH>Top Col 3</TH>
</TR>
<TR>
<TD>data 1a</TD>
<TD>data 2a</TD>
<TD>data 3a</TD>
</TR>
<TR>
<TD>data 1b</TD>
<TD>data 2b</TD>
<TD>data 3b</TD>
</TR>
<TR>
<TD>data 1c</TD>
<TD>data 2c</TD>
<TD>data 3c</TD>
</TR>
</TABLE>


Features

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.

VALIGN=setting.
setting specifies the vertical alignment of information within a cell. Options include top, middle, bottom or baseline.

COLSPAN=#.
# specifies how many columns the data cell spans. A data cell with COLSPAN=2 would be two columns wide.

ROWSPAN=#.
# specifies how many rows the data cell spans. A data cell with ROWSPAN=2 would be two rows high..

WIDTH=#.
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.

BGCOLOR=setting
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

  1. 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.
  2. 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.
  3. 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.


Additional Information

  1. 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.
  2. Beginners Guide to HTML This is a great place to start. Highly recommended reading for anyone starting to write HTML.

  3. 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
Widener University
Chester, PA 19013

Please send any comments, corrections, or suggestions to svanbram@science.widener.edu.

This page has been accessed times since 1/1/97.
Last Updated Tuesday, September 10, 2002 11:06:16 AM