W3CWeb Accessibility Initiative Home

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.

Test 1 :

Procedure

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

  1. In two dimensions, table header information appears at the top of the rendered table and this information corresponds correctly with table body cells.
  2. In two dimensions, table footer information appears at the bottom of the rendered table and this information corrresponds correctly with table body cell information.
  3. 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>

References

  1. HTML 4.01 specification for THEAD
  2. HTML 4.01 specification for TBODY
  3. HTML 4.01 specification for TFOOT
  4. CSS2 specification for overflow

About this test suite

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.