# 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-00 | cell-01 | cell-02 | cell-03
cell-10 | cell-11 | cell-12 | cell-13
cell-20 | cell-21 | cell-22 | cell-23
cell-30 | cell-31 | cell-32 | cell-33
cell-40 | cell-41 | cell-42 | cell-43
cell-50 | cell-51 | cell-52 | cell-53
cell-60 | cell-61 | cell-62 | cell-63
cell-70 | cell-71 | cell-72 | cell-73
cell-80 | cell-81 | cell-82 | cell-83
cell-90 | cell-91 | cell-92 | cell-93
cell-a0 | cell-a1 | cell-a2 | cell-a3
cell-b0 | cell-b1 | cell-b2 | cell-b3
cell-c0 | cell-c1 | cell-c2 | cell-c3
cell-d0 | cell-d1 | cell-d2 | cell-d3
cell-e0 | cell-e1 | cell-e2 | cell-e3
cell-f0 | cell-f1 | cell-f2 | cell-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.

- ONE
- TWO
- THREE
- FOUR
- FIVE

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

- ONE
- TWO
- THREE
- FOUR
- FIVE
- SIX

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

- ONE
- TWO
- THREE
- FOUR
- FIVE
- SIX

The following table will have its rows and columns in red collapsed

before
C11 | C12 | C13 large
C21 | C22 | C23
C31 | C32 | C33

after
C11 | C12 | C13 large
C21 | C22 | C23
C31 | C32 | C33

The following table will have its 2nd row and 2nd col collapsed. A window resize may be necessary to see it properly.

before
C11 | C12 | C13 | C14
C21 | C12 C13 C22 C23 | C14
C31 | C34
C41 | C42 | C43 | C44

after
C11 | C12 | C13 | C14
C21 | C12 C13 C22 C23 | C14
C31 | C34
C41 | C42 | C43 | C44

The following table will have its 1st row group collapsed (rows 1 and 2)

before
C11 | C12 | C13 | C14
C21 | C22 | C23 | C24
C31 | C32 | C33 | C34
C41 | C42 | C43 | C44

after
C11 | C12 | C13 | C14
C21 | C22 | C23 | C24
C31 | C32 | C33 | C34
C41 | C42 | C43 | C44

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
C11 | C12 | C13 | C14
C21 | C12 C13 C22 C23 | C14
C31 | C34
C41 | C42 | C43 | C44

after
C11 | C12 | C13 | C14
C21 | C12 C13 C22 C23 | C14
C31 | C34
C41 | C42 | C43 | C44