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