Make your own free website on Tripod.com

Example 4: Some simple tables.

Color  Meaning 
lightgreen Light green is used on cells that have a colspan
khaki Khaki is used on cells that have a rowspan
lightgrey Light grey is used on cells that have a rowspan and a colspan

 
Table 1 has this caption at the top.  It is defined to be 100% of it's parent's width.
Cell Stuff to test out table cell layout. This should be long enough.
Cell Stuff to test out table cell layout. This should be long enough.
Cell Stuff to test out table cell layout. This should be long enough. Cell

 
Table 2 has auto-width (no width param specified.)
Cell Stuff to test out table cell layout. This should be long enough.
Cell
Cell Stuff to test out table cell layout. This should be long enough. more text
 
Table 3 is the same as Table 2, but with equal column widths. 
Cell Stuff to test out table cell layout. This should be long enough.
Cell
Cell Stuff to test out table cell layout. This should be long enough. more text

 
Table 4 has this bottom caption. The table has specified column widths and collapsing borders.
Player Ranking Record
Steve Clark 1 77-0
Cliff Swain 2 67-10
Marty Hogan 3 57-15

Table 5 has a scrolling tbody.
HEADER
cell-00cell-01cell-02cell-03
cell-10cell-11cell-12cell-13
cell-20cell-21cell-22cell-23
cell-30cell-31cell-32cell-33
cell-40cell-41cell-42cell-43
cell-50cell-51cell-52cell-53
cell-60cell-61cell-62cell-63
cell-70cell-71cell-72cell-73
cell-80cell-81cell-82cell-83
cell-90cell-91cell-92cell-93
cell-a0cell-a1cell-a2cell-a3
cell-b0cell-b1cell-b2cell-b3
cell-c0cell-c1cell-c2cell-c3
cell-d0cell-d1cell-d2cell-d3
cell-e0cell-e1cell-e2cell-e3
cell-f0cell-f1cell-f2cell-f3
FOOTER
Table 5 has a scrolling tbody.

This is a table formed from a list with display of table-row and list items with display of table-cell.
This is a table formed from a list with display of table-row-group and list items with display of table-cell.

This is like the previous table plus the list's overflow property set

The following table will have its rows and columns in red collapsed
before
C11C12C13 large
C21C22C23
C31C32C33

after
C11C12C13 large
C21C22C23
C31C32C33

The following table will have its 2nd row and 2nd col collapsed. A window resize may be necessary to see it properly.
before
C11C12C13C14
C21C12 C13 C22 C23C14
C31C34
C41C42C43C44
after
C11C12C13C14
C21C12 C13 C22 C23C14
C31C34
C41C42C43C44

The following table will have its 1st row group collapsed (rows 1 and 2)
before
C11C12C13C14
C21C22C23C24
C31C32C33C34
C41C42C43C44

after
C11C12C13C14
C21C22C23C24
C31C32C33C34
C41C42C43C44

The following table is similar to a previous table except that the direction is right-to-left. It will have its 2nd row and 2nd col collapsed. A window resize may be necessary to see it properly.
before
C11C12C13C14
C21C12 C13 C22 C23C14
C31C34
C41C42C43C44
after
C11C12C13C14
C21C12 C13 C22 C23C14
C31C34
C41C42C43C44