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.
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
|