E-mail List Archives
Thread: Using tables for layout
Number of posts in this thread: 10 (In chronological order)
From: Savin, Jill
Date: Mon, Feb 23 2004 9:12AM
Subject: Using tables for layout
No previous message | Next message →
Aren't there some specific tags you can put into tables in html to clarify
whether it is a 'layout' table or a 'content' table? And does this make it
so you can still use tables for layout and be section 508 compliant?
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/
From: Tim Beadle
Date: Mon, Feb 23 2004 9:49AM
Subject: Re: Using tables for layout
← Previous message | Next message →
On Mon, Feb 23, 2004 at 11:05:22AM -0500, Savin, Jill wrote:
> Aren't there some specific tags you can put into tables in html to clarify
> whether it is a 'layout' table or a 'content' table?
IIRC, all the guidelines say re. data vs layout tables is about using proper
colgroup, thead, tfoot, tbody markup (if applicable) when it's definitely a
data table.
Other than putting meaningful titles in your <table> tag (e.g. title="main
content" or title="site navigation"), there's nothing you can do to say "this
is a layout table", AFAIK.
> And does this make it
> so you can still use tables for layout and be section 508 compliant?
In a nutshell, yes. Read what Joe Clark says about it in his book:
http://www.joeclark.org/book/sashay/serialization/Chapter10.html
Tim
--
"Remember: When you buy music you're helping lawyers sue 12 year old girls."
-- Alex Grant
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/
From: julian.rickards
Date: Mon, Feb 23 2004 9:56AM
Subject: RE: Using tables for layout
← Previous message | Next message →
To a certain extent, there are specific tags you shouldn't use if your table
is for layout, the <th> tags.
There is a movement away from tables for layout but tables are still much
easier to use to create multicolumned layout for many/most people. I suggest
you reduce the use of tables where possible. For example, if you have a two
column layout, use a two cell table. If you would normally use a nested
table in the left cell to create a "list" of links for navigation purposes,
drop the nested table and use an unordered list with styles instead.
Ultimately, you may end up with only one two celled table as the only table
on a page (for layout purposes) with the rest of the content arranged using
CSS.
Jules
---------------------------------------------------------
Julian Rickards
Digital Publications Distribution Coordinator
Publications Services Section
Ontario Ministry of Northern Development and Mines
Phone: (705) 670-5608
Fax: (705) 670-5690
>
From: Savin, Jill
Date: Mon, Feb 23 2004 11:52AM
Subject: RE: Using tables for layout
← Previous message | Next message →
<snip> "If you would normally use a nested
table in the left cell to create a "list" of links for navigation purposes,
drop the nested table and use an unordered list with styles instead.
Ultimately, you may end up with only one two celled table as the only table
on a page (for layout purposes) with the rest of the content arranged using
CSS."
But isnt one of the basic rules that web pages have to be readable without
using CSS? I have a paper with this statement"
"Documents shall be organized so they are readable without requiring an
associated style sheet."
Or when they say 'documents', do they mean like if you added a word document
to the web page?
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/
From: Christopher Phillips
Date: Mon, Feb 23 2004 12:02PM
Subject: Re: Using tables for layout
← Previous message | Next message →
> But isnt one of the basic rules that web pages have to be readable
> without
> using CSS? I have a paper with this statement"
Yes, this is a rule and it is not validated by the statement you
referenced:
> <snip> "If you would normally use a nested table in the left cell to
> create a "list" of links for navigation purposes, drop the nested
> table and use an unordered list with styles instead. Ultimately, you
> may end up with only one two celled table as the only table on a page
> (for layout purposes) with the rest of the content arranged using
> CSS."</snip>
The author is talking about using a list as defined by the HTML markup,
CSS would then only be used for the format the list, but if the CSS
didn't load, the menu would still appear as a structured list for the
menu. It is especially important to make sure the content is presented
in a logical order (i.e. content before navigation- or visa versa,
depending on your perspective) independent of the style sheet.
Christopher
Institute for Community Inclusion
Curb Cut Learning
http://www.communityinclusion.org/curbcut/
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/
From: Sandy Clark
Date: Mon, Feb 23 2004 12:03PM
Subject: RE: Using tables for layout
← Previous message | Next message →
Layout is not content. Layout is presentation. Therefore, a web page can
still be readable even without CSS applied if all the information is still
available. It might not look pretty, but it's the content that is important
in accessibility, not necessarily the visual layout.
From: Paul Bohman
Date: Mon, Feb 23 2004 12:09PM
Subject: Re: Using tables for layout
← Previous message | Next message →
Of course documents should be readable without style sheets enabled.
This does not mean that style sheets are bad though. Quite the contrary.
When you use (X)HTML and style sheets properly, you can still read the
content with or without styles enabled.
In the case of WebAIM.org, for example, the top menu is an ordered list.
To the visual user, with styles enabled, this menu looks like tabs that
go across the page horizontally. You can't tell that this is a list.
When you turn the styles off, though, the fact that this is a list in
the code becomes immediately obvious.
The reason for marking up our tabs like this is that visual users see
the tabs and in their minds they group these items as a list of main
menu options. They may not think that they are organizing them in a
bulleted or numbered list per se, but that's essentially what's
happening. They see a group of 5 tabs and they immediately realize that
this is a menu list of five items.
By using markup that makes this a true list, this allows screen reader
users to group the menu items in a list just like visual users do.
CSS allows you to display lists visually in ways that can be manipulated
any way you like. In the case of WebAIM, we wanted to make our list look
like graphical tabs, and we wanted them to display horizontally across
the top of the page.
See http://www.webaim.org/techniques/articles/boring for a brief writeup
about a few CSS designs, including the WebAIM site.
Savin, Jill wrote:
> <snip> "If you would normally use a nested
> table in the left cell to create a "list" of links for navigation purposes,
> drop the nested table and use an unordered list with styles instead.
> Ultimately, you may end up with only one two celled table as the only table
> on a page (for layout purposes) with the rest of the content arranged using
> CSS."
>
> But isnt one of the basic rules that web pages have to be readable without
> using CSS? I have a paper with this statement"
>
> "Documents shall be organized so they are readable without requiring an
> associated style sheet."
>
> Or when they say 'documents', do they mean like if you added a word document
> to the web page?
>
>
> ----
> To subscribe, unsubscribe, suspend, or view list archives,
> visit http://www.webaim.org/discussion/
>
>
--
Paul Ryan Bohman
Web Accessibility Specialist/Project Coordinator
WebAIM (Web Accessibility in Mind)
www.webaim.org
Center for Persons with Disabilities
www.cpd.usu.edu
Utah State University
www.usu.edu
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/
From: julian.rickards
Date: Mon, Feb 23 2004 12:13PM
Subject: RE: Using tables for layout
← Previous message | Next message →
Yes, that is true that web pages (which are the documents that they are
referring to) must be readable without requiring an associated style sheet.
However, you are not adding information when you style something with CSS,
you are just prettying it up. Navbars are considered lists of links.
Therefore, start out with a list of links for your navbar such as:
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
</ul>
Then you could use something like:
<style type="text/css" rel="stylesheet">
<!--
ul {
background-color: #00F;
}
li {
color: #FFF;
}
-->
</style>
and other styles to style it. By taking the margins out, setting the width
of <li> and <a> to 100%, you create a link that appears to be somewhat like
a table cell. For example, the links down the left side of my personal web
site http://jrickards.ca/resume uses an unordered list where the <ul>, <li>
and <a> all have been styled so that it is somewhat like box (table cell).
When the styles are off, the person simply sees a list of links.
---------------------------------------------------------
Julian Rickards
Digital Publications Distribution Coordinator
Publications Services Section
Ontario Ministry of Northern Development and Mines
Phone: (705) 670-5608
Fax: (705) 670-5690
>
From: Cheryl D. Wise
Date: Mon, Feb 23 2004 12:17PM
Subject: RE: Using tables for layout
← Previous message | Next message →
If you use a list in a column for navigation and style it with CSS it is
still perfectly useable without css. The formatting will change and it will
look like a bulleted list but it is still functional.
Assuming you use structured mark-up in your code all the content will be
readable and usable just plain and displayed in the order it is written in
the code. Great example is to look at CSS Zen Garden http://zengarden.com
with CSS and without. Without it is a very, very plain XHTML page but
perfectly functional. With CSS it is a graphically rich and usually very
attractive page. (I say usually only because I personally don't like all the
designs.)
Cheryl D. Wise
Certified Professional Web Developer
MS-MVP-FrontPage
www.wiserways.com
mailto: = EMAIL ADDRESS REMOVED =
713.353.0139 Office
From: Tim Beadle
Date: Tue, Feb 24 2004 9:03AM
Subject: Re: Using tables for layout
← Previous message | No next message
On Mon, Feb 23, 2004 at 01:09:55PM -0600, Cheryl D. Wise wrote:
> If you use a list in a column for navigation and style it with CSS it is
> still perfectly useable without css. The formatting will change and it will
> look like a bulleted list but it is still functional.
>
> Assuming you use structured mark-up in your code all the content will be
> readable and usable just plain and displayed in the order it is written in
> the code. Great example is to look at CSS Zen Garden http://zengarden.com
> with CSS and without. Without it is a very, very plain XHTML page but
> perfectly functional. With CSS it is a graphically rich and usually very
> attractive page. (I say usually only because I personally don't like all the
> designs.)
Just don't expect to be able to support Netscape 4 with the visual
formatting!
It's better to give NN4 little or no CSS than to try to make it understand,
because its CSS support is horribly broken:
http://alistapart.com/articles/netscape/
Many of these new, accessible-yet-visually-rich methods demand that you
don't try to make them display exactly the same in older browsers. Because
it's just HTML underneath, however, the structure is still evident and the
site still works.
Tim
--
"DOS Computers manufactured by companies such as IBM, Compaq, Tandy, and
millions of others are by far the most popular, with about 70 million
machines in use worldwide. Macintosh fans, on the other hand, may note that
cockroaches are far more numerous than humans, and that numbers alone do not
denote a higher life form." -- New York Times, November 26, 1991
----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/