Tables vs. CSS from a philosophical perspective

[sunwukung]

Hello to the W3 forum. This is my first post here, having recently decided to study CSS/html in an effort to add to my skillset as an artist. (here's my first site btw - my homepage http://www.sunwukung.co.uk/)Reading O-Reilly's HTML/CSS book, I came across a chapter that loosely states the following regarding page design. Use HTML/CSS as ADVICE to the browser as to how it renders your page, not as a set of rules. What occurred to me is how my site (and others) look WITHOUT CSS being applied. In some instances, the user may disable styles, or use a browser that can't utilise the CSS - resulting in a style-less page rendering sequentially and without layout. My question, therefore, is which is the better method for layout from a philosophical perspective. Should we markup pages that will render layout regardless of CSS, and apply CSS rules as a luxury - or accept that users who disable styles are not interested in layout anyway and let them read the page as is?My personal feeling is that CSS - while fiddly - seems more of a pure solution, and one that affords easier maintenance for the author - so it's my personal preference for styling choices.

[newseed]

Tables are cumbersome especially when it comes to accessibility for various types of users with disabilities. So using CSS is highly recommended (although not a law) for this reason and the reason you stated.

[sunwukung]

when you say cumbersome, what do you mean? Wouldn't a table preserve the layout on a pure html site with all styles disabled? Or is the problem to do with screenreader software?

[newseed]

The table structure has to be determined by the browser first before it can load anything. You will have to create multiple tables to achieve the same visual layout as a div layout. In many cases, nested tables are needed which can be cumbersome when it comes to managing the codes.This...<div>content here</div>...is much better than this...<table> <tr> <td>content here </td> </tr></table>You can check a table version of this site and a css version of the same site. Compare the source codes and ask yourself which one is cleaner and more managable.This is also a good read: Why Tables Layout Are StupidRedesign an existing table site is cumbersome. Using pure CSS layouts, you can change the entire look and struture of the site by just changing the CSS file. If you read the article above, be sure to check out CSS Zen Garden which can show you serveral types of layouts using CSS but using the same (unchanged) HTML code.Don't forget those with disabilities.The only drawback I see with CSS is the required time to learn it. Once you have adequate knowledge of CSS, it becomes much easier and faster to build websites.

[sunwukung]

I agree entirely - that's why my own site is put together with <div>s and css styling (take a look at the link in my OP). It's definitely an easier task to modify and control the layout (from my limited experience) - and I intend to continue using that method since that's the method I've learnt and personally prefer. I'm aware of the accessibility and workflow arguments and have tried to ensure that my site validates to W3Cstandard - so I'm certainly not a standards/CSS denier!! What I was interested in was not the technical advantages of using CSS, but rather the design quandiary that in the absence of CSS a page loses any layout defined by it. I gather that table based layout confuses screen readers which may read the table in an order not intended by the author. Is that the case? Then again, many browsers are set to disable tables, which would destroy the page I guess.

[newseed]

The ideal way of ordering (or reading order) is to set the HTML (or XHTML) in the order you desire where if one should read the page without CSS enabled. You then can use the CSS to visually style it to look as you would like it to appear for those that do have CSS enabled. For example. you may have a navigation menu that you would like to appear at the top of every page for those that have CSS enabled. However, you may not wan the menu on top but instead at the bottom of every page for those that uses screen readers. Screen readers will read the menu everytime on every page if coded to appear at the top via HTML. This is not ideal and so instead you can code your menu in the HTML to be at the bottom but use CSS to place it at the top and then everybody is happy!Back in the early days of websites, tables were never used except for tabular data.You can inline style anything whether it be tables or div but then that will defeat the purpose of using extenal style sheet. I didn't know you can turn off tables?

[sunwukung]

you can code your menu in the HTML to be at the bottom but use CSS to place it at the top and then everybody is happy!

That's an interesting point - cheers! I've been using the web developer toolbar for FF, and deactivating the styles for the page made me consider the consequences of the user choosing to do the same. Your post has reminded me to consider the document flow before the design layout.

I didn't know you can turn off tables?

I read it in passing on another site with regards to accessibility, the link escapes me - I'm not sure that it can be done either. Forgive my ignorance, I'm a noob - and have yet to do battle in the arena of cross browser bug fixing.

[jlhaslip]

table { display:none; } works to remove tables

[newseed]

table { display:none; } works to remove tables

That one I knew but he was implying that 'many browsers' have tables turned off by default.