Caption: A test table with merged cells
Summary: This table gives some statistics about fruit
flies: average height and weight, and percentage
with red eyes (for both males and females).
Males , Average , height = 1.9, Males , Average , weight = 0.003, Males , Red eyes = 40%
Females , Average , height = 1.7, Females , Average , weight = 0.002, Females , Red eyes = 43%
might be rendered something like this on a tty device:
A test table with merged cells
/-----------------------------------------\
| | Average | Red |
| |-------------------| eyes |
| | height | weight | |
|-----------------------------------------|
| Males | 1.9 | 0.003 | 40% |
|-----------------------------------------|
| Females | 1.7 | 0.002 | 43% |
\-----------------------------------------/
For example, the following table contains four columns of data, each headed by a column description.
Caption: Cups of coffee consumed by each senator
Summary: This table charts the number of cups
of coffee consumed by each senator, the type
of coffee (decaf or regular), and whether
taken with sugar.
Name = T. Sexton, Cups = 10, Type of Coffee = Espresso, Sugar? = No
Name = J. Dinnen, Cups = 5, Type of Coffee = Decaf, Sugar? = Yes
A user agent rendering to a tty device might display this as follows:
Name Cups Type of Coffee Sugar? T. Sexton 10 Espresso No J. Dinnen 5 Decaf Yes
In this table definition, we specify that the cell in row four, column two should span a total of three columns, including the current row.
Caption: Cups of coffee consumed by each senator Name = T. Sexton, Cups = 10, Type of Coffee = Espresso, Sugar? = No Name = J. Dinnen, Cups = 5, Type of Coffee = Decaf, Sugar? = Yes Name = A. Soria, Sugar? , Type of Coffee , Cups = Not available
This table might be rendered on a tty device by a visual user agent as follows:
Cups of coffee consumed by each senator -------------------------------------- | Name |Cups|Type of Coffee|Sugar?| -------------------------------------- |T. Sexton|10 |Espresso |No | -------------------------------------- |J. Dinnen|5 |Decaf |Yes | -------------------------------------- |A. Soria |Not available | --------------------------------------
The next example illustrates (with the help of table borders) how cell definitions that span more than one row or column affect the definition of later cells. Consider the following table definition:
1 2 3 4 6 7 8 9
As cell "2" spans the first and second rows, the definition of the second row will take it into account. Thus, the second TD in row two actually defines the row's third cell. Visually, the table might be rendered to a tty device as:
------------- | 1 | 2 | 3 | ----| |---- | 4 | | 6 | ----|---|---- | 7 | 8 | 9 | -------------
Note that if the TD defining cell "6" had been omitted, an extra empty cell would have been added by the user agent to complete the row. Similarly, in the following table definition:
1 2 3 4 6 7 8 9
cell "4" spans two columns, so the second TD in the row actually defines the third cell ("6"):
------------- | 1 | 2 | 3 | --------|---- | 4 | 6 | --------|---- | 7 | 8 | 9 | -------------
To help distinguish the cells of a table, we can set the border attribute of the TABLE element. Consider a previous example:
Caption: Cups of coffee consumed by each senator
Summary: This table charts the number of cups
of coffee consumed by each senator, the type
of coffee (decaf or regular), and whether
taken with sugar.
Name = T. Sexton, Cups = 10, Type of Coffee = Espresso, Sugar? = No
Name = J. Dinnen, Cups = 5, Type of Coffee = Decaf, Sugar? = Yes
In the following example, the user agent should show borders five pixels thick on the left-hand and right-hand sides of the table, with rules drawn between each column.
1 2 3 4 5 6 7 8 9
The table in this example aligns a row of currency values along a decimal point. We set the alignment character to "." explicitly.
Vegetable = Lettuce , Cost per kilo = $1 Vegetable = Silver carrots , Cost per kilo = $10.50 Vegetable = Golden turnips , Cost per kilo = $100.30
The formatted table may resemble the following:
------------------------------ | Vegetable |Cost per kilo| |--------------|-------------| |Lettuce | $1 | |--------------|-------------| |Silver carrots| $10.50| |--------------|-------------| |Golden turnips| $100.30| ------------------------------
In the following example, we assign header information to cells by setting the headers attribute. Each cell in the same column refers to the same header cell (via the id attribute).
Caption: Cups of coffee consumed by each senator
Summary: This table charts the number of cups
of coffee consumed by each senator, the type
of coffee (decaf or regular), and whether
taken with sugar.
Name = T. Sexton, Cups = 10, Type= Espresso, Sugar? = No
Name = J. Dinnen, Cups = 5, Type= Decaf, Sugar? = Yes
A speech synthesizer might render this table as follows:
Caption: Cups of coffee consumed by each senator
Summary: This table charts the number of cups
of coffee consumed by each senator, the type
of coffee (decaf or regular), and whether
taken with sugar.
Name: T. Sexton, Cups: 10, Type: Espresso, Sugar: No
Name: J. Dinnen, Cups: 5, Type: Decaf, Sugar: Yes
Caption: Cups of coffee consumed by each senator
Summary: This table charts the number of cups
of coffee consumed by each senator, the type
of coffee (decaf or regular), and whether
taken with sugar.
Name = T. Sexton, Cups = 10, Type= Espresso, Sugar? = No
Name = J. Dinnen, Cups = 5, Type= Decaf, Sugar? = Yes
Here's a somewhat more complex example illustrating other values for the scope attribute:
Summary: History courses offered in the community of
Bath arranged by course name, tutor, summary,
code, and fee
After the Civil War , Community Courses -- Bath Autumn 1997 , Tutor= Dr. John Wroughton, After the Civil War , Community Courses -- Bath Autumn 1997 , Summary = The course will examine the turbulent years in England after 1646. 6 weekly meetings starting Monday 13th October. , After the Civil War , Community Courses -- Bath Autumn 1997 , Code = H27, After the Civil War , Community Courses -- Bath Autumn 1997 , Fee = £32
An Introduction to Anglo-Saxon England , Community Courses -- Bath Autumn 1997 , Tutor= Mark Cottle, An Introduction to Anglo-Saxon England , Community Courses -- Bath Autumn 1997 , Summary = One day course introducing the early medieval period reconstruction the Anglo-Saxons and their society. Saturday 18th October. , An Introduction to Anglo-Saxon England , Community Courses -- Bath Autumn 1997 , Code = H28, An Introduction to Anglo-Saxon England , Community Courses -- Bath Autumn 1997 , Fee = £18
The Glory that was Greece , Community Courses -- Bath Autumn 1997 , Tutor= Valerie Lorenz, The Glory that was Greece , Community Courses -- Bath Autumn 1997 , Summary = Birthplace of democracy, philosophy, heartland of theater, home of argument. The Romans may have done it but the Greeks did it first. Saturday day school 25th October 1997 , The Glory that was Greece , Community Courses -- Bath Autumn 1997 , Code = H30, The Glory that was Greece , Community Courses -- Bath Autumn 1997 , Fee = £18
Below we mark up the travel expense table with category information:
Caption:
Travel Expense Report
Summary: This table summarizes travel expenses
incurred during August trips to
San Jose and Seattle
Meals , Hotels , Transport = subtotals
San Jose = 25-Aug-97, San Jose , 25-Aug-97 , Meals = 37.74, San Jose , 25-Aug-97 , Hotels = 112.00, San Jose , 25-Aug-97 , Transport = 45.00
San Jose = 26-Aug-97, San Jose , 26-Aug-97 , Meals = 27.28, San Jose , 26-Aug-97 , Hotels = 112.00, San Jose , 26-Aug-97 , Transport = 45.00
San Jose = subtotals, Meals = 65.02, Hotels = 224.00, Transport = 90.00, --NO HEADER-- = 379.02
Seattle = 27-Aug-97, Seattle , 27-Aug-97 , Meals = 96.25, Seattle , 27-Aug-97 , Hotels = 109.00, Seattle , 27-Aug-97 , Transport = 36.00
Seattle = 28-Aug-97, Seattle , 28-Aug-97 , Meals = 35.00, Seattle , 28-Aug-97 , Hotels = 109.00, Seattle , 28-Aug-97 , Transport = 36.00
Seattle = subtotals, Meals = 131.25, Hotels = 218.00, Transport = 72.00, --NO HEADER-- = 421.25
Totals , Meals = 196.27, Totals , Hotels = 442.00, Totals , Transport = 162.00, Totals = 800.27
This sample illustrates grouped rows and columns. The example is adapted from "Developing International Software", by Nadine Kano. In "ascii art", the following table:
Caption: CODE-PAGE SUPPORT IN MICROSOFT WINDOWS
Summary: Code page support in different versions
of MS Windows.
Code-Page ID = 1200, Name = Unicode (BMP of ISO/IEC-10646), Windows NT 3.1 = X, Windows NT 3.51 = X, Windows 95 = *
Code-Page ID = 1250, Name = Windows 3.1 Eastern European, ACP = X, Windows NT 3.1 = X, Windows NT 3.51 = X, Windows 95 = X
Code-Page ID = 1251, Name = Windows 3.1 Cyrillic, ACP = X, Windows NT 3.1 = X, Windows NT 3.51 = X, Windows 95 = X
Code-Page ID = 1252, Name = Windows 3.1 US (ANSI), ACP = X, Windows NT 3.1 = X, Windows NT 3.51 = X, Windows 95 = X
Code-Page ID = 1253, Name = Windows 3.1 Greek, ACP = X, Windows NT 3.1 = X, Windows NT 3.51 = X, Windows 95 = X
Code-Page ID = 1254, Name = Windows 3.1 Turkish, ACP = X, Windows NT 3.1 = X, Windows NT 3.51 = X, Windows 95 = X
Code-Page ID = 1255, Name = Hebrew, ACP = X, Windows 95 = X
Code-Page ID = 1256, Name = Arabic, ACP = X, Windows 95 = X
Code-Page ID = 1257, Name = Baltic, ACP = X, Windows 95 = X
Code-Page ID = 1361, Name = Korean (Johab), ACP = X, Windows NT 3.51 = **, Windows 95 = X
Code-Page ID = 437, Name = MS-DOS United States, OEMCP = X, Windows NT 3.1 = X, Windows NT 3.51 = X, Windows 95 = X
Code-Page ID = 708, Name = Arabic (ASMO 708), OEMCP = X, Windows 95 = X
Code-Page ID = 709, Name = Arabic (ASMO 449+, BCON V4), OEMCP = X, Windows 95 = X
Code-Page ID = 710, Name = Arabic (Transparent Arabic), OEMCP = X, Windows 95 = X
Code-Page ID = 720, Name = Arabic (Transparent ASMO), OEMCP = X, Windows 95 = X
would be rendered something like this:
CODE-PAGE SUPPORT IN MICROSOFT WINDOWS
===============================================================================
Code-Page | Name | ACP OEMCP | Windows Windows Windows
ID | | | NT 3.1 NT 3.51 95
-------------------------------------------------------------------------------
1200 | Unicode (BMP of ISO 10646) | | X X *
1250 | Windows 3.1 Eastern European | X | X X X
1251 | Windows 3.1 Cyrillic | X | X X X
1252 | Windows 3.1 US (ANSI) | X | X X X
1253 | Windows 3.1 Greek | X | X X X
1254 | Windows 3.1 Turkish | X | X X X
1255 | Hebrew | X | X
1256 | Arabic | X | X
1257 | Baltic | X | X
1361 | Korean (Johab) | X | ** X
-------------------------------------------------------------------------------
437 | MS-DOS United States | X | X X X
708 | Arabic (ASMO 708) | X | X
709 | Arabic (ASMO 449+, BCON V4) | X | X
710 | Arabic (Transparent Arabic) | X | X
720 | Arabic (Transparent ASMO) | X | X
===============================================================================