Advantages Of Using Tableless Layouts

by Gary on October 15, 2007 · 5 comments

in Website Design

Are you still using tables to create your layouts?

Well if you are there is nothing earth shattering about it, it’s just that by creating DIV-based, tableless layouts you not only create a web site with less source code, you also make it W3C compatible (The W3C guidelines recommend tableless layouts).

Why table based layouts after all?

Web designers who use tables to create the layout claim that table based layouts consume less time compared to DIV-based layouts and that they are more compatible. I totally agree with the compatibility thing. I’ve personally seen that table based layouts are easier to create and they easily look decent in all major browsers. But being easy does not mean being right.

The table based layout creates lots of junk code and you cannot separate design from data that you can easily do with DIV-based layouts, and in fact this is the main reason why tableless layouts are recommended these days. Provided you can understand how to place DIVs using the CSS definitions it is very easy to create tableless layouts.

The DIV-based layouts are also search engine friendly, that is, they’re good for your SEO because most of the layout related definitions exist in a separate CSS file and the main file is rendered quite light. I have come across some top ranking web sites created using tables but I think they have less competition and that’s why they rank at the top.

The best thing about the DIV-based layouts is that you can change the entire look of the web site by just changing the definitions in the CSS file. For instance if you visit CSS Zen Garden you will notice how quickly the entire design of a web site can be changed with the help of a single CSS file. Besides, provided you know how to control the various DIVs, your web design is more compatible with all devices that can browse the Internet not just the PCs. I agree it takes lots of effort to learn how to create DIV-based layouts with CSS, but once you learn the art, the effort is worth it.

By the way, if you have not already noticed Phoenixream uses a tableless layout.

Share This Post

Advertise here
  • Adam McKerlie

    Tables are essentially gone now. has replaced it and done a fairly good job.

  • vincent

    Tableless is quite good. It separate content to design. But it is sometime difficult to change from a table design to a tableless one.

  • Jojo

    Well … In my opinion, there is no advantage using tableless layouts. To make a good tableless layout, it is a lot of pain – you actually spend valuable time, instead of making things easy. It is a pain to modify a page (sometimes if you change a width/height with 1 pixel it trashes the entire layout – for a browser like IE).

    I think someday , a guy wakeup in the morning with a bad dream and said “let’s make some thing to make everybody’s work harder” – and so appeared “tableless”. Myself i still use tables, is fast, and reliable, and if somebody have to modify a page, it will still work. As for what is said in article, that the tables are creating a lot of junk – is completely wrong – if the code is indented right, Tableless can make a lot of junk – imagine that sometimes you may need to add extradivs, to just make it look better (because for example IE is treating CSS differently than FF – for example if you declare height:30px and you add padding-top: 4px , IE will create an element with height:34px , and FF an element with 30px – for this you have to add another div inside with margin-top:4px to be shown in the same way in both browsers – etc).

    Think again before using tableless – if your time table is empty, you can try.

    • Naushad AP

      why we are avoiding table:-
      Tables are slow

      In almost every browser out there, unless table widths are specified explicitly, all the text in the table needs to be rendered before the browser can figure out how wide to make the various table cells. This means that pages load slowly. Note that using CSS for layout doesn’t necessarily help here, since there’s the same problem if the widths aren’t specified explicity. I’m guilty of this myself. Take a look at my quotes page (which doesn’t need to be a table, as a list with a floating element to the right of each list-item for the link would do just fine) or my list of CDs. Notice how slowly they load. Both pages use a table to line up the data.

      Tables don’t have to be slow (as Todd Hoff points out) if you put each row in a separate table, but then you lose the alignment between rows. For a blog, that may not be much of a problem, but for data that actually wants to be in tabular form, it’s still a problem.

      Tables can be inflexible

      One of the common tricks to make tables load more quickly is to specify the widths for all the table columns. This means that the table renders pretty quickly, and the user can see your text right away. The problem is that you’ve just specified the width for the page. Again, note that you can have this exact same problem with CSS if you specify all the widths explicitly.

      Accessibility issues are easier with CSS

      Thanks to Harold Levin for the question about accessibility (see the followups). Tables also mean you have to present the information in the same order you want it displayed. You have to present data in the left column before the columns to the right. Using CSS for layout, you can present the data in a logical order and use CSS to control the appearance. For example, in a three-column layout using tables, you’ll see left-column then center column then right column in that order. Using CSS, you can put whichever of the three columns is most important first, and keep the layout separate (which is the whole point of CSS). A real important point that I missed on the first pass. I don’t know what I was thinking.

      Tables don’t degrade

      The most important reason why using tables for layout is that they don’t degrade gracefully. For a good example of this, take a look at any page on this site. If your browser window is wide enough, you get a nice, two-column layout, just the way I intended. But if you’re using a narrower browser window, or a web TV (I still preview all my pages with the WebTV Viewer to make sure they look reasonable there), the page falls down to a single column with what used to be on the right down below the more important part of the page (or at least what I think is more important to most people). Tables don’t let the page degrade gracefully, and that’s their biggest problem.

      Tables don’t print as well

      A huge problem with tables (pointed out by a reader, this is another one I missed on the first pass) is that they don’t print terribly well. With CSS, you can use a print style sheet to give another look to the page. This style sheet can also include page-breaks that are under your control. You can also have elements that only show up when rendered to a screen, but not to a printer (headers and footers, for example). Or elements that show up when printed, but not to a screen (useful for expanding links so they’re visible when printed). Take a look at How to use valid code to make your life easier for a swell example. Now look at it using Print Preview if your browser supports that.

      • Addy King

        Totally Worthless….

        He agrees table design is faster and more compatible:

        “Web designers who use tables to create the layout claim that table based layouts consume less time compared to DIV-based layouts and that they are more compatible. I totally agree with the compatibility thing. I’ve personally seen that table based layouts are easier to create and they easily look decent in all major browsers.”

        Than he states:

        “The table based layout creates lots of junk code and you cannot separate design from data that you can easily do with DIV-based layouts, and in fact this is the main reason why tableless layouts are recommended these days. Provided you can understand how to place DIVs using the CSS definitions it is very easy to create tableless layouts.”

        I’ll say – Who wants to separate design from code? Spiders read the code anyway…and a div based design uses div and li tags in the same proportion as a table based design used td and tr tags.

        Then he says:

        “The DIV-based layouts are also search engine friendly, that is, they’re good for your SEO because most of the layout related definitions exist in a separate CSS file and the main file is rendered quite light. I have come across some top ranking web sites created using tables but I think they have less competition and that’s why they rank at the top.”

        I ‘ll say :

        Another reason why tables aren’t as good is that you can’t place the most important (and relevant) content at the top of your HTML. So why not put some content in a div somewhere in a div and place it on the top section of the page….I never said NO to use divs. I only want to state that no technology is complete in itself, it should be used to its best with its complimentary technologies to get the best output.

        Moreover thr’s a hidden propaganda behind it ….People want to show that they hav really cool HTML skills by using div based designs.