Css vs Tables

Diceicle

Hi

I just wanted to get some opinions on the use of tableless CSS layouts vs Tabled layouts.
What are the pros and cons of using a tableless CSS layout compared with the more traditional tabled layout?
I've read some pieces claiming that going Tableless can lead to problems with IE displaying the page.

Any thoughts?

Pixelcraft

there is no VS. CSS is the only option for a professional site. Tables were used in the passed, as the web was relatively new and not fully understood. Nowadays they should only be used to tabular data.

Axwell

Hundred of posts on this on here to be honest if you look back. As pixelcraft said there really isnt any debate, tables should be only used for tabular data and css should be considered the standard method now.

elyod

As well as tabular data, I think using a table to layout a form is perfectly acceptable.

tricky D

The advantages of CSS are implementing site-wide changes via one file (or just a few). It also separates content from layout and styling, filesizes are reduced, accessibility features implmentation, consistency and a very small SEO advantage. changes in table layouts and font tag-based typography means all the pages need editing or good finding and replacing.

Diceicle wrote: »

I've read some pieces claiming that going Tableless can lead to problems with IE displaying the page.

Ironically, it's IE that has problems with CSS due to Microsoft's 'unique' implementation of the 'box model'. Easily solved/worked around though.

elyod wrote: »

As well as tabular data, I think using a table to layout a form is perfectly acceptable.

If you're using CSS for layout, it should be trivial to do likewise for form layout.

ScumLord

I feel your pain. Tables made making up a webpage fairly straight forward, you could just draw the thing out, css and divs are a pain in the hole if you don't like coding stuff by hand. I even downloaded a trial of dreamweaver and it wasnt much more help.

Liam Byrne

elyod wrote: »

As well as tabular data, I think using a table to layout a form is perfectly acceptable.

No need, when you can use labels to do it even better.

Plus, with a name like "label" it's pretty intuitive.

Try placing a fieldset inside a table! :eek:

kevteljeur

There really isn't any good reason to use tables for layout. CSS can do it all easily, and the few things where it has some issues can be resolved with, for example, JQuery to plug those holes. If you're still using tables, the web is going to leave you behind along with Flash intros and <blink>...



.

mewso

elyod wrote: »

As well as tabular data, I think using a table to layout a form is perfectly acceptable.

Assuming accessibility is not an issue for your visitors.

mewso

I should add that of course tables are as has been said best used for tabular data but it's still important to use them correctly. i.e. using thead and th (<th scope="col">) for their headers and then for the actual data tbody. I think it's something easily missed coming from a "table for layouts" background because in general you'll just have used a td for all cells.

elyod

musician wrote: »

Assuming accessibility is not an issue for your visitors.

Using CSS does not by default mean your site ticks all the boxes in terms of accessibility, i.e. screen readers etc.

mewso

elyod wrote: »

Using CSS does not by default mean your site ticks all the boxes in terms of accessibility, i.e. screen readers etc.

No but using tables to layout a form will almost certainly fail to tick those boxes which was my point. Seriously I quote your line about tables and forms. What part made it look like I was talking about anything other than using tables for form layout?

Placebo

i generally end up using tables for forums, as its easy and quick
can some one give me a quick css examples for setting up a form,

would you use several divs?

S.M.B.

Placebo wrote: »

i generally end up using tables for forums, as its easy and quick
can some one give me a quick css examples for setting up a form,

would you use several divs?

Just style your labels and inputs to appear as you'd like. No need for a series of divs.

Axwell

Placebo wrote: »

i generally end up using tables for forums, as its easy and quick
can some one give me a quick css examples for setting up a form,

would you use several divs?

http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml

mewso

Fieldset and labels folks come on - http://www.sitepoint.com/article/fancy-form-design-css/

lucideer

If your having difficulty using just fieldsets and labels to layout forms, you can try definition lists like (can be a little easier for some people in certain cases):
[HTML]<dl>
<dt><label for="name">Name:</label></dt>
<dd><input type="text" id="name"/></dd>
<dt><label for="number">Number:</label></dt>
<dd><input type="text" id="number"/></dd>
</dl>[/HTML]

It's a little more markup, which is never good. Using just labels is far cleaner, but some might find this a helpful crutch when moving away from tables.

For any more on using tables for laying out webpages, this site has a lot of very useful advice: http://shouldiusetablesforlayout.com

p

display: table; is supported by IE8, that helps a lot, but will solve any form related issues and make CSS layouts a bit easier (albeit 6 years too late! )

Eoin

Diceicle wrote:

What are the pros and cons of using a tableless CSS layout compared with the more traditional tabled layout?

The main con which nobody has mentioned is that CSS has a much steeper learning curve, especially for those of us who started learning HTML when tables were completely acceptable to use for layout.

CSS is a pain in the hole to learn, and isn't always the most intuitive - especially as for people who are more design than programming orientated. Without wanting to start a yawn-fest about Internet Explorer, it doesn't always appear the same in all browsers, while a correctly marked up table usually does appear pretty consistently.

This is the type of stuff you need to just accept and adapt to - and you basically just to roll with it. It's so easy to think "feck it" and do the layout in tables and style text elements etc with CSS, but you just have to persevere with CSS for the layout.

As elyod said, don't fall into the trap of thinking that a CSS layout site is automatically accessible or usable. I think the W3C site is a good example of a CSS styled site that isn't that nice to use, while google.com which uses tables (and even fails the validator) is a lesson in usability.

lucideer wrote: »

For any more on using tables for laying out webpages, this site has a lot of very useful advice: http://shouldiusetablesforlayout.com

No it doesn't.

Placebo

in some cases, a table for the structure then div's inside works well. IMHO
also can only use tables for html emails.

Eoin

placebo wrote:

in some cases, a table for the structure then div's inside works well. IMHO

It can work, but it's not the correct way to do it. It's tempting, but not the way forward.

placebo wrote:

also can only use tables for html emails.

What do you mean? Referencing an external CSS file might cause security messages, but you can just put the CSS in the head tag instead.

Placebo

cant use div's in html emails, can only use inline css, and only some attributes are available.

mewso

eoin wrote: »

What do you mean? Referencing an external CSS file might cause security messages, but you can just put the CSS in the head tag instead.

Trust me I've been there. You have to step back 10 years to create html emails that will look ok in almost any client. Doing emails in plain text is probably preferable but then many people want to fancy them up.

tricky D

Always tables for layout in emails, css only for typographical treatment and nothing too fancy at that. Far too many email renderers can't handle it layout-wise.

Eoin

Ah, I didn't realise that - I've kept email newsletters to a logo and styled text at most.

lucideer

eoin wrote: »

The main con which nobody has mentioned is that CSS has a much steeper learning curve, especially for those of us who started learning HTML when tables were completely acceptable to use for layout.

CSS is a pain in the hole to learn

For someone who started learning HTML the tables way, yes. It's hard to teach an old dog new tricks and so forth. This is the same with the use of ASP today - people don't want to have to spend time learning modern web-oriented technologies so they fall back on what they know (C#, J#, VB, whatever). However, if you're learning from scratch, PHP is far easier to learn than C, and similarly CSS is far far easier to learn that the quirks of table layout.

This is precisely the reason 99.9% of table layouts are generated, with complex image slicing, hugely bloated repeated inline styling attributes, etc., tables are vastly vastly more complex and difficult to create than CSS layouts. The only reason they're used is if you're stuck with a very old generator (Frontpage :mad: ) or if you learned HTML in the early 90s and have since refused to adapt to modern methods.

The steep learning curve of CSS is a complete myth. IE's quirks certainly don't help, learning your way around hasLayout is tricky at the best of times, but comparing it's simplicity to creating grid based table layouts is insane.

ScumLord

lucideer wrote: »

For someone who started learning HTML the tables way, yes. It's hard to teach an old dog new tricks and so forth. This is the same with the use of ASP today - people don't want to have to spend time learning modern web-oriented technologies so they fall back on what they know (C#, J#, VB, whatever). However, if you're learning from scratch, PHP is far easier to learn than C, and similarly CSS is far far easier to learn that the quirks of table layout.

This is precisely the reason 99.9% of table layouts are generated, with complex image slicing, hugely bloated repeated inline styling attributes, etc., tables are vastly vastly more complex and difficult to create than CSS layouts. The only reason they're used is if you're stuck with a very old generator (Frontpage :mad: ) or if you learned HTML in the early 90s and have since refused to adapt to modern methods.

The steep learning curve of CSS is a complete myth. IE's quirks certainly don't help, learning your way around hasLayout is tricky at the best of times, but comparing it's simplicity to creating grid based table layouts is insane.

CSS isn't any harder to learn (typing it out) than HTML was in it's day the big difference with tables was you could get an editor and just draw them on the page. You only really needed to know HTML as a backup to the editor. You can't do that with CSS from what I've seen.

lucideer

ScumLord wrote: »

you could get an editor...
You can't do that with CSS from what I've seen.

Yeah, you're right. CSS is far easier to write than tables, but the editor support is poor. I've never used generators myself, so I'm not up to date on support of most modern editors. I've the newest ExpressionWeb here 'cos I got a free copy, but it's useless compared to what I can hand write in half the time. Dunno if Dreamweaver/KompoZer are any better.

gimme5minutes

lucideer wrote: »

For someone who started learning HTML the tables way, yes. It's hard to teach an old dog new tricks and so forth. This is the same with the use of ASP today - people don't want to have to spend time learning modern web-oriented technologies so they fall back on what they know (C#, J#, VB, whatever). However, if you're learning from scratch, PHP is far easier to learn than C, and similarly CSS is far far easier to learn that the quirks of table layout.

This is precisely the reason 99.9% of table layouts are generated, with complex image slicing, hugely bloated repeated inline styling attributes, etc., tables are vastly vastly more complex and difficult to create than CSS layouts. The only reason they're used is if you're stuck with a very old generator (Frontpage :mad: ) or if you learned HTML in the early 90s and have since refused to adapt to modern methods.

The steep learning curve of CSS is a complete myth. IE's quirks certainly don't help, learning your way around hasLayout is tricky at the best of times, but comparing it's simplicity to creating grid based table layouts is insane.

Yeah, cant see what the big deal is with CSS. Its about as simple as you can get when it comes to a computer language other than HTML. The only issue is tweaking stuff to make it work across browsers.