Next

Previous

Contents

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 A1	Cell A2	Cell A3
Cell B1	Cell B2	Cell B3
Cell C1	Cell C2	Cell 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 1	Column 2	Column 3
Cell A1	Cell A2	Cell A3 2nd Line A3
Cell B1	Cell B2 2nd Line B2	Cell B3
Cell C1 2nd Line C1 3rd Line C1	Cell C2	Cell C3

This table illustrates column spanning (COLSPAN).

4x3 Table with Colspan

Column 1	Column 2	Column 3
Cell A1 + A2		Cell A3
Cell B1	Cell 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 1	Column 2	Column 3
Cell A1	Cell 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 1	Column 2	Column 3	Column 4
Cell A1	Cell B1	Cell C1	Cell D1
Cell A2	Cell B2 + C2 2nd row B2 + C2		Cell D2
Cell A3			Cell D3
Cell A4	Cell B4	Cell C4	Cell 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 A2	Cell A3
Cell B1	Cell B2	Cell B3
Cell C1	Cell C2	Cell 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 A2	Cell A3
Cell B1		Cell B3
Cell C1	Cell C2

Here is the same table except that the diagonal cells contain a single space.

Blank Cells on Diagonal

	Cell A2	Cell A3
Cell B1		Cell B3
Cell C1	Cell 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:

• Its width is set explicitly to 100%.
• There is a CAPTION.
• A summary (same as the caption) is provided.
• There are THEAD, TFOOT and TBODY divisions. Browsers which don't know about TFOOT may render the footer a second time after the header, rather than putting one set at the top and one at the bottom.
• In the heading and in one data row it uses the rowspan and colspan features.
• All columns are defined by COL.
• The third column is char aligned on comma, specified in the COL element.
• No borders or rules (lines around cells) have been specified.
• The headings are all in the default style (most likely centered italic) except ``Comments'' is left aligned.
• The lower right cell is colspanned and contains two wrapped paragraphs.

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:

• Entities: A large table with multi-line cells.
• Colors: Aligned and styled content, and dynamic column widths.
• Complex Content: The page after this one is a giant table illustrating (almost) every HTML tag inside table cells.