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 Summary: 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:
Caption: Summary: 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:
Caption: Summary: 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.
Caption: Summary: 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.
Caption: Summary: 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:
Caption: 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, = 37.74, = 112.00, = 45.00, , San Jose = 26-Aug-97, = 27.28, = 112.00, = 45.00, , San Jose = subtotals, Meals , = 65.02, Hotels , = 224.00, Transport , = 90.00, = 379.02 Seattle = 27-Aug-97, = 96.25, = 109.00, = 36.00, Seattle = 28-Aug-97, = 35.00, = 109.00, = 36.00, Seattle = subtotals, = 131.25, = 218.00, = 72.00, = 421.25 Totals , = 196.27, Totals , = 442.00, Totals , = 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 ===============================================================================