Shifting from Tables to Tableless Designs

For years, the limitations of good old-fashioned HTML have driven web development toward more flexible means of constructing web pages. Cascading Style Sheets (CSS), in combination with HTML and JavaScript, yield incredibly efficient and high-function pages. Now, with the advent of so many new ways to access the internet, it has become critical to take a giant step forward in web design to make pages readable by many devices.

For years, the limitations of good old-fashioned HTML have driven web development toward more flexible means of constructing web pages. Cascading Style Sheets (CSS), in combination with HTML and JavaScript, yield incredibly efficient and high-function pages. Now, with the advent of so many new ways to access the internet, it has become critical to take a giant step forward in web design to make pages readable by many devices.

The answer, increasingly, is tableless design. Web pages designed with HTML tables are code-intensive, requiring definition of each row or cell to set the height, width, background color, etc. More complicated layouts only increase the density of code, and nested tables tend to confuse search engine robots looking for content, and can end up in a jumble when viewed with anything but a full-blown web browser on a PC.

In contrast, pages that use CSS to define the page elements use up to five times less code to lay out the page in exactly the same way. An excellent example is found in these comparison examples at sitepoint.com: Table layout (http://www.sitepoint.com/examples/cssvtables/tables4.html) and CSS layout (http://www.sitepoint.com/examples/cssvtables/butterflycss.html). While the table layout is somewhat unnecessarily complicated, when you examine the page source for each example, the difference in code is striking. The CSS page requires remarkably little code, greatly reducing the download speed and the amount of data transfer required. For companies paying their hosting service for every kilobyte of data every month, this method of site design could result in significant savings over time.

The simplicity afforded by CSS design has long been touted for its ability to alter the appearance of an entire website by making adjustments to one style sheet page. Tableless design takes that efficiency and time savings to a whole new level. The code is now completely separate from the page content, which not only reduces the time spent in updating or creating pages, but also allows search engine robots free access to your keywords without getting lost in code.

Smart businesses want their sites to be seen by as broad an audience as possible. Overhauling your site with tableless design to accommodate an increasingly mobile customer base is not just smart design, it's good business sense.