White Space and Tables -- Test Document

This is a test document showing the effect of white space and tables on your browser. Two sets of tests are presented.

Table Test 1: White Space in Error (using TD end tags)

The following two tables should be displayed identically.

Table A: No White Space before end tags

Table B: Carriage Return White Space before end tags

The above two tables should be identical. If your browser does not follow the rules of white space, then it will add a space to each cell in the second table, making it wider than the first table. This is a bug.

Table Test 2: Beaumontville and Big Bear Get Data in Eight Tables (no TD end tags)

• the amount and type of white space in the source code, and
• the presence or absence of paragraph elements (using the <P> tag) in certain cells.

This test document hopes to help authors determine an optimum layout for their HTML table code, and perhaps encourage the use of a single paragraph element at the beginning of a row (when practical for your table).

Here is how your browser displays the eight sample tables. (Notes on white space usage and HTML follow the eight tables, which begin below this line.)

1. With no white space and no paragraph elements:

2. With minimal white space and paragraph elements for the first cell of each row:

3. With minimal white space and paragraph elements for each cell:

4. With carriage return white space and no paragraph elements:

5. With carriage return white space, several space white elements for readability, and paragraph elements for the first cell of each row:

6. With carriage return white space and paragraph elements for each cell:

7. With space bar white space between cells, some carriage returns, and no paragraph elements:

8. With space bar white space between cells, some carriage returns, and paragraph elements for the first cell of each row:

Notes on the Table Tests

Use your browser's "View Source" command to see the exact white space used for each table. You may agree that some of the table code layouts are more readable than others.

A browser that supports tables should display all eight tables more or less identically. (If your browser can display tables, but all eight tables above were not identical, then your browser might not know how to deal with white space properly. You can find out more about white space bugs.)

Look carefully. It's quite likely that your browser renders some of the tables wider than others, often in error. The difference in size may be very small between the first two tables, but later tables may be significantly wider than the first three.

(Some of the tables should be wider; specifically, if space bar white space is used, then the space bar should be considered part of the cell. However, the carriage return examples (especially table 4) should not be different from the others. Also, theoretically, a browser could legally choose to display those tables with paragraph elements differently than others. It's up to a browser how to display cells if the TD element's data is marked explicitly with a paragraph element. Historically and arguably, the presence or absence of the paragraph element shouldn't make a difference, unless style sheets are used.)

A browser that doesn't support tables at all will ignore the table elements, possibly creating an undesirable presentation (depending on the presence of white space or paragraph elements).

It may be instructive to see this document using Lynx 2.7 or using Lynx 2.5. (Both of these versions of Lynx understand that there should be a space between table cells and a line break between table rows. I wish there were an easy way to show this page under earlier versions of Lynx, which didn't understand table elements at all and crushed all of the table data in table 1 together. I may add some screen shots to this page at some point.)

Please send comments about this page to me at estephen@emf.net.