navigating THEAD, TBODY, TFOOT with CSS overflow styling
On this page:
Test
1 |
References
|
About these tests
Nearby:
More HTML 4.01 Tests
|
UAAG 1.0 Test Suite
UAAG 1.0 Requirement
-
Checkpoint
10.1
Associate table cells and headers
(Priority
1
)
-
Provision
1
:
For graphical user agents that render tables, for each table cell, allow the user to view associated header information.
Procedure
- Scroll through the table body cells while table header and table footer information remains "in view".
Run test
Rows |
Column 1 |
Column 2 |
Column 3 |
Column 4 |
Rows |
Column 1 footer |
Column 2 footer |
Column 3 footer |
Column 4 footer |
Row 1 |
1.1 |
2.1 |
3.1 |
4.1 |
Row 2 |
1.2 |
2.2 |
3.2 |
4.2 |
Row 3 |
1.3 |
2.3 |
3.3 |
4.3 |
Row 4 |
1.4 |
2.4 |
3.4 |
4.4 |
Row 5 |
1.5 |
2.5 |
3.5 |
4.5 |
Row 6 |
1.6 |
2.6 |
3.6 |
4.6 |
Row 7 |
1.7 |
2.7 |
3.7 |
4.7 |
Row 8 |
1.8 |
2.8 |
3.8 |
4.8 |
Row 9 |
1.9 |
2.9 |
3.9 |
4.9 |
Row 10 |
1.10 |
2.10 |
3.10 |
4.10 |
Row 11 |
1.11 |
2.11 |
3.11 |
4.11 |
Row 12 |
1.12 |
2.12 |
3.12 |
4.12 |
Row 13 |
1.13 |
2.13 |
3.13 |
4.13 |
Row 14 |
1.14 |
2.14 |
3.14 |
4.14 |
Row 15 |
1.15 |
2.15 |
3.15 |
4.15 |
Row 16 |
1.16 |
2.16 |
3.16 |
4.16 |
Row 17 |
1.17 |
2.17 |
3.17 |
4.17 |
Row 18 |
1.18 |
2.18 |
3.18 |
4.18 |
Row 19 |
1.19 |
2.19 |
3.19 |
4.19 |
Row 20 |
1.20 |
2.20 |
3.20 |
4.20 |
Row 21 |
1.21 |
2.21 |
3.21 |
4.21 |
Row 22 |
1.22 |
2.22 |
3.22 |
4.22 |
Row 23 |
1.23 |
2.23 |
3.23 |
4.23 |
Row 24 |
1.24 |
2.24 |
3.24 |
4.24 |
Row 25 |
1.25 |
2.25 |
3.25 |
4.25 |
Row 26 |
1.26 |
2.26 |
3.26 |
4.26 |
Row 27 |
1.27 |
2.27 |
3.27 |
4.27 |
Row 28 |
1.28 |
2.28 |
3.28 |
4.28 |
Row 29 |
1.29 |
2.29 |
3.29 |
4.29 |
Row 30 |
1.30 |
2.30 |
3.30 |
4.30 |
Row 31 |
1.31 |
2.31 |
3.31 |
4.31 |
Row 32 |
1.32 |
2.32 |
3.32 |
4.32 |
Expected results
- In two dimensions, table header information appears at the top of the rendered table and this information corresponds correctly with table body cells.
- In two dimensions, table footer information appears at the bottom of the rendered table and this information corrresponds correctly with table body cell information.
- This information remains visible in the view-port while the user scrolls through table body rows.
Source code
<table border="1" summary="Test table for scrollable TBODY table regions">
<thead>
<tr>
<th rowspan="1" colspan="1">Rows</th>
<th rowspan="1" colspan="1">Column 1</th>
<th rowspan="1" colspan="1">Column 2</th>
<th rowspan="1" colspan="1">Column 3</th>
<th rowspan="1" colspan="1">Column 4</th>
</tr>
</thead>
<tfoot>
<tr>
<th rowspan="1" colspan="1">Rows</th>
<th rowspan="1" colspan="1">Column 1 footer</th>
<th rowspan="1" colspan="1">Column 2 footer</th>
<th rowspan="1" colspan="1">Column 3 footer</th>
<th rowspan="1" colspan="1">Column 4 footer</th>
</tr>
</tfoot>
<tbody style="height: 5em; overflow: auto;">
<tr>
<th rowspan="1" colspan="1">Row 1</th>
<td rowspan="1" colspan="1">1.1</td>
<td rowspan="1" colspan="1">2.1</td>
<td rowspan="1" colspan="1">3.1</td>
<td rowspan="1" colspan="1">4.1</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 2</th>
<td rowspan="1" colspan="1">1.2</td>
<td rowspan="1" colspan="1">2.2</td>
<td rowspan="1" colspan="1">3.2</td>
<td rowspan="1" colspan="1">4.2</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 3</th>
<td rowspan="1" colspan="1">1.3</td>
<td rowspan="1" colspan="1">2.3</td>
<td rowspan="1" colspan="1">3.3</td>
<td rowspan="1" colspan="1">4.3</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 4</th>
<td rowspan="1" colspan="1">1.4</td>
<td rowspan="1" colspan="1">2.4</td>
<td rowspan="1" colspan="1">3.4</td>
<td rowspan="1" colspan="1">4.4</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 5</th>
<td rowspan="1" colspan="1">1.5</td>
<td rowspan="1" colspan="1">2.5</td>
<td rowspan="1" colspan="1">3.5</td>
<td rowspan="1" colspan="1">4.5</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 6</th>
<td rowspan="1" colspan="1">1.6</td>
<td rowspan="1" colspan="1">2.6</td>
<td rowspan="1" colspan="1">3.6</td>
<td rowspan="1" colspan="1">4.6</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 7</th>
<td rowspan="1" colspan="1">1.7</td>
<td rowspan="1" colspan="1">2.7</td>
<td rowspan="1" colspan="1">3.7</td>
<td rowspan="1" colspan="1">4.7</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 8</th>
<td rowspan="1" colspan="1">1.8</td>
<td rowspan="1" colspan="1">2.8</td>
<td rowspan="1" colspan="1">3.8</td>
<td rowspan="1" colspan="1">4.8</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 9</th>
<td rowspan="1" colspan="1">1.9</td>
<td rowspan="1" colspan="1">2.9</td>
<td rowspan="1" colspan="1">3.9</td>
<td rowspan="1" colspan="1">4.9</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 10</th>
<td rowspan="1" colspan="1">1.10</td>
<td rowspan="1" colspan="1">2.10</td>
<td rowspan="1" colspan="1">3.10</td>
<td rowspan="1" colspan="1">4.10</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 11</th>
<td rowspan="1" colspan="1">1.11</td>
<td rowspan="1" colspan="1">2.11</td>
<td rowspan="1" colspan="1">3.11</td>
<td rowspan="1" colspan="1">4.11</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 12</th>
<td rowspan="1" colspan="1">1.12</td>
<td rowspan="1" colspan="1">2.12</td>
<td rowspan="1" colspan="1">3.12</td>
<td rowspan="1" colspan="1">4.12</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 13</th>
<td rowspan="1" colspan="1">1.13</td>
<td rowspan="1" colspan="1">2.13</td>
<td rowspan="1" colspan="1">3.13</td>
<td rowspan="1" colspan="1">4.13</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 14</th>
<td rowspan="1" colspan="1">1.14</td>
<td rowspan="1" colspan="1">2.14</td>
<td rowspan="1" colspan="1">3.14</td>
<td rowspan="1" colspan="1">4.14</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 15</th>
<td rowspan="1" colspan="1">1.15</td>
<td rowspan="1" colspan="1">2.15</td>
<td rowspan="1" colspan="1">3.15</td>
<td rowspan="1" colspan="1">4.15</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 16</th>
<td rowspan="1" colspan="1">1.16</td>
<td rowspan="1" colspan="1">2.16</td>
<td rowspan="1" colspan="1">3.16</td>
<td rowspan="1" colspan="1">4.16</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 17</th>
<td rowspan="1" colspan="1">1.17</td>
<td rowspan="1" colspan="1">2.17</td>
<td rowspan="1" colspan="1">3.17</td>
<td rowspan="1" colspan="1">4.17</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 18</th>
<td rowspan="1" colspan="1">1.18</td>
<td rowspan="1" colspan="1">2.18</td>
<td rowspan="1" colspan="1">3.18</td>
<td rowspan="1" colspan="1">4.18</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 19</th>
<td rowspan="1" colspan="1">1.19</td>
<td rowspan="1" colspan="1">2.19</td>
<td rowspan="1" colspan="1">3.19</td>
<td rowspan="1" colspan="1">4.19</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 20</th>
<td rowspan="1" colspan="1">1.20</td>
<td rowspan="1" colspan="1">2.20</td>
<td rowspan="1" colspan="1">3.20</td>
<td rowspan="1" colspan="1">4.20</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 21</th>
<td rowspan="1" colspan="1">1.21</td>
<td rowspan="1" colspan="1">2.21</td>
<td rowspan="1" colspan="1">3.21</td>
<td rowspan="1" colspan="1">4.21</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 22</th>
<td rowspan="1" colspan="1">1.22</td>
<td rowspan="1" colspan="1">2.22</td>
<td rowspan="1" colspan="1">3.22</td>
<td rowspan="1" colspan="1">4.22</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 23</th>
<td rowspan="1" colspan="1">1.23</td>
<td rowspan="1" colspan="1">2.23</td>
<td rowspan="1" colspan="1">3.23</td>
<td rowspan="1" colspan="1">4.23</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 24</th>
<td rowspan="1" colspan="1">1.24</td>
<td rowspan="1" colspan="1">2.24</td>
<td rowspan="1" colspan="1">3.24</td>
<td rowspan="1" colspan="1">4.24</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 25</th>
<td rowspan="1" colspan="1">1.25</td>
<td rowspan="1" colspan="1">2.25</td>
<td rowspan="1" colspan="1">3.25</td>
<td rowspan="1" colspan="1">4.25</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 26</th>
<td rowspan="1" colspan="1">1.26</td>
<td rowspan="1" colspan="1">2.26</td>
<td rowspan="1" colspan="1">3.26</td>
<td rowspan="1" colspan="1">4.26</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 27</th>
<td rowspan="1" colspan="1">1.27</td>
<td rowspan="1" colspan="1">2.27</td>
<td rowspan="1" colspan="1">3.27</td>
<td rowspan="1" colspan="1">4.27</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 28</th>
<td rowspan="1" colspan="1">1.28</td>
<td rowspan="1" colspan="1">2.28</td>
<td rowspan="1" colspan="1">3.28</td>
<td rowspan="1" colspan="1">4.28</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 29</th>
<td rowspan="1" colspan="1">1.29</td>
<td rowspan="1" colspan="1">2.29</td>
<td rowspan="1" colspan="1">3.29</td>
<td rowspan="1" colspan="1">4.29</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 30</th>
<td rowspan="1" colspan="1">1.30</td>
<td rowspan="1" colspan="1">2.30</td>
<td rowspan="1" colspan="1">3.30</td>
<td rowspan="1" colspan="1">4.30</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 31</th>
<td rowspan="1" colspan="1">1.31</td>
<td rowspan="1" colspan="1">2.31</td>
<td rowspan="1" colspan="1">3.31</td>
<td rowspan="1" colspan="1">4.31</td>
</tr>
<tr>
<th rowspan="1" colspan="1">Row 32</th>
<td rowspan="1" colspan="1">1.32</td>
<td rowspan="1" colspan="1">2.32</td>
<td rowspan="1" colspan="1">3.32</td>
<td rowspan="1" colspan="1">4.32</td>
</tr>
</tbody>
</table>
-
HTML 4.01 specification for THEAD
-
HTML 4.01 specification for TBODY
-
HTML 4.01 specification for TFOOT
-
CSS2 specification for overflow
This test is part of a
test suite
for the
User Agent Accessibility Guidelines (UAAG)
1.0
. This work is conducted by the
User Agent Accessibility Guidelines Working
Group
, which is part of W3C's
Web Accessibility Initiative (WAI)
. Please send comments on this test to w3c-wai-ua@w3.org (
public archive
).
Test created by:
Last modified: $Date: 2003/04/02 23:46:50 $ by $Author: jongund $
Copyright
© 1999 - 2003
W3C®
(
MIT
,
INRIA
,
Keio
), All Rights Reserved. W3C
liability
,
trademark
,
document use
and
software licensing
rules apply.