benefits of tableless design of web pages? [duplicate]

This question already has answers here: Closed 12 years ago.

Possible Duplicate:

Why 开发者_运维知识库not use tables for layout in HTML?

These days, I am reading a lot that we should write tableless HTML. I believe that requires a lot of CSS knowledge. My questions are:

• What are the benefits of tableless design?
• What are the conditions when tables should be used?
• How to begin?

---

What are the benefits of table less design?

There are many, not the least of which is reduced HTML payload, and the flexibility to change the layout (via CSS) without changing the markup.

One way they reduce payload is that, with styles stored in an external stylesheet, and stylesheets often being shared between pages, caching really swings in to the rescue. One could argue that stylesheets can be used with tables. Yup; however, disciplined use of divs for layout tends to promote the use stylesheets.

You could read up on Search-Engine Optimisation (SEO) design. One principal of SEO is to get your important content up toward the top of the HTML tree, above relatively unimportant stuff like navigation. This really isn't possible with table-based design.

What are the conditions when tables should be used?

Use tables to show tabular data. Avoid them for layout.

How to begin?

I'm a fan of w3schools, and the awsome CSS Zen Garden. Those gave me my start.

---

Here's a really good presentation on the topic: http://www.hotdesign.com/seybold/

---

With table-less design it's easier to change page layout and you write less html. Tables should be used only for tabular data.

---

Tables should be used for displaying tabular data, not for layout.

You'll get better performance with separated out css files because then the browser can cache the presentation details between pages of your site.

Using separated out css also makes it easier to swap views based on the browser being used (I want to display something very different to iPhone users than IE users, for example).

This also makes it very easy to change the look & feel of your site without changing the code that's generating the content itself (if you're generating your html with PHP, for example).

---

Tableless web design gives you the following:

Less Markup

Tables need a lot of code to actually create table cells and rows, where as a div is only a simple open and close tag. This means less for your users to download when they're loading the page.

Easier Maintenance

Since there's less markup with tableless design, the code is easier to maintain (less code to wade through). It's also easier to add elements to a tableless design because you don't have to go through a table and determine where all the rowspans and colspans need to be added to your existing rows and columns.

Content and Presentation are Separate

This one is key. With tableless design, it's much easier to swap the CSS and completely change the look and feel of a site without touching the markup.

Tables are for Data

Tables should be used when you're displaying tabular data. Their structure makes them very good at defining relationships between headings and the data. As a result they're great for accessibility when it comes to tabular data.

The Catch

Although there isn't a lot to learn in CSS, it'll take a good while to get used to all the browser rendering inconsistencies (I'm looking at you IE...). If you want to get started, I highly recommend you focus on learning about how floats and position behave. Once you have that sorted out, it becomes much easier.

---

you get better performance on page rendering & it would be standards based. Use <div> tags to go with tableless design.

---

There is widespread discussion about tables vs. divs all of the internet.

I'm a big proponent of using tables to represent tabular data. However, that is the extent for their use. For page structure and layout, you should use divs and css.

Read this in-depth smashing magazine article about tables vs. divs.