WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Making a grid of divs appear as a "table"

for

From: Christophe Strobbe
Date: Jun 19, 2008 4:00AM

Hi,

At 00:27 19/06/2008, you wrote:
>Gareth writes: <<I'm a little unsure what you're trying to achieve
>below, however, one thing I will say is that if you have a wadge of
>tabular data to display, then use a table.>>
>
>
>Thank you all for the replies. I will post a demo of the working
>table as soon as I fix a bug.
>
>To recap, my the goal is to provide a FIXED HEADER, where the table
>body scrolls and the column headers appear to stay stationary as the
>data scrolls under it. It is simply impossible to do it without
>javascript, and cannot be done with a single table at all, as each
>browser treats "tbody" and overflow differently.

People have tried this before, but I lost the pointers to the demos
that I had found.
See for example:
* Non-scrolling table header:
<http://www.ssi-developer.net/css/non-scrolling-table-hdr.shtml>;,
* Pure CSS Scrollable Table with Fixed Header:
<http://www.imaputz.com/cssStuff/bigFourVersion.html>;
(found through Scrollable Table:
<http://www.456bereastreet.com/archive/200410/scrollable_table/>;);
this one works in SeaMonkey 1.1, Firefox 1.5, Firefox 2.0.0.14,
Internet Explorer 6, Opera 9.02 on Windows XP;
* Scrolling HTML Table with Fixed Header:
<http://rcswebsolutions.wordpress.com/2007/01/02/scrolling-html-table-with-fixed-header/>;
(doesn't work in Opera 9.02: the header also scrolls);
I haven't tested the updated version at
<http://rcswebsolutions.wordpress.com/2007/02/17/updated-scrolling-html-table-with-fixed-header/>;
* there's also a discussion thread at
<http://www.webmaster-talk.com/css-forum/114586-variable-width-scrolling-table-fixed-header.html>;,
where the code from www.imaputz.com is also discussed;
* and another thread at <http://csscreator.com/node/30243>;.


I hope this helps.

Best regards,

Christophe

>So I have a solution that uses two tables (as several others on the
>web have tried, too). The top table contains the column headers,
>and the lower table functions as the primary data table.
>
>Now putting aside my quest for some better model (as that seems like
>a bad idea), I guess I should modify my question to ask: "How might
>I mark up this scheme properly?"
>
>To take a stab at my own question, it seems I should leave the top
>header table for sighted users, and duplicate the column headers in
>a hidden <th> row in the actual data table. That way, both needs
>are served, but the reader is seeing a fairly typical table.
>
>Here's my basic structure, showing both headers. Assuming this is
>the right approach, it's easy enough to hide to screen reader header
>from sighted users, but what is the best practice for telling screen
>readers to ignore the normal-header? I am just guessing about how
>to do it. Suggestions welcomed.
>
>
><div id="container">
> <table id="headerTable" title="Scrolling header
> for sighted users. Others skip to 'header-for-readers'>
> <tr id="normal-header" >
> <td>Header cell0</td>
> <td>Header cell1</td>
> </tr>
> </table>
> <table id="bodyTable">
> <tr id="Header-for-readers"
> style="display:None;" title="header-for-readers">
> <th>Header cell0</th>
> <th>Header cell1</th>
> </tr>
>
> <tr>
> <td>Data cell0</td>
> <td>Data cell1</td>
> </tr>
> <tr>
> <td>Data cell0</td>
> <td>Data cell1</td>
> </tr>
> </table>
></div>
>
>
>
>
>
>
>
>Moore, Michael wrote:
>>
>>I would just like to add that the only way of getting assistive
>>technology, specifically screen readers, to properly report row and
>>column headers, which seems to be your intent, is to use table markup,
>>with row and column headers defined in the code.
>>
>>Mike
>>
>>