WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Tech
Date: Jun 18, 2008 4:30PM


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=us-ascii" http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
<big><tt><small><br>
<br>
<br>
Gareth writes:&nbsp; &lt;&lt;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.&gt;&gt;</small></tt></big><br>
<pre wrap="">
<big><tt><small>Thank you all for the replies.&nbsp; </small></tt></big>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.

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 &lt;th&gt; 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.


&lt;div id="container"&gt;
&lt;table id="headerTable" title="Scrolling header for sighted users. Others skip to 'header-for-readers'&gt;
&lt;tr id="normal-header" &gt;
&lt;td&gt;Header cell0&lt;/td&gt;
&lt;td&gt;Header cell1&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;table id="bodyTable"&gt;
&lt;tr id="Header-for-readers" style="display:None;" title="header-for-readers"&gt;
&lt;th&gt;Header cell0&lt;/th&gt;
&lt;th&gt;Header cell1&lt;/th&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td&gt;Data cell0&lt;/td&gt;
&lt;td&gt;Data cell1&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Data cell0&lt;/td&gt;
&lt;td&gt;Data cell1&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/div&gt;



</pre>
<br>
<br>
<br>
Moore, Michael wrote:
<blockquote
cite="mid: <EMAIL REMOVED> "
type="cite">
<pre wrap="">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

-----Original Message-----
From: <a class="moz-txt-link-abbreviated" href="mailto: <EMAIL REMOVED> "> <EMAIL REMOVED> </a>
[<a class="moz-txt-link-freetext" href="mailto: <EMAIL REMOVED> ">mailto: <EMAIL REMOVED> </a>] On Behalf Of Gareth Dart
Sent: Wednesday, June 18, 2008 3:22 AM
To: WebAIM Discussion List
Subject: Foreign:Re: [WebAIM] Making a grid of divs appear as a "table"

Hello, and welcome to the list.

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. Don't make the mistake (as many people do, with the
noblest intentions) of confusing the tenet 'tables should not be used
for page layout' with 'tables should not be used full stop'. Tables can
and should be used when they are the appropriate tool for the job, and
it sounds like they are for your purposes.

Cheers,

G

Gareth Dart
Web Developer
Higher Education Statistics Agency (HESA)
95 Promenade, Cheltenham, Gloucestershire GL50 1HZ
T 01242 211128 F 01242 211122 W <a class="moz-txt-link-abbreviated" href="http://www.hesa.ac.uk">www.hesa.ac.uk</a>
<a class="moz-txt-link-rfc2396E" href="http://www.hesa.ac.uk/">&lt;http://www.hesa.ac.uk/&;gt;</a>