| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> |
| <html lang="en-US"> |
| <head> |
| <title>Anonymous table objects</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> |
| <meta http-equiv="Content-Style-Type" content="text/css"> |
| <link rel="copyright" href="/~dbaron/legal.html"> |
| <style type="text/css"> |
| div { margin: 1em 0; } |
| |
| .table, .inlineTable, .tableRow, .tableRowGroup, .tableHeaderGroup, |
| .tableFooterGroup, .tableColumn, .tableColumnGroup, .tableCell, |
| .tableCaption { |
| background: aqua; |
| color: black; |
| } |
| |
| .table { display: table; } |
| .inlineTable { display: inline-table; } |
| .tableRow { display: table-row; } |
| .tableRowGroup { display: table-row-group; } |
| .tableHeaderGroup { display: table-header-group; } |
| .tableFooterGroup { display: table-footer-group; } |
| .tableColumn { display: table-column; } |
| .tableColumnGroup { display: table-column-group; } |
| .tableCell { display: table-cell; } |
| .tableCaption { display: table-caption; } |
| |
| .block { display: block; } |
| .inline { display: inline; } |
| </style> |
| </head> |
| <body> |
| <h1>Anonymous table objects</h1> |
| |
| <p> |
| See the <a |
| href="http://www.w3.org/TR/REC-CSS2/tables.html#anonymous-boxes">relevant |
| section of CSS2</a> for an explanation. <strong>This test does not |
| test inline-tables at all.</strong> |
| </p> |
| |
| <h2>Rule 1</h2> |
| |
| <div class="table"> |
| Table 1, Cell 1, Row 1 |
| </div> |
| |
| <h2>Rule 2</h2> |
| |
| <div> |
| <span class="tableCell">Table 1, Row 1, Cell 1</span> |
| <span class="tableCell">Table 1, Row 1, Cell 2</span> |
| <span class="tableCell">Table 1, Row 1, Cell 3</span> |
| <span class="tableCell">Table 1, Row 1, Cell 4</span> |
| </div> |
| |
| <div> |
| <span class="tableCell">Table 2, Row 1, Cell 1</span> |
| <span class="tableCell">Table 2, Row 1, Cell 2</span> |
| <span class="tableCell">Table 2, Row 1, Cell 3</span> |
| <span class="tableCell">Table 2, Row 1, Cell 4</span> |
| <span class="tableRow"> |
| <span class="tableCell">Table 2, Row 2, Cell 1</span> |
| <span class="tableCell">Table 2, Row 2, Cell 2</span> |
| <span class="tableCell">Table 2, Row 2, Cell 3</span> |
| <span class="tableCell">Table 2, Row 2, Cell 4</span> |
| </span> |
| <span class="tableCell">Table 2, Row 3, Cell 1</span> |
| <span class="tableCell">Table 2, Row 3, Cell 2</span> |
| <span class="tableCell">Table 2, Row 3, Cell 3</span> |
| <span class="tableCell">Table 2, Row 3, Cell 4</span> |
| </div> |
| |
| <h2>Rules 3 and 4</h2> |
| |
| <p> |
| This section does not test the behavior of columns, column groups, |
| or captions. |
| </p> |
| |
| <div> |
| <span class="tableRow"> |
| <span class="tableCell">Table 1, Row 1, Cell 1</span> |
| <span class="tableCell">Table 1, Row 1, Cell 2</span> |
| <span class="tableCell">Table 1, Row 1, Cell 3</span> |
| <span class="tableCell">Table 1, Row 1, Cell 4</span> |
| </span> |
| <span class="tableRow"> |
| <span class="tableCell">T 1, R 2, C 1</span> |
| <span class="tableCell">Table 1, Row 2, Cell 2</span> |
| <span class="tableCell">Table 1, Row 2, Cell 3</span> |
| <span class="tableCell">Table 1, Row 2, Cell 4</span> |
| </span> |
| <span class="tableRow"> |
| <span class="tableCell">Table 1, Row 3, Cell 1</span> |
| <span class="tableCell">Table 1, Row 3, Cell 2</span> |
| <span class="tableCell">T 1, R 3, C 3</span> |
| <span class="tableCell">Table 1, Row 3, Cell 4</span> |
| </span> |
| </div> |
| |
| |
| <p>Note: table-header-group and table-footer-group are tested only |
| in their HTML order, and they only appear once.</p> |
| |
| <div> |
| <span class="tableHeaderGroup"> |
| <span class="tableCell">Table 2, Row 1, Cell 1</span> |
| <span class="tableCell">Table 2, Row 1, Cell 2</span> |
| <span class="tableCell">Table 2, Row 1, Cell 3</span> |
| <span class="tableCell">Table 2, Row 1, Cell 4</span> |
| </span> |
| <span class="tableFooterGroup"> |
| <span class="tableCell">Table 2, Row 5, Cell 1</span> |
| <span class="tableCell">Table 2, Row 5, Cell 2</span> |
| <span class="tableCell">T 2, R 5, C 5</span> |
| <span class="tableCell">Table 2, Row 5, Cell 4</span> |
| </span> |
| <span class="tableRow"> |
| <span class="tableCell">T 2, R 2, C 1</span> |
| <span class="tableCell">Table 2, Row 2, Cell 2</span> |
| <span class="tableCell">Table 2, Row 2, Cell 3</span> |
| <span class="tableCell">Table 2, Row 2, Cell 4</span> |
| </span> |
| <span class="tableRowGroup"> |
| <span class="tableCell">T 2, R 3, C 1</span> |
| <span class="tableCell">Table 2, Row 3, Cell x</span> |
| <span class="tableCell">Table 2, Row 3, Cell 3</span> |
| <span class="tableCell">Table 2, Row 3, Cell 4</span> |
| </span> |
| <span class="tableRowGroup"> |
| <span class="tableRow"> |
| <span class="tableCell">T 2, R 4, C 1</span> |
| <span class="tableCell">Table 2, Row 4, Cell x</span> |
| <span class="tableCell">Table 2, Row 4, Cell 3</span> |
| <span class="tableCell">Table 2, Row 4, Cell 4</span> |
| </span> |
| </span> |
| </div> |
| |
| <h2>Rule 5</h2> |
| |
| <div class="table"> |
| <span class="tableRow"> |
| <span class="tableCell">Table 2, Row 1, Cell 1</span> |
| <span class="tableCell">Table 2, Row 1, Cell 2</span> |
| <span class="tableCell">Table 2, Row 1, Cell 3</span> |
| <span class="tableCell">Table 2, Row 1, Cell 4</span> |
| </span> |
| <span class="tableRow"> |
| <span class="block">Table 2, Row 2, Cell 1</span> |
| <span class="tableCell">Table 2, Row 2, Cell 2</span> |
| <span class="block">Table 2, Row 2, Cell 3</span> |
| <span class="block">also Table 2, Row 2, Cell 3</span> |
| also Table 2, Row 2, Cell 3 |
| <span class="tableCell">Table 2, Row 2, Cell 4</span> |
| </span> |
| <span class="tableRow"> |
| <span>Table 2, Row 3, Cell 1</span> |
| <span class="tableCell">Table 2, Row 3, Cell 2</span> |
| <span class="table">Table 2, Row 3, Cell 3 (a nested table)</span> |
| <span class="tableCell">Table 2, Row 3, Cell 4</span> |
| </span> |
| </div> |
| |
| <hr title="Beginning of Footer"> |
| <p><a href="http://validator.w3.org/check/referer" title="W3C HTML Validator"><img src="../../images/vh40" alt="Valid HTML 4.0!" height="31" width="88"></a></p> |
| <p>(Back to |
| <a href="./">CSS Testing Information</a>, |
| <a href="../../">David Baron</a>)</p> |
| <p><a href="/~dbaron/" title="David Baron's Homepage">LDB</a>, |
| <a rev="made" href="mailto:dbaron@fas.harvard.edu" TITLE="Send e-mail to David Baron">dbaron@fas.harvard.edu</a></p> |
| |
| </body></html> |
