views:

136

answers:

7

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?
A: 

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

SoftwareGeek
How do i get better performance? reasons please..
sushil bharwani
it doesn't have to parse through all the table tags especially when they are nested
SoftwareGeek
Tables aren't non-standard.
mattmc3
@mattmc3: +1! They're great for... well... tabular data.
kbrimington
a negative flag for a solution that will work in 90% of cases is real bad.
SoftwareGeek
+1  A: 

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

sje397
+1  A: 

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

janogonzalez
does creating a form qualfies for tables to be used?
sushil bharwani
No, you can achieve the same with floats and position. Tables are only for tabular data, which they're very good at.
Pat
See [this question](http://stackoverflow.com/questions/1395514/is-it-acceptable-to-use-tables-for-forms-or-is-it-still-more-correct-to-use-divs) for usage of tables for forms
Eric
@Eric I have read the link provided by you thanks for it. I could however not conclude as tables can be used for forms or not. Also i see that some people suggest use of UL Li Lists for form design. Its it same (as heavy and as markup oriented) as tables.
sushil bharwani
A: 

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.

advait
Does creating a form. Qualifies for tables to be used. ?
sushil bharwani
I personally wouldn't. Use a `ul` with `labels` and style them with css. Example: http://woork.blogspot.com/2008/06/form-elements-design-using-css-and-list.html
advait
A UL with labels is it the right approach read this : http://green-beast.com/blog/?p=259
sushil bharwani
+2  A: 

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.

kbrimington
sorry if this sounds stupid? can u give me an example of tabular data?
sushil bharwani
A rule of thumb for me is: it's tabular if the rows and columns have meaning. Often, each row is a single entity (like an employee), and each column represents a particular attribute (like 'first name', 'date of birth', etc.).
grossvogel
@grossvogel thanks a lot :-)
sushil bharwani
Exactly. Another rule for me is, could the data in the table be sortable and pagable? If not, you're probably mis-using tables for layout.
mattmc3
@mattc3 Whats Pagable?
sushil bharwani
+1  A: 

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).

dpoeschl
+1  A: 

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.

Pat