Why are tables so bad again?
Take a look at this site and refresh my memory:
<!-- m --><a class="postlink" href="http://www.montclairorchids.com/">http://www.montclairorchids.com/</a><!-- m -->
And...
If they are such evil little creatures (as far as design goes), can anyone tell me how to get this SAME type of effect using HTML or XHTML and CSS?
Thanx once again.<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/struct/tables.html">http://www.w3.org/TR/html401/struct/tables.html</a><!-- m -->
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.<!-- m --><a class="postlink" href="http://www.w3.org/TR/WCAG10/">http://www.w3.org/TR/WCAG10/</a><!-- m -->
Using markup improperly -- not according to specification -- hinders accessibility. Misusing markup for a presentation effect (e.g., using a table for layout or a header to change the font size) makes it difficult for users with specialized software to understand the organization of the page or to navigate through it. Furthermore, using presentation markup rather than structural markup to convey structure (e.g., constructing what looks like a table of data with an HTML PRE element) makes it difficult to render a page intelligibly to other devices.Whew. Opening up Pandora's Box, I see.
Well, I'll make it short as to why tables are so "evil:" It requires more HTML coding than a CSS layout, and you have no central control over the layout.
You can recreate the same page in a CSS layout. The biggest problem I've run into is Microsoft Internet Explorer's shoddy implimentation of the full CSS 2.0 spec.
While Mozilla 1/NS 6+ didn't have complete CSS 2 support, those browsers have undergone numerous revisions since their initial release in 2000 (NS 6) and 2001 (Moz). IE6, which is supposed to be standards complaint was released in 2001 with WinXP and has undergone a grand total of...
zero
revisions - as far as its rendering engine is concerned. M$ is far to busy chasing security holes in IE to be concerned with improving CSS support for an already-released product.
So. The big obstacle in the way of CSS design is Internet Explorer and the remaining quirks it has. Oh, and releasing a newer IE for the Mac OS would help to.
So for right now, I'll keep putting the quotes around the word evil, when saying that tables are "evil." Because the tools to exactly recreate many designs in CSS are not quite up to speed (i.e. M$ Internet Explorer).
Now I'll let the rest of the members of the forum debate the details.
Don't get me wrong...I completely understand the accessibility issues of using tables, but is it worth the time and energy to convert everything over to CSS or even to have to start from scratch when implementing our transition to CSS?
Please note the "visual design" of the site I submitted in my original post.
Can this be accomplished using CSS? If so, can someone please lead me in the right direction? I really would like to spend the time learning CSS, but simply do not have it to spare...and since the customer pays the bills, the customer gets what he/she wants.
Thank you.I haven't dug through your code but it looks fairly simple.
1 div as a container. Set width to whatever, then use text-align center and margins:auto on the body to get it centralised.
Insert top pic. insert next menu row down in a div.
With your pics and captions, enclose them in a div and use
float:left (or right).
Use the width:100% feature on all your divs and then you can use the
border-bottom: 1px solid #000099
command.
That's probably about it then.
Do you want me to have a go myself, or do you want to try it first??Thanx!!!
Go ahead and take a swing. Then, perhaps, I can look at the code and try to run with it.
Thanx again to all the brainiacs in this forum who help us little people!!!
Originally posted by stmasi
brainiacs
me??
ahem!!
I'll do it later tonight and probably upload somewhere tomorrow.Thanx again!!!
By the way...
<!-- m --><a class="postlink" href="http://dictionary.reference.com/search?q=brainiac">http://dictionary.reference.com/search?q=brainiac</a><!-- m -->
See...it's most definitely a complement!!!
hahahahathose quotes from the W3C are waaayyy vague...
..how the hell do you "render on non-visual media"? What is a webpage other than visual?
..and how does CSS eliminate horizontal scrolling as opposed to tables?
so basically, it caters to the < 1% of people viewing your webpage?
the only good I see in it is that it somewhat centralizes the control of your layout. tables don't really bloat your code???
i mean, you have to add the whole <style type="text/css"> area to your webpage, build your divs, then put your divs in your html. tell me that's not bloated compared to just using <table><tr>< and <td>.<!-- m --><a class="postlink" href="http://www.emdevelopments.co.uk/stmasi/">http://www.emdevelopments.co.uk/stmasi/</a><!-- m -->
here's the link. It's not perfect, but it gives you the general idea.
And stellar, the reason I use css for layout is cos it improves your search engine rankings - less code, all keywords, less tags being indexed.
Compare the lengths of the code of my version and the original and tell me it's bloated code. Also, if alll your positioning is external, it need only be downloaded once for the entire site. Which speeds up your download time.
Anyway Stmasi, let me know what you think.Talk about fast!!!
Thanx.
However, I see that IE doesn't render it as it is supposed to look. Is that simply IE's inability to do ANYTHING right or is it all browsers?
Thanx.NO, that's IE patchy support for CSS2...how the hell do you "render on non-visual media"? What is a webpage other than visual?Sigh...
HTML is *not* a language for defining an appearence. It is for defining the structure of a document. Read Table rendering by non-visual user agents (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/struct/tables.html#non-visual-rendering">http://www.w3.org/TR/html401/struct/tab ... -rendering</a><!-- m -->) and afterward try to conceive how a non-visual user agent would render a table based layout.Originally posted by stmasi
However, I see that IE doesn't render it as it is supposed to look. Is that simply IE's inability to do ANYTHING right or is it all browsers?
It also has something to do with the fact I tested on IE 5.5 not 6. If you're refering to the space above the white main body, you can remove that by
1)putting the image in the main div instead
or
2)using border-bottom: 1px solid #brownycolorhex on the top div. This would reduce download time and code as well. The only reason I didn't do it was cos I didn't find the hex value of your brown till after I'd done the top one.Originally posted by Jeff Mott
Sigh...
HTML is *not* a language for defining an appearence. It is for defining the structure of a document. Read Table rendering by non-visual user agents (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/struct/tables.html#non-visual-rendering">http://www.w3.org/TR/html401/struct/tab ... -rendering</a><!-- m -->) and afterward try to conceive how a non-visual user agent would render a table based layout.
*sigh
It's a contradiction, don't you see it? You say HTML defines the structure of a document, they say you can't use HTML tables to define the layout of your document.
No, instead they encourage you to use CSS, the language that is meant to define the appearance of your webpage.
I'm sorry, but non-visual agents are a very weak reason to change the way you develop web pages. Only in very specialized situations.
We have a handicap-accessible machine here in the lab, and you know what? It collects dust. It never gets touched because most blind people don't bother to try and use a computer. Computers work on visual interfaces.fine. Use the reason that it's far easier to code a css based web site instead.
Another of Charles favourite reasons is lynx. some 'non visual media' don't render tables at all. Those that do read the left column first, then the right. This means anyone with an audio browser has to listen to your page menu every time before getting to the contents. With css, you define the structure of your document with html, ie the order in which it displays if it fails to render as you would wish it, and use css to arrange how you wish the layout to be.It's a contradiction, don't you see it? You say HTML defines the structure of a document, they say you can't use HTML tables to define the layout of your document.There is no contradiction. Defining structure does not define an appearence. For example, if you were to define a header; should it be in a normal font and all text below it indented? Or should it be bolded and underlined? Or just bolded? Or just underlined? What size should it be? etc. You see the structure really says absolutely nothing about its appearence.
Layout refers soley to the visual design of the page, thus is not the job for a language defining a document's structure, thus is not the job for HTML.I'm sorry, but non-visual agents are a very weak reason to change the way you develop web pages. Only in very specialized situations.If you choose to ignore part of the target audience, there's not much I can do about that. But people with disabilities are not the only reason. Many handheld devices such as cell phones or palms that are now Web capable do not have much more rendering capabilities than a browser for the disabled. Cutting out people with disabilities cuts out the use of these devices as well. CSS is also far more precise in defining visual characteristics. It is, after all, what it was designed to do. A site laid out with CSS is also *far* more maintable than a table based one.Computers work on visual interfacesDisabled people do use normal computers. They simply use additional software to convert a visual display into a text or speech description.
See <!-- m --><a class="postlink" href="http://www.nfb.org/tech/webacc.htm">http://www.nfb.org/tech/webacc.htm</a><!-- m -->
Take a look at this site and refresh my memory:
<!-- m --><a class="postlink" href="http://www.montclairorchids.com/">http://www.montclairorchids.com/</a><!-- m -->
And...
If they are such evil little creatures (as far as design goes), can anyone tell me how to get this SAME type of effect using HTML or XHTML and CSS?
Thanx once again.<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/struct/tables.html">http://www.w3.org/TR/html401/struct/tables.html</a><!-- m -->
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.<!-- m --><a class="postlink" href="http://www.w3.org/TR/WCAG10/">http://www.w3.org/TR/WCAG10/</a><!-- m -->
Using markup improperly -- not according to specification -- hinders accessibility. Misusing markup for a presentation effect (e.g., using a table for layout or a header to change the font size) makes it difficult for users with specialized software to understand the organization of the page or to navigate through it. Furthermore, using presentation markup rather than structural markup to convey structure (e.g., constructing what looks like a table of data with an HTML PRE element) makes it difficult to render a page intelligibly to other devices.Whew. Opening up Pandora's Box, I see.
Well, I'll make it short as to why tables are so "evil:" It requires more HTML coding than a CSS layout, and you have no central control over the layout.
You can recreate the same page in a CSS layout. The biggest problem I've run into is Microsoft Internet Explorer's shoddy implimentation of the full CSS 2.0 spec.
While Mozilla 1/NS 6+ didn't have complete CSS 2 support, those browsers have undergone numerous revisions since their initial release in 2000 (NS 6) and 2001 (Moz). IE6, which is supposed to be standards complaint was released in 2001 with WinXP and has undergone a grand total of...
zero
revisions - as far as its rendering engine is concerned. M$ is far to busy chasing security holes in IE to be concerned with improving CSS support for an already-released product.
So. The big obstacle in the way of CSS design is Internet Explorer and the remaining quirks it has. Oh, and releasing a newer IE for the Mac OS would help to.
So for right now, I'll keep putting the quotes around the word evil, when saying that tables are "evil." Because the tools to exactly recreate many designs in CSS are not quite up to speed (i.e. M$ Internet Explorer).
Now I'll let the rest of the members of the forum debate the details.
Don't get me wrong...I completely understand the accessibility issues of using tables, but is it worth the time and energy to convert everything over to CSS or even to have to start from scratch when implementing our transition to CSS?Please note the "visual design" of the site I submitted in my original post.
Can this be accomplished using CSS? If so, can someone please lead me in the right direction? I really would like to spend the time learning CSS, but simply do not have it to spare...and since the customer pays the bills, the customer gets what he/she wants.
Thank you.I haven't dug through your code but it looks fairly simple.
1 div as a container. Set width to whatever, then use text-align center and margins:auto on the body to get it centralised.
Insert top pic. insert next menu row down in a div.
With your pics and captions, enclose them in a div and use
float:left (or right).
Use the width:100% feature on all your divs and then you can use the
border-bottom: 1px solid #000099
command.
That's probably about it then.
Do you want me to have a go myself, or do you want to try it first??Thanx!!!
Go ahead and take a swing. Then, perhaps, I can look at the code and try to run with it.
Thanx again to all the brainiacs in this forum who help us little people!!!
Originally posted by stmasi brainiacs
me??
ahem!!
I'll do it later tonight and probably upload somewhere tomorrow.Thanx again!!!
By the way...
<!-- m --><a class="postlink" href="http://dictionary.reference.com/search?q=brainiac">http://dictionary.reference.com/search?q=brainiac</a><!-- m -->
See...it's most definitely a complement!!!
hahahahathose quotes from the W3C are waaayyy vague...
..how the hell do you "render on non-visual media"? What is a webpage other than visual?
..and how does CSS eliminate horizontal scrolling as opposed to tables?
so basically, it caters to the < 1% of people viewing your webpage?
the only good I see in it is that it somewhat centralizes the control of your layout. tables don't really bloat your code???
i mean, you have to add the whole <style type="text/css"> area to your webpage, build your divs, then put your divs in your html. tell me that's not bloated compared to just using <table><tr>< and <td>.<!-- m --><a class="postlink" href="http://www.emdevelopments.co.uk/stmasi/">http://www.emdevelopments.co.uk/stmasi/</a><!-- m -->
here's the link. It's not perfect, but it gives you the general idea.
And stellar, the reason I use css for layout is cos it improves your search engine rankings - less code, all keywords, less tags being indexed.
Compare the lengths of the code of my version and the original and tell me it's bloated code. Also, if alll your positioning is external, it need only be downloaded once for the entire site. Which speeds up your download time.
Anyway Stmasi, let me know what you think.Talk about fast!!!
Thanx.
However, I see that IE doesn't render it as it is supposed to look. Is that simply IE's inability to do ANYTHING right or is it all browsers?
Thanx.NO, that's IE patchy support for CSS2...how the hell do you "render on non-visual media"? What is a webpage other than visual?Sigh...
HTML is *not* a language for defining an appearence. It is for defining the structure of a document. Read Table rendering by non-visual user agents (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/struct/tables.html#non-visual-rendering">http://www.w3.org/TR/html401/struct/tab ... -rendering</a><!-- m -->) and afterward try to conceive how a non-visual user agent would render a table based layout.Originally posted by stmasi
However, I see that IE doesn't render it as it is supposed to look. Is that simply IE's inability to do ANYTHING right or is it all browsers?
It also has something to do with the fact I tested on IE 5.5 not 6. If you're refering to the space above the white main body, you can remove that by
1)putting the image in the main div instead
or
2)using border-bottom: 1px solid #brownycolorhex on the top div. This would reduce download time and code as well. The only reason I didn't do it was cos I didn't find the hex value of your brown till after I'd done the top one.Originally posted by Jeff Mott
Sigh...
HTML is *not* a language for defining an appearence. It is for defining the structure of a document. Read Table rendering by non-visual user agents (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html401/struct/tables.html#non-visual-rendering">http://www.w3.org/TR/html401/struct/tab ... -rendering</a><!-- m -->) and afterward try to conceive how a non-visual user agent would render a table based layout.
*sigh
It's a contradiction, don't you see it? You say HTML defines the structure of a document, they say you can't use HTML tables to define the layout of your document.
No, instead they encourage you to use CSS, the language that is meant to define the appearance of your webpage.
I'm sorry, but non-visual agents are a very weak reason to change the way you develop web pages. Only in very specialized situations.
We have a handicap-accessible machine here in the lab, and you know what? It collects dust. It never gets touched because most blind people don't bother to try and use a computer. Computers work on visual interfaces.fine. Use the reason that it's far easier to code a css based web site instead.
Another of Charles favourite reasons is lynx. some 'non visual media' don't render tables at all. Those that do read the left column first, then the right. This means anyone with an audio browser has to listen to your page menu every time before getting to the contents. With css, you define the structure of your document with html, ie the order in which it displays if it fails to render as you would wish it, and use css to arrange how you wish the layout to be.It's a contradiction, don't you see it? You say HTML defines the structure of a document, they say you can't use HTML tables to define the layout of your document.There is no contradiction. Defining structure does not define an appearence. For example, if you were to define a header; should it be in a normal font and all text below it indented? Or should it be bolded and underlined? Or just bolded? Or just underlined? What size should it be? etc. You see the structure really says absolutely nothing about its appearence.
Layout refers soley to the visual design of the page, thus is not the job for a language defining a document's structure, thus is not the job for HTML.I'm sorry, but non-visual agents are a very weak reason to change the way you develop web pages. Only in very specialized situations.If you choose to ignore part of the target audience, there's not much I can do about that. But people with disabilities are not the only reason. Many handheld devices such as cell phones or palms that are now Web capable do not have much more rendering capabilities than a browser for the disabled. Cutting out people with disabilities cuts out the use of these devices as well. CSS is also far more precise in defining visual characteristics. It is, after all, what it was designed to do. A site laid out with CSS is also *far* more maintable than a table based one.Computers work on visual interfacesDisabled people do use normal computers. They simply use additional software to convert a visual display into a text or speech description.
See <!-- m --><a class="postlink" href="http://www.nfb.org/tech/webacc.htm">http://www.nfb.org/tech/webacc.htm</a><!-- m -->