| <!doctype html> |
| <title>CSS Test: Table section ordering</title> |
| <link rel="author" href="mailto:atotic@chromium.org"> |
| <link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#table-display"> |
| <link rel="match" href="row-group-order-ref.html"> |
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> |
| <style> |
| table { |
| font: 8px Ahem; |
| border-collapse: collapse; |
| } |
| thead, tbody, tfoot { |
| border: 10px solid; |
| } |
| .first { |
| border-color: green; |
| } |
| .second { |
| border-color: blue; |
| } |
| .third { |
| border-color: yellow; |
| } |
| tbody { |
| border-color: orange; |
| } |
| td { |
| width: 50px; |
| height: 50px; |
| } |
| </style> |
| |
| <table> |
| <tbody> |
| <tr><td>body 1</td></tr> |
| </tbody> |
| <thead class="first"> |
| <tr><td>head 1</td></tr> |
| </thead> |
| <thead class="second"> |
| <tr><td>head 2</td></tr> |
| </thead> |
| <tbody> |
| <tr><td>body 2</td></tr> |
| </tbody> |
| <thead class="third"> |
| <tr><td>head 3</td></tr> |
| </thead> |
| <tfoot class="first"> |
| <tr><td>foot 1</td></tr> |
| </tfoot> |
| <tbody> |
| <tr><td>body 3</td></tr> |
| </tbody> |
| <tfoot class="second"> |
| <tr><td>foot 2</td></tr> |
| </tfoot> |
| <tbody> |
| <tr><td>body 4</td></tr> |
| </tbody> |
| <tfoot class="third"> |
| <tr><td>foot 3</td></tr> |
| </tfoot> |
| </table> |
