|
A great read on tables and using them well...
|
|||||
|
Mike, that's a very good summary, very indepth, well worth a read, but it includes one of the most common misquotes, or incomplete quotes, of the actual W3C position on tables:
:: Quote :: Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media.This is referring to overuse of tables for layout, using tables to contain sliced images, and so on. What it is not referring to is using tables for the basic layout. This is the most relevant W3C position on using tables for layout. Notice how EXTREMELY clear it is on this question: :: Quote :: Checkpoints in this section:
* 3.3 Use style sheets to control layout and presentation. [Priority 2] * 5.3 Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version). [Priority 2] . Layout, positioning, layering, and alignment should be done through style sheets (notably by using CSS floats and absolute positioning): W3C - 11 - Layout, positioning, layering, and alignment Again, since people always seem to miss this section: :: Quote :: Do not use tables for layout unless the table makes sense when linearized.And on this W3C accessability checklist: :: Quote :: And if you use tables (Priority 2)
5.3 Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version). 5.4 If a table is used for layout, do not use any structural markup for the purpose of visual formatting. In case it's not clear, this is what is referred to by using structural markup for visual formatting: :: Quote :: 3.3 Use style sheets to control layout and presentation. [Priority 2]
For example, use the CSS 'font' property instead of the HTML FONT element to control font styles. As you can see from the first misleading quote, what is actually being rejected, absolutely correctly, is the dreamweaver / frontpage type table layouts, which are not able to be linearized, which will not work on a screen reader, and so on. What is explicitly allowed, even by the W3C's own words, which makes you wonder what all those CSS freaks are actually reading, not that I think they ever read this stuff, are simple clean layout tables, arranged in a linear fashion. As you can see from this sample layout, there is no violation of the W3C's own standards at all, linear flow etc. :: Code :: <div id="header">header stuff</div>
<table id="main"> <tr> <td id="leftnav">left nav stuff</td> <td id="content">content stuff</td> <td id="rightbar">right bar stuff</td> </tr> </table> <div id="footer">footer stuff</div> Now lets compare this to one possible layout with CSS :: Code :: <div id="header">header stuff</div>
<div id="rightbar">right bar stuff first, because it's float:right</div> <div id="leftnav">left nav stuff, float left</div> <div id="content">content stuff</div> <div id="footer">footer stuff</div> Note that in this example, the div layout directly violates the W3C's own statements that a layout should make sense when linearized. But you won't hear many CSS types mention that fact. Obviously you can avoid the right float by absolutely positioning the columns, which means you now have to use the standard CSS / P div hack of always having the center content column be longer than the right and left one. Back to top |
|||||
|
well there is actually a way to make divs act like table cells/rows. however, it is not supported by msie thereby making it useless, or at the very least not practical. using
:: Code ::
display: table-cell; or display: table-row; See example Back to top |
|||||
|
All times are GMT - 8 Hours
|
|||||