E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

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

Number of posts in this thread: 8 (In chronological order)

From: Moore, Michael
Date: Wed, Jun 18 2008 7:00AM
Subject: Re: Foreign:Re: Making a grid of divs appear as a "table"
No previous message | Next message →

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

From: Austin, Darrel
Date: Wed, Jun 18 2008 10:10AM
Subject: Re: Making a grid of divs appear as a "table"
← Previous message | Next message →

> Does a table always have to be a table, or can anything be marked up
to
> appear (or semantically described) like one?

The only object that would have the semantics of a table would be a
table.

Look into using thead and tbody tags and, via css, allow the tbody to
scroll.

-Darrel

From: brian
Date: Wed, Jun 18 2008 3:10PM
Subject: Re: Foreign:Re: Making a grid of divs appear as a "table"
← Previous message | Next message →

In addition to the suggestions before and below, may I assume you are
familiar with the CSS concepts of assigning a width to a division then
using margin-left: auto; margin-right: auto; ? That way your division
contents will not vary even if the screen dimensions do. Or at least
that's the idea -- depending on what you put in the div, MicroSoft may
render it differently than other browsers.

Which leads to the other caution that if you intend your page to appear
for the general web, you might want to try it on a few browsers and screen
sizes (e.g. Internet Explorer, Firefox, Opera).

Regards,

Grnadpa Brian Case

> 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
>
> <snip>
> 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.
<snip>
> Gareth Dart

<snip>
> All week, I have been trying to create a cross-browser grid with a
> fixed, scrolling header.
>
> While I have come up with a javascript-assisted "fluid width" version
> that is pretty good,
<snip>

From: Tech
Date: Wed, Jun 18 2008 4:30PM
Subject: Re: Making a grid of divs appear as a "table"
← Previous message | Next message →

<!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:  <<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.>></small></tt></big><br>
<pre wrap="">
<big><tt><small>Thank you all for the replies.  </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 <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>

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

From: Christophe Strobbe
Date: Thu, Jun 19 2008 4:00AM
Subject: Re: Making a grid of divs appear as a "table"
← Previous message | Next message →

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

From: Tech
Date: Fri, Jul 11 2008 1:10PM
Subject: Re: Making a grid of divs appear as a "table"
← Previous message | Next message →

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=us-ascii" http-equiv="Content-Type">
<title></title>
</head>
<body bgcolor="#ffffff" text="#000000">
@list,<br>
<br>
Forgive me, but after a Thunderbird mail client upgrade, my email
filters got completely flummoxed. I  never saw any incoming list mail,
and missed all these great responses.  So thank you all for them.   <br>
<br>
My problem regarding a fixed table header is still not resolved.  <br>
<br>
Most solutions to the scrolling header that anyone comes up with is
like this one, which Cristophe points to. <br>
<a class="moz-txt-link-freetext" href="http://danvpeterson.com/aws/sites/my1p/unlocked.html#">http://danvpeterson.com/aws/sites/my1p/unlocked.html#<;/a><br>
<br>
The problem is, that like my solution, his headers are outside the
table completely. He uses DIVS, and I use another table.  <br>
<br>
There simply is no other solution that anyone has found.  ImaPutz and
others look just great,
until you realize that they ONLY work with a fixed widths, and that
they
completely fail in IE7.  A fixed-width table is a more typical data
grid, and there are several solutions for that already.  But it's fluid
table widths that are essential for my application, and are really
attractive for many others.<br>
<br>
So the question I still cannot seem to get some consensus about is:  
Can such a two-part grid be made <i>reasonably </i>acceptable to
assistive devices by simply hiding the inappropriate elements from
either the reader, or a normal page. <br>
<br>
Here's my demo page, showing the entire working solution with the
"normal" header row hidden, and my fixed header visible.  The <br>
body" scrolls under the header, which is the whole point. So is there
anything really wrong with this approach, given that it's the only
cross browser solution that actually works?<br>
<br>
<b><a class="moz-txt-link-freetext" href="http://76.100.0.7:2801/src/z-webpersist/jescrollgrid/demo1min.html">http://76.100.0.7:2801/src/z-webpersist/jescrollgrid/demo1min.html<;/a></b><br>
<br>
<br>
<blockquote
cite="mid: = EMAIL ADDRESS REMOVED = "
type="cite">
<pre wrap="">People have tried this before, but I lost the pointers to the demos
that I had found.
See for example:
* Non-scrolling table header:
<a class="moz-txt-link-rfc2396E" href="http://www.ssi-developer.net/css/non-scrolling-table-hdr.shtml"><http://www.ssi-developer.net/css/non-scrolling-table-hdr.shtml&;gt;</a>,
* Pure CSS Scrollable Table with Fixed Header:
<a class="moz-txt-link-rfc2396E" href="http://www.imaputz.com/cssStuff/bigFourVersion.html"><http://www.imaputz.com/cssStuff/bigFourVersion.html&;gt;</a>
(found through Scrollable Table:
<a class="moz-txt-link-rfc2396E" href="http://www.456bereastreet.com/archive/200410/scrollable_table/"><http://www.456bereastreet.com/archive/200410/scrollable_table/&;gt;</a>);
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:
<a class="moz-txt-link-rfc2396E" href="http://rcswebsolutions.wordpress.com/2007/01/02/scrolling-html-table-with-fixed-header/"><http://rcswebsolutions.wordpress.com/2007/01/02/scrolling-html-table-with-fixed-header/&;gt;</a>
(doesn't work in Opera 9.02: the header also scrolls);
I haven't tested the updated version at
<a class="moz-txt-link-rfc2396E" href="http://rcswebsolutions.wordpress.com/2007/02/17/updated-scrolling-html-table-with-fixed-header/"><http://rcswebsolutions.wordpress.com/2007/02/17/updated-scrolling-html-table-with-fixed-header/&;gt;</a>
* there's also a discussion thread at
<a class="moz-txt-link-rfc2396E" href="http://www.webmaster-talk.com/css-forum/114586-variable-width-scrolling-table-fixed-header.html"><http://www.webmaster-talk.com/css-forum/114586-variable-width-scrolling-table-fixed-header.html&;gt;</a>,
where the code from <a class="moz-txt-link-abbreviated" href="http://www.imaputz.com">www.imaputz.com</a> is also discussed;
* and another thread at <a class="moz-txt-link-rfc2396E" href="http://csscreator.com/node/30243"><http://csscreator.com/node/30243&;gt;</a>.

I hope this helps.

Best regards,

Christophe
</pre>
</blockquote>
<br>
</body>
</html>

From: Keith Parks
Date: Fri, Jul 11 2008 2:30PM
Subject: Re: Making a grid of divs appear as a "table"
← Previous message | Next message →

On Jul 11, 2008, at 12:00 PM, Tech wrote:

> So the question I still cannot seem to get some consensus about
> is: Can such a two-part grid be made reasonably acceptable to
> assistive devices by simply hiding the inappropriate elements from
> either the reader, or a normal page.

It's my understanding that "visibility:hidden" and "display:none" is
not a reliable ways to hide something from display but still have it
be read by screen readers.

(details here <http://css-discuss.incutio.com/?
page=ScreenreaderVisibility>)

Also, scanning through the comments in your source code you mention
hiding the first header from screen readers by CSS. How are you
planning to do that exactly? I was looking for some attributes for
the #hbody, but I must be missing it.

Thanks,

Keith

******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications

http://kparks.deviantart.com/gallery
----------------------------------------------------------

(Objects on your screen may be closer than they appear)

From: Tech
Date: Sat, Jul 12 2008 10:50AM
Subject: Re: Making a grid of divs appear as a "table"
← Previous message | No next message

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body bgcolor="#ffffff" text="#000000">
<font face="Helvetica, Arial, sans-serif"><br>
With respect to my own use of extra table as header?<br>
<br>
I've just noticed that Google, with all their coding horsepower, has
based their Google Doc's dashboard on nearly the same solution, using
dual tables.<br>
You need a gmail account to see google docs. bit of you have it,  take
a look at their "Docs Home" explorer panes.  </font><font
face="Helvetica, Arial, sans-serif"><br>
<a class="moz-txt-link-freetext" href="http://docs.google.com">http://docs.google.com<;/a></font><br>
<font face="Helvetica, Arial, sans-serif"><br>
It looks to be an accessibility nightmare in general,so I  don't feel
so badly, having done all this work now. The only difference between
mine and theirs is that mine can be accessible, and it also actually
works. Note how their date column is squashed by the scroll bar( in all
browsers), no matter how you size the window.  They will never fix that
without throwing out the entire scheme. Which is why they haven't fixed
it, you can be sure.  They probably never noticed until a few months of
work went into this very complex, dynamic page.<br>
<br>
<br>
</font>
</body>
</html>