Tables-layout versus Tableless-layout

Sooner or later, the question comes up, “What makes Identity Developments different than the others?”

Of course there are a number of things, but certainly one of the key, fundamental elements is in Identity Developments' approach and focus on tableless layout design. While the number is changing everyday, perhaps less than 20% of the websites in the world, a rough guess at best, are developed the way Identity Developments develops websites. It's harder, but it's better.

There are many approaches and certainly a tables-layout can be done utilizing some of the techniques used on the tableless-layout page as demonstrated here. However, they usually aren't and this is meant to serve as a real world example. Rather than getting into all the technical details, this demonstration tries to illustrate some basic ideas on why tableless design is better for... everyone.

Demonstration

This demonstration features two web pages, nearly identical in outward appearance, completely different in internal construction. These are only single page examples and the real benefits of a tableless design becomes exponential as your site increases in size. The Tables-layout page is a real page taken from the web, leaving structure as intact as possible, with changes made to the content and overall appearance. The Tableless layout page is a rebuild of the Tables-layout page as Identity Developments would try to develop a page. A couple notes: 1) actual design from scratch would certainly vary, but this illustrates a best duplication of the original source; 2) the Tables-layout uses one file and the Tableless actually uses an additional file, the Cascading Style Sheet or CSS file.

History In a Nutshell

Tables should really be used for presentation of tabular data. During the early years of the web, methods using tables provided one of the few ways of actually controlling the physical layout of a web page. This is now antiquated and technically incorrect, but most designers still rely on it because it can be easier to develop pages this way. Easier can be a very relative term here, as this approach can be much harder and exponentially more expensive over the life of a website.

The Basics

Say you had a 100 page website... now before you go, “We'll never have a site that big,” realize that web pages are like dog years to human years... there is a multiplier effect. Websites nearly always have more pages than people realize, it's just a fact of life. Based on this demonstration, even minor changes to the Tables-layout page will require someone, you or your web firm, to make changes to 100 pages. Under the layout, you or your web firm will have to make changes to 1 page. So, at $?? per page or $?? per hour, which Tableless approach are you interested in.

Under both examples, you can click on “View Code” under Products on the left hand side or click on the “Code Clown” to see the underlying code that actually creates the page. If that doesn't function correctly on with your browser, then <right-click> and look for "View Source." Again, the Tableless page does actually use another file that controls the physical appearance which you are not seeing, but this one page is used to control the look of all of the hypothetical 100 pages.

The links below will open the respective example in a new window in case you would like to compare the pages side-by-side. Please note that these demos have not been updated for quite some time, prior to the Firefox browser, so you are recommended to view them in IE only.

As you can see, tables do have there place... presenting tabular data. The Tableless layout, even with the addition of the CSS file, is still smaller.

Information