RE: Linearizing Tables

Dear Kelly,

The quick answer is "Yes, absolutely!"  I am not sure who first pointing
this kind of technique out to me, but the correction is pretty straight
forward:  Nest the tables properly!

I've simplified the actual code here, and actually proposed an initial
condition that is WORSE than what is there.  Graphics and the like could
easily be added as desired.

Problem table code fragment (as is) looks something like this (6 rows, 3
columns):
<TR>
	<TH>Chino</TH>
	<TH>Poplin</TH>
	<TH>Active</TH>
</TR>
<TR>
	<TD>Plain front</TD>
	<TD>Plain front</TD>
	<TD>Ripstop Hikers</TD>
</TR>
<TR>
	<TD>Pleated</TD>
	<TD>Pleated</TD>
	<TD>Cargo Water</TD>
</TR>
<TR>
	<TD>Drawstring</TD>
	<TD>Drawstring</TD>
	<TD>Tactel Adventure</TD>
</TR>
<TR>
	<TD>Cargo</TD>
	<TD> </TD>
	<TD>Knit Sport</TD>
</TR>
<TR>
	<TD> </TD>
	<TD> </TD>
	<TD>Knit Cargo</TD>
</TR>

The simple fix is to use break tags to change this into a table with just
row:
<TR>
	<TD>Chino<BR>
	Plain front<BR>
	Pleated<BR>
	Drawstring<BR>
	Cargo</TD>
	<TD>Poplin<BR>
	Plain front<BR>
	Pleated<BR>
	Drawstring<BR>
	Active<BR>
	Ripstop Hikers<BR>
	Cargo Water<BR>
	Tactel Adventure<BR>
	Knit Sport<BR>
	Knit Cargo</TD>
</TR>

This does not present well for some application (especially with graphics,
as is the case with Lands' End) so then the trick is to use properly nested
tables.  Each cell should get a table which is a single column, but multiple
rows.  The outside table has only one row.
<TR>
	<TD>
		<TABLE>
			<TR>
				<TH>Chino</TH>
			</TR>
			<TR>
				<TD>Plain front</TD>
			</TR>
			<TR>
				<TD>Pleated</TD>
			</TR>
			<TR>
				<TD>Drawstring</TD>
			</TR>
			<TR>
				<TD>Cargo</TD>
			</TR>
		</TABLE>
	</TD>
	<TD>
	<TD>
		<TABLE>
			<TR>
				<TH>Poplin</TH>
			</TR>
			<TR>
				<TD>Plain front</TD>
			</TR>
			<TR>
				<TD>Pleated</TD>
			</TR>
			<TR>
				<TD>Drawstring</TD>
			</TR>
		</TABLE>
	</TD>
	<TD>
		<TABLE>
			<TR>
				<TH>Active</TH>
			</TR>
			<TR>
				<TD>Ripstop Hikers</TD>
			</TR>
			<TR>
				<TD>Cargo Water</TD>
			</TR>
			<TR>
				<TD>Tactel Adventure</TD>
			</TR>
			<TR>
				<TD>Knit Sport</TD>
			</TR>
			<TR>
				<TD>Knit Cargo</TD>
			</TR>
		</TABLE>
	</TD>
</TR>

The Lands' End site uses nested tables, but does not do so properly, that
is, they don't ensure that the content linearlizes correctly.  Checkpoint
5.3 REALY should be P1.

A tough question is how could GUI authoring UA facilitate this kind of
approach?



> -----Original Message-----
> From: w3c-wai-ig-request@w3.org [mailto:w3c-wai-ig-request@w3.org]On
> Behalf Of Kelly Ford
> Sent: Sunday, April 09, 2000 11:15 AM
> To: w3c-wai-ig@w3.org
> Subject: Linearizing Tables
>
>
> Hi All,
>
> Perhaps this is detailed in a techniques document someplace so
> pointers are
> appreciated.  Further I'm not an expert on HTML coding as much as I am on
> figuring out how to handle whatever web pages toss my way.  I have a
> question about techniques for coding tables so they linearize correctly.
>
> Below is an example of how a table from Lands' End reads in JFW and
> Window-Eyes.  Is there a way to code this table so it still looks
> the same
> visually but so the column headings of Chino, Poplin and Active would
> appear in better locations when the table is linearized by the
> web browser
> and screen reader?
>
>
> The word "link" appears in front of anything that's a link and the word
> "graphic" in front of anything that's a picture.
>
> This is roughly how one section of the Men's Shorts page appears in
> Window-Eyes or JFW.  Lands' End uses this same layout for all
> their product
> pages.
>
http://www.landsend.com/cd/frontdoor/0,2084,CAT_men_6_31____,00.html

Chino
Poplin
Active

Link Graphic Plain-front
Link Graphic Plain-front
Link Plain-front
Link Graphic Pleated
Link Pleated
Link Graphic Drawstring
Link Drawstring
Link Graphic Cargo
Link Cargo
View Thumbnails...
Link Graphic Plain-front
Link Graphic Plain-front
Link Plain-front
Link Graphic Pleated
Link Pleated
Link Graphic Drawstring
Link Drawstring
View Thumbnails...
Link Graphic Ripstop Hikers
Link Graphic Ripstop Hikers
Link Ripstop Hikers
Link Graphic Cargo Water
Link Cargo Water
Link Graphic Tactel Adventure
Link Tactel Adventure
Link Graphic Knit Sport
Link Knit Sport
Link Graphic Knit Cargo
Link Knit Cargo
View all...

Received on Monday, 10 April 2000 12:35:51 UTC