Basic Tables

HTML allows the creation of tables, as in the following example:

Row 1, Column 1	Table columns	Row 1, Column 3
Table Rows	This is the image we worked on last week.
A row can span two columns.		Individual cells can be different colors.
A column can span two rows.	To avoid trouble, put something in every cell, even if it's just a non-breaking space. Special code: &nbsp

Although the HTML for tables was originally developed to present tabular information, web designers soon realized that tables could be used to control layout on a page. Examples can be found everywhere, including the majority of my pages.

Ray Shafer Website

Table cells leave space for the index on the left, and space out the basic information on the bottom of each page.

Tables: Design assistance for organizing data and highlighting information

Demonstrates some very advanced techniques for using tables to display information. Not for the faint of heart.

Calendar for October 2000

Designed with the help of a Dreamweaver template. Many table templates are available.

Tutorials on Tables

Take advantage of your texts and online resources to learn table basics.

Elizabeth Castro on Tables

Your textbook's chapter on tables is online as a sample.

HTML Tables Tutorial - 6.

This is a good demonstration page, despite numerous typos.

Creating Killer Websites, Killer Tables

Instructions from David Siegel, who is the advocate for using transparent single-pixel gifs to control browser white space.

HTML Tables Tutorial

It should be noted that the WWW3 organization strongly discourages the use of tables to control layout.

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
W3C Recommendations, Chap 11.

Tips to Prevent Table Problems

1. Map out what you want to do first. It saves headaches later.
2. Always close what you open
3. Avoid nested tables where possible. (Dreamweaver nests routinely, so be sure to tidy the HTML.)
4. As you work on tables, set the border to "1" so that you can see your layout. Change to "0" when everything is correct.

Table Problems

Tables are not always the ideal solutions to layout problems.

• Tables were not included in the earliest versions of HTML, but since about 1998, almost all browsers can handle the basic code.
• Not all browsers support tables in the same way. They specify different defaults for table attributes like borders, cellspacing, text alignment, and so on.
• You do best if you can allow the HTML some flexibility about how it sizes information into each browser. That flexbility was what HTML was designed to do!
• Advice differs on specifying exact pixel dimensions in a table. Castro says YES (to speed up display, p. 166). Others say NO, because you are allowing only one perfect browser width, and chances are good that the viewer will not be using it.
• Generally, specifying cell percentages usually work better. However, in October 2000, Dan's Web Tips: Tables cautions:

  Unfortunately, there is a browser incompatibility in the implementation of this nonstandard attribute; Microsoft Internet Explorer interprets such percentages as the percentage of the entire browser window, while Netscape interprets them as the percentage of the table. This is the reason the standards body chose not to allow this attribute, and a good reason not to use such percentages in most cases, but the one "safe" time to do it is in a table of width 100%, where the two interpretations of cell percentages agree.

• Even if you specify a smaller width, the browser will set the width to fit the widest element in each cell. If you stick a 200-pixel graphic into a cell, its width will be at least 200.
• The specifications are not yet agreed on how to treat elements put in table cells to hold or create space. These might include the transparent dot.gif, the non-breaking space:   or &#a60;
• Consider how tables will be handled by the non-visual Lynx browser. Make sure that all coding elements are closed, and leave space around the table information whenever possible.

Discussion of Table Problems

• Table Problems refers to HTML 3.0 (a version never implemented); many of these problems have been resolved.
• Tables on non-Table Browsers, updated in 1998.

Back to Assignment Four

Back to Green Allegheny Project Page

Return to Amelia Carr's Home Page

This page was last updated on March 5, 2001.

This page follows some of the design suggestions of David Siegel