Next Previous Contents HTML 4.0 compliance checked by http://validator.w3.org

11.0 Tables

A table is a super-block element that defines an array of cells each of which contains a block-level stuffing. Here is a simple 3x3 table, with very few fancy features. With typical browser defaults the caption is centered and the columns are left justified, so they may not seem to line up.
A Simple 3x3 Table
Cell A1Cell A2Cell A3
Cell B1Cell B2Cell B3
Cell C1Cell C2Cell C3

This version contains interspersed multi-line cells. It also has a row of column headings (typically centered) and the caption has a horizontal rule above it which should mark out the actual width of the table.

3x3 Table with Multi-Line Cells
Column 1Column 2Column 3
Cell A1Cell A2Cell A3
2nd Line A3
Cell B1Cell B2
2nd Line B2
Cell B3
Cell C1
2nd Line C1
3rd Line C1
Cell C2Cell C3

This table illustrates column spanning (COLSPAN).
4x3 Table with Colspan
Column 1Column 2Column 3
Cell A1 + A2Cell A3
Cell B1Cell B2 + B3
Cell C1 + C2 + C3
Cell D1 + D2
2nd Line D1 + D2
Cell D3

This table illustrates row spanning (ROWSPAN). All multi-line columns in this table are rowspanned over that number of lines.
5x3 Table with Rowspan
Column 1Column 2Column 3
Cell A1Cell A2 + B2
2nd Line A2 + B2
Cell A3
Cell B1 Cell B3
Cell C1 + D1
2nd Line C1 + D1
Cell C2 Cell C3 + D3 + E3
2nd Line C3 + D3 + E3
3rd Line C3 + D3 + E3
Cell D2 + E2
2nd Line D2 + E2
Cell E1

This table has a combined row and column span in its central block.
4x4 Table with Row and Colspan
Column 1Column 2Column 3Column 4
Cell A1Cell B1Cell C1Cell D1
Cell A2Cell B2 + C2
2nd row B2 + C2
Cell D2
Cell A3Cell D3
Cell A4Cell B4Cell C4Cell D4

In this table no <col> tags are used to set the width and color of the columns; instead these are set directly into the <td> tags on the first row. Most browsers will propagate at least the widths to the rest of the column. Widths are respectively 120, 90, 70 pixels, colors are yellow, lime and aqua (cyan), and the right column (only) is right aligned.
Multicolor Table
Cell A1 Cell A2Cell A3
Cell B1Cell B2Cell B3
Cell C1Cell C2Cell C3

The next table gives the browser the opportunity to mess up on empty cells. It is a 3x3 array with all diagonal cells totally empty. Its width is specified as 50%.
Empty Cells on Diagonal
Cell A2Cell A3
Cell B1Cell B3
Cell C1Cell C2

Here is the same table except that the diagonal cells contain a single space.
Blank Cells on Diagonal
Cell A2Cell A3
Cell B1 Cell B3
Cell C1Cell C2

The above tables all have the column widths specified as 1* (equal shares). Here are some variations on column widths. First, unequal shares are specified, thus: <col span=3 width="3*,2*,1*">. Cell content is prolix to overfill the allowed width.
Unequal Relative Columns
Column 1. This cell has three shares of the total table width. Since there are six shares in all, it should be wrapped to cover half the table. Column 2. This cell gets two shares of the total width: one third of the total width. Column 3. This cell gets one share, or one sixth of the total.

This table is identical except that the widths are specified as percents.
Unequal Percent Columns
Column 1. This cell's width is specified as 50% of the total width. Thus, it should be wrapped to cover half the table. Column 2. This cell's width is 33% or one third of the total width. Column 3. This cell gets 16% of the total.

This table has two underfilled columns whose width is specified as 0*, meaning the maximum width of any content. The first column has width 50%, so the remaining space has to go somewhere -- most likely onto the 0* columns.
Two Columns of Width 0*
Column 1 (1*)Col. 2 (0*)Col. 3 (0*)

In this version one of the 0* columns is packed so it can't possibly fit in one line, and column 1 is spread out to 50% width. A smart browser will get all the columns on the screen. A dumb browser will produce one extremely long line. An ``average'' browser will limit the width of column 2 but may not limit it enough to get everything on the screen.
Two Columns of Width 0* (Reprise)
Column 1, width 50%. Column 2, width 0*, but with plenty of verbiage so it will have to be wrapped no matter how much space may be allowed for it by the browser. Col. 3, 0*

The next table is rather complicated. Its features are:

CAPTION: Compounds of Iridium
Name (in THEAD) Molecular Comments (all with TH)
Formula Mass
Name (in TFOOT) Molecular Comments (all with TH)
Formula Mass
Iridium bromide, tetra IrBr4 511,840 Black deliquescent (with TD)
Iridium bromide, tri IrBr3·4H2O 503,99 Olive-green crystals
Iridium carbonyl Ir(CO)8 608,48 Yellow crystals
Iridium telluride IrTe3 The existence of this compound is dubious. It was reported in 1872 by Moissan, but many later chemists report that they have tried and failed to synthesize it.

Due to the presence of tellurium, work with this compound is extremely dangerous, and should only be undertaken in a suitably equipped lab with proper emergency equipment and procedures in place.

In this version of the table the column widths are (*, 2cm, 2.5cm, 2*), and the third column is aligned on decimal point (and the numbers have points, not commas). Normal data appears in the fourth row.
CAPTION: Compounds of Iridium
Name (in THEAD) Molecular Comments (all with TH)
Formula Mass
Name (in TFOOT) Molecular Comments (all with TH)
Formula Mass
Iridium bromide, tetra IrBr4 511.840 Black deliquescent (with TD)
Iridium bromide, tri IrBr3·4H2O 503.99 Olive-green crystals
Iridium carbonyl Ir(CO)8 608.48 Yellow crystals
Iridium telluride IrTe3 575.00 Dark gray crystals

The following table was captured in the wild. Content and names have been thorougly scrambled to protect the guilty. Each paragraph should be 400 pixels wide, except titles and other short units. At the end are two paragraphs of fine print (in maroon), then a logo appears next to some right justified material also in maroon fine print.

Return to Headlines

Look out Viagra: Here Comes Sex Symbol
By Muck Weasel

Las Vegas, May 20 -- After more than 50 years in the invention business, Yoshinori Fukinuki has turned from disk drives to sex drives. This leading pioneer in magnetic storage has developed a new miracle drug with all natural ingredients and no side effects.

Your hard drive doesn't just mean in your computer any more, said Fukinuki at a recent press conference...

Return to Headlines

News is provided by Hyper Stock Tout for information purposes only and should not be used or construed as an indicator of future performance, an offer to sell, a solicitation of an offer to buy, or a recommendation for any security.

Hyper Stock Tout is not affiliated with Your Broker, and information obtained and prepared by Hyper Stock Tout has not been reviewed by Your Broker. Neither company guarantees that the information is accurate, complete, or timely.


©Copyright 1998 Hyper Stock Tout Corp.
All rights reserved.

The navigation menus at the top and bottom of each page are produced with a table having one row and all default widths. There are several other tables in the test suite:


Next Previous Contents