Table vs CSS-based layouts for web pages

Question

Hi,

I use HTML templates for my website from sites that sell templates as I'm not a designer and would like something ready, I use Rails for my development. I noticed that some sites design their templates as "Tableless" by using CSS and absolute posistioning of components in the page. I'm actually used to using tables in my pages.

What is you opinion about that? are there real advantages of not using tables?

Cheers,

Tam

Answer 1

The short answer is that you should use tables for tabular data ( and not layout, see here why ), otherwise you use the right element for the right purpose, p for paragraphs, div for meaningful division ( don't abuse divs ), et cetera. Each element serves a purpose and you should use w3.org to look things up.

That being said, there are some people who still have the wrong frame of mind in CSS, you should avoid layouts that are completely reliant upon absolute positioning and pixel perfect abuse, instead rely on fluid, em-based layouts when you can as these are more adaptable to different screen resolutions and environments.

Other benefits of using proper semantically marked up HTML and CSS would be that you control all styles from the style-sheet, so that results in less tag soup code ( smaller file size ) and you only have to worry about updating content, not layout inside the markup [ separation of presentation ( css ) from behavior ( js ) and content ( html ) ].

Answer 2

Real advantages of not using tables

1. Faster page loading
2. Lowered hosting costs
3. Redesigns are more efficient
4. Redesigns are less expensive
5. Visual consistency maintained throughout website(s)
6. Better for SEO
7. Accessibility
8. Competitive edge (job security)
9. Quick website-wide updates
10. Easier for teams to maintain (and individuals)
11. Increased usability
12. More complex layouts and designs
13. No spacer gifs

Read more in this nice article

CSS vs Tables - 13 Reasons Why CSS Is Superior to Tables in Website Design

Answer 3

Tableless layout v table-based layout may be taken as the simplest aspect of the whole "Semantic HTML" debate.

as meder said "use the right element for the right purpose"

But it is a debate, not a law, and you can't force web developers to comply.