Trying to understand tables vs. all-CSS
Home / Site Building & Testing / Trying to understand tables vs. all-CSS
Hello. A couple years ago I made my first site with "frames." I went to a design forum for help. Everyone said "Frames! Frames are terrible. Switch to tables. Tables are great..." And now they are saying, "Tables! Tables are terrible..."
One fellow even said "accessibilty" was required in the UK and this was very difficult with tables. So I learned CSS. (Last week.) But now that I know my way around CSS--more or less--I am beginning to suspect the 0 table design may be over doing it? And I must say that after surfing several days, I find articles about accessible design to be rather non-accessible. They tend to be long-winded, in fact never to the point, and so I am still left in a haze. (So that's how I came here.)
Yes I understand that nesting tables-within-tables just to achieve a certain placement effect is bad. It is great that CSS now replaces that nonsense.
However, the big question is how to code the navigation margin for best accessibility?
It seems to me that a links margin is semantically appropriate for a "tabular data" field. Also, in my previous SEO-friendly table layout I did this:
<h1 heading><page summary>
<table><tr><td>
<links-left></td><td><main text></td><td><links-right>
</td></tr></table>
Thus, a search engine is immediately presented with an h1 heading and page summary. Secondly, the most important links come on the left in the first table cell--trying to keep these to a minimum so they receive the greatest search engine value AND do not delay access to the main text. Then comes main text. Finally comes all links of secondary importance.
Now of course I don't know, but it seems to me, if I were using an aural reader, this also is how I might best have a page presented. Also, each table cell can be given a "summary" tag as LINKS or MAIN TEXT. Then I would hope, aural readers could be told to skip the dreary links cell when the surfer wants to get immediately to the text.
Well, in reading on accessibilty, I find "comments" can be made for table cells--but so far as I know, there is no such thing for CSS Divs.
ALSO: to achieve the same logical hierachy as before, I must use "absolute positioning" with CSS. But then I must strictly define the margin width. This reduces a major accessibility need of people who want to change the text size.
In conclusion, CSS replaces the nesting of tables. But the basic use of a table for the general layout, it seems to me, is at least equal to CSS if not better. And even if you do not agree with me, here are my questions:
1. Is there any damage to accessibility of: ONE table with 3 cells for the typical 3-column page?
2. Is there any possibility that a couple of years from now, web designers will be saying, "All-CSS? That's terrible! That was just a fad. For accessibilty you've got to have at least one table to separate the links clearly from the main text..."
Share: 
No matter what you try to do in life, you must learn things in order to do it properly. Web design and accessibility are no exceptions from that. There are no shortcuts. If you want to be a good web designer, it takes time and hard work.
It seems to me that you are thinking of the visual presentation first, and then try to force your content into that. Such a method makes it difficult to achieve good accessibility. I'd recommend looking at it from the opposite direction. First create your content (without styling) so that you know it makes sense, that things come in a logical order. Then apply styling to make it look the way you want it.
| krystof wrote: |
| ALSO: to achieve the same logical hierachy as before, I must use "absolute positioning" with CSS. But then I must strictly define the margin width. This reduces a major accessibility need of people who want to change the text size. |
You don't have to use absolute positioning. Floats are often just as effective, sometimes even better.
Define your margin width in ems. That will make them grow or shrink as the user changes his or her text size. Don't use pixels or points.
| krystof wrote: |
| 1. Is there any damage to accessibility of: ONE table with 3 cells for the typical 3-column page? |
Probably not, but there is no compelling reason for using a table either. Learn CSS properly instead. It may be something of a challenge at first, but it's definitely worth it in the long run.
| krystof wrote: |
| 2. Is there any possibility that a couple of years from now, web designers will be saying, "All-CSS? That's terrible! That was just a fad. For accessibilty you've got to have at least one table to separate the links clearly from the main text..." |
Who can predict the future? It seems to me, though, that the separation between structure and presentation that CSS provides is a sign of maturity for web design. Tables for layout were a hack, made necessary by the lack of other formatting abilities in the mid '90s. Now we have CSS, and browsers are getting better and better at supporting it.
_________________
Tommy has left the building
Share:
I agree with what Tommy says above, but would add this:
No, tables aren't all bad for layout, but I'd say use them only if you need to cater for old browsers with poor CSS support (e.g. Netscape Navigator 4). For the same reasons Tommy states above, I'd invest some time in learning how to use CSS for layout - it's here to stay for a long while yet. I've not come across many things that you can't do using CSS over tables, and even the niggles are getting ironed out with increasing CSS support.
_________________
Jon Gibbins :// blogs at dotjay.co.uk, works with Analog.
Share:
Surprised Tommy did not mention it...
I see a problem in your logic as well thinking that the most important links should be on the left and first dealt with... as Tommy saysyou are thinking visually (as did I when I came here).
But if you think logically:
I come to your site by choice, I want info. You offer info on your first page which I read. Now I am done reading, I wish to go to a new page, only now do I need any form of navagation. I choose, I read,I need navagation...
So in theory you need no navagation at all untill after the the content.
Now a screenreader presents the user and the search engine presents the searcher with your content and not your navagation. Nor does the blind user need to sit through a list of links on every page.
Visually you can code your CSS to still place it top left or top horizontal, but markup finds it last. Then it is just a matter fo tweaking, say offering skip links to jump to the nav directly for instance if wished.
The Key to accessibility is thinking around corners, new ways of doing things and not looking at a site as if it must still be layed out in a visual tables/order. We now have the freedom to put anything where we want it visually without reflecting it in the markup. Markup should be written logically.
_________________
Kyle J. Lamson
Analyst/Programmer III, State of Alaska
--
LSW-WebDesign.com & DarkShadow-Designs.com
Share:
I didn't mention it, because there are two camps when it comes to source order. I personally prefer content first and navigation at the end, but I know many others advocate navigation first.
It doesn't really matter all that much, provided to you have a skip/jump link. Of course, with navigation first you'll need a 'jump back' link after the content.
_________________
Tommy has left the building
Share:
Of course, the more content you get towards the top of your source (I do minimal header, content, navigation...), the more relevant page information is towards the top of your source, and therefore more relevant information is harvested by lovely search engine robots. _________________
Jon Gibbins :// blogs at dotjay.co.uk, works with Analog.
Share:
Thank you everyone.
Well it seems clear there is no "plus" to tables for accessibility.
However although I do not know about accessibilty for blind people, I do know about people who just need to enlarge the text size.
Therefore, I may use a single table cell to enclose the entire page, to imitate min-width for IE6. Based on my own experience, min-width is helpful for people who need to toggle to "larger" text view. Otherwise, a 3-column layout can make the text area too narrow when text is enlarged--unless you absolute size the margin link text, which is another bad compromise. I will use SSi so the table can instantly be removed from all pages when IE finally adds min-width.
(3 columns by the way are needed for commercial sites. Often is not feasible to place secondary SEO links and advertising at the bottom where they are not visible.)
Position:absolute is especially tricky for the right margin and even more tricky if you have no min-width. I want anybody to be able to go to any i-cafe, come to my site, and enlarge the text on any typical monitor size. With position:absolute, enlarged text view, and no min-width, the right margin may either disappear under the text or go over it.
Also, for the same reasons, I want at least one of my margins to "float." This way, the text area widens as it goes below the links area.
Therefore--with or without a table--for my goals, it seems unavoidable that at least one links area must appear in the source before the main text. This is the nature of the "float" command.
Now that I know "table" is not helpful, can anybody tell me if one of the following is possible?
1. Perhaps there is some other CSS method that I don't know--that can "float" a links area without preceding text?
2. Or perhaps there is some CSS code that notifies an aural reader "this is a links area"--and then allows the visitor to skip that area if desired?
| TOOLman wrote: |
| ...It doesn't really matter all that much, provided to you have a skip/jump link. Of course, with navigation first you'll need a 'jump back' link after the content. |
Well maybe this is what I need? How does it work? ...wait I think I get it... you mean an "anchor" link... "skip to #..." etc. Thank you!
Share:
You can implement min- and max-widht in IE using expressions. So you don't need a table for that. [ins] I just figured out how to make it work for both IE5 and IE6. [/ins]_________________
Simon Pieters
Share:
See this page for different approaches to standard 3 column layout with CSS: http://webdeveloper.klproductions.com/...
You need to use Gecko browser to follow the discussion (as I use dynamic SS switching), but each example can be made to work in IE 5.5+ (and other more compliant browsers) as well.
Share:
| zcorpan wrote: |
| You can implement min- and max-widht in IE using expressions. So you don't need a table for that. [ins] I just figured out how to make it work for both IE5 and IE6. [/ins] |
I just went through a lengthy discussion of proving in a web designer forum that there is no simple answer for min-width IE except a table:
http://www.webdesignforums.net/...
Please note that I am backed-up in this assertion by email replies I received from two leading specialists: from CSS Play.com (inventor of the only true all-CSS solution) and PositionIsEverything.net (inventor of the Jelly Mold Piefecta JavaScript solution).
IE is used by over 50% of all surfers, so anything that doesn't work in IE is missing the majority. That of course doesn't mean aural readers but it does mean a lot of people with tired eyes.
Share:
| krystof wrote: |
| Sorry zcorpan but whatever you are doing there does not work in my IE6. |
I changed the min-width to 20em to make it clearer._________________
Simon Pieters
Share:
| zcorpan wrote: |
| I changed the min-width to 20em to make it clearer. |
Yes I can see it now! It would me more clear at 30em because the text spans the whole page. I better try this method...
Here is a demo of my own method:
Internet Explorer (IE) min-width problem & "table shell" solution
Share:
| Code: |
| <head><style type="text/css">
div {max-width:40em; min-width:20em; } </style> <!--[if lte IE 6]> <style type="text/css"> div { width:expression( (d = document.compatMode == "CSS1Compat" ? document.documentElement : document.body) && (d.clientWidth > 55 * parseInt(d.currentStyle.fontSize) ? "40em" : d.clientWidth < 28.3 * parseInt(d.currentStyle.fontSize) ? "20em" : "auto")); } /* See for a detailed explanation: http://www.svendtofte.com/code/max_width_in_ie/ */ </style> <![endif]--></head> |
As my window widens in Zcorpan's min-max-width.htm......the max-width does not kick in right away......then suddenly everything snaps back to the "max." So I removed the max-width section.
After experimenting this is the result:
--Changing the "20em" does not seem to do anything in my IE6.
--However if I change the "28.3," that changes the min-width.
--So I just put both numbers the same. Example for 40em minimum:
(d.clientWidth < 40 * parseInt(d.currentStyle.fontSize) ? "40em" : "auto")
This works! In my IE6 anyway. And looks nice and simple! However I hesitate to plunge in with it because:
--Uneasy to use something I don't understand.
--I was just convinced to set my "body" text-size:100% to enable appropriate text-size toggling in IE6 with % text sizing. Otherwise the text zooms from miniscule to huge. However the comments in Zcorpan's min-max-width.htm source say: "Note also that you can't specify font-size for html or body."
--After substantial forum discussions, I have decided that a single table with a single table cell is not a problem. Therefore, my own "table" solution is maybe not as good--but "good enough" and has no unknown factors.
I.e.--Zcorpan's min-width solution is very interesting. However I just doubt that I can take the time to adopt it right now.
| Code: |
Last edited by krystof on 06 Sep 2005 07:27 pm; edited 4 times in total
Share:
You can also create min-width in IE without any hacks or expressions._________________
The Watchmaker Project - my personal blog
29digital Design Studio - freelance web design/development
Share:
| krystof wrote: |
| As the window widens in Zcorpan's min-max-width.htm......the max-width does not kick in right away......then suddenly everything snaps back to the "max." |
| krystof wrote: |
| However I hesitate to plunge in with it because:
--Uneasy to use something I don't understand. I don't even know what an "expression" is. |
| Quote: |
| See
http://www.svendtofte.com/... for a detailed explanation. |
| krystof wrote: |
| --I was just convinced to set my "body" text-size:100% to enable appropriate text-size toggling in IE6 with % text sizing. Otherwise the text zooms from miniscule to huge. |
| krystof wrote: |
| --After substantial forum discussions, I have decided that a single table with a single table cell is not a problem. Therefore, my own "table" solution is maybe not as good--but "good enough" and has no unknown factors. |
_________________
Simon Pieters
Share:
All times are GMT
You cannot post new topics in this forumYou cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum