Re: Tables and CSS

On Tuesday 25 December 2001 18:02, Kynn Bartlett wrote:
|   At 11:27 AM +0000 12/25/01, Vadim Plessky wrote:
|   >|   Lemme say that again since it rarely gets said:
|   >|         LAYOUT TABLES DO NOT PRESENT ANY MORE OR LESS A BARRIER TO
|   >|         ACCESS THAN DOES CSS.
|   >
|   >BTW: I don't understand why you try to treat Tables separatly from CSS.
|   >yoy can define
|   >a { display: table }
|   >b { display: table-row }
|   >c { display: table-cell }
|
|   How many assistive technologies will understand the above, and
|   how many will understand <table> tags? :)
|

well, that was just *pure* XML, if assistive technologies can accept XML they 
should accept this example as well.

|   But as you say, <table> tags are just arbitrary elements with
|   CSS table styling pre-applied.  If using tables for layout is evil,
|   then surely so is the above, which is CSS!  You can do just as much

Absolutely!
I just wanted to demonstrate that there is no difference between CSS and 
Tables!
But note that if you take CSS3, it's modular structure allows you to 
implement just part of specification.
And you can have CSS3-enabled browser which *doesn't support* tables!
Besides, Absolute (and Relative) positioning is also different module, so you 
can't rely on it creating *universal* design.
Still constructs like this:

<html>
<style type="text/css">
 #L { float: left; width: 100px; height: 150px; border: 1px solid navy }
 #R { background: silver; color: black; border: 1px dashed orange; 
 width: 60px; height: 80px;
 float: right } 
</style>
<body>
<div id="L">menu on left side</div>
some text, say main article
<div id="R">short notice</div>
</body>
</html>
  
remain very accessible while not using tables.
it should look like this in browser supporting CSS (and 'float' property)
 ______                    ______
 |    L    |   main text   |    R   |      
 |          |                     |          |
 |_____|                     |_____|

while in Lynx every block will, most likely, just follow each other.

Ah, for people who have MS IE6/Windows or MacIE5 I can give better code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<style type="text/css">
 #L { display: inline-block; width: 100px; height: 150px; border: 1px solid 
navy }
 #R { background: silver; color: black; border: 1px dashed orange; 
 width: 60px; height: 80px;
 display: inline-block }
 .article { width: auto;  display: inline-block; height: 150px }
</style>
<body>
<div id="L">menu on left side</div>
<div class="article">some text, say main article</div>
<div id="R">short notice</div>
</body>
</html>

Reason: those 2 browsers support CSS3: display: inline-block; property, which 
greatly simplifies layout for examples like this.
 
NOTE: do not forget to put HTML4 Strict DTD for IE, as otherwise it will not 
work (it will render CSS in broken way)

|   evil with CSS as with <table>, and -- see my other message for a
|   discussion as to why generic tags like <div> are less useful than
|   double-use tags like <table>.

ah, what was the first: chicken or egg? ;-)
|
|   --Kynn

-- 

Vadim Plessky
http://kde2.newmail.ru  (English)
33 Window Decorations and 6 Widget Styles for KDE
http://kde2.newmail.ru/kde_themes.html
KDE mini-Themes
http://kde2.newmail.ru/themes/

Received on Tuesday, 25 December 2001 17:21:32 UTC