10

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?
Community
  • 1
  • 1
sushil bharwani
  • 29,685
  • 30
  • 94
  • 128
  • "What are the conditions when tables should be used?" When you want to display tabular data. Which is to say, use tables for displaying tables of data, and use CSS for layout. Don't try to recreate tables without tables, and don't use tables for layout. – Frank Farmer Jul 30 '10 at 02:24
  • duplicate: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html anybody who wants free points can copy the answers here :p – catchmeifyoutry Jul 30 '10 at 02:25
  • Pretty sure this question has been done to death: http://stackoverflow.com/questions/407420/what-is-the-benefit-of-tableless-design-if-you-need-clearing-blocks-everywhere http://stackoverflow.com/questions/1518223/table-vs-css-based-layouts-for-web-pages http://stackoverflow.com/questions/30251/tables-instead-of-divs http://stackoverflow.com/questions/96137/divs-vs-tables-a-rebuttal-please http://stackoverflow.com/questions/83073/div-vs-table – Lèse majesté Jul 30 '10 at 02:32
  • Agreed, that the question is age-old. But some developers aren't. Sometimes it helps to ask the experts again, just to be sure we aren't looking at "truth" that has become antiquated. Thanks for the links, though. It helps to provide a complete picture without typing a lot. – kbrimington Jul 30 '10 at 02:37
  • Thanks for adding and finding me the similiar questions that have been asked in SO earlier. I am equally reading those answers as well, but my question of how to begin and a little more anxiety of when exactly to use (like in case of forms) i believe can be answered here. Thanks – sushil bharwani Jul 30 '10 at 02:39
  • Judging by the comments you're putting on the answers, you should 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 info about the usage of tables for forms – Eric Jul 30 '10 at 02:41
  • I think the question need to be closed. Google ths issue and have lot of info regard the above issue. – Nazmul Jul 30 '10 at 03:57
  • Googling afcourse gives us several results i agree. But here on SO i as a developer get chance to interact with many others look into their views. Agree or show my disagreement with them and also cross question on a suggestion. I am still looking for a answer which could take over my confusion altough i agree all the answers posted are right and good. – sushil bharwani Jul 30 '10 at 10:25

7 Answers7

3

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
  • 25,142
  • 5
  • 62
  • 74
  • sorry if this sounds stupid? can u give me an example of tabular data? – sushil bharwani Jul 30 '10 at 02:43
  • 2
    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 Jul 30 '10 at 03:18
  • 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 Jul 30 '10 at 11:37
  • W3schools isn't a very nice source of Web Design information (*their* site is table-based): w3fools.com – Blender Apr 05 '11 at 16:25
  • @Blender: Whether their content is good or not is subjective. I found it extremely useful as a beginner. I did not insinuate that the OP should crack the site open with "View Source" to learn about HTML, but to read the content. If you consider w3fools.com to be a better resource, by all means post an answer. Though the question was closed six months ago, you can find one of the originals and post there. – kbrimington Apr 06 '11 at 21:29
  • Sorry, just some accidental gravedigging ;) As an alternative, I always used http://htmldog.com/, but I doubt posting an answer to an old question is going to help anybody. – Blender Apr 06 '11 at 22:03
1

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

sje397
  • 41,293
  • 8
  • 87
  • 103
1

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

Jano González
  • 14,536
  • 1
  • 16
  • 9
  • does creating a form qualfies for tables to be used? – sushil bharwani Jul 30 '10 at 02:30
  • No, you can achieve the same with floats and position. Tables are only for tabular data, which they're very good at. – Pat Jul 30 '10 at 02:34
  • 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 Jul 30 '10 at 02:40
  • @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 Jul 30 '10 at 05:37
1

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

David Poeschl
  • 864
  • 4
  • 11
1

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
  • 25,237
  • 6
  • 71
  • 68
0

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

SoftwareGeek
  • 15,234
  • 19
  • 61
  • 78
0

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
  • 6,355
  • 4
  • 29
  • 39