Table-Based Designs Vs. CSS Designs

104 9

    Background

    • Early in 2001, the influential online publication A List Apart published an article titled "From Table Hacks to CSS Layout," which sparked a heated debate among Web designers. Many designers and programmers were reluctant to stop using tried-and-true table-based designs. In 2001, browser support for CSS (Cascading Style Sheets) was limited. Internet Explorer 6 was released the same year and had the best CSS support for its time, but that support included many bugs. The most infamous IE6 bugs -- the "box model bug" and "double margin bug" -- wreaked havoc on otherwise well-coded CSS-based layouts. For these reasons, it took a few years for designers to drop table-based coding for CSS-based coding.

    How Table Layouts Work

    • Table layouts use HTML table tags to create a structure for the site's graphics and contents. The classic example is of a three-column layout with a heading and footer. In a table-based layout, designers use HTML tags to create a table with a two-column-wide cell on the top and bottom rows. The table's middle row contains three cells, and each cell is a column for the site. Attributes that are no longer used in HTML 4 and up allowed programmers to control spacing, padding, width and height of table cells.

    How CSS Layouts Work

    • Layouts controlled by CSS properly separate content from presentation. This means that the HTML file contains the content -- text, images, etc. -- while the CSS defines where that content appears on the page. Designers can link one CSS file to every page in the site and, as a result, be able to change the whole site's design by changing that one CSS file. The standard CSS replacement for table tags in HTML 4 and XHTML is the <div> tag, although HTML 5 introduces new <section> and <aside> tags that carry more meaning in their names than <div>. The CSS file uses the class or ID attribute to target specific <div> tags.

    Why Table Layouts Are Bad

    • Table-based layouts require changes to every page in the site whenever the design is changed. Even if a table-based layout uses some CSS for style, to change the layout structure, changes to every page are required. When updating a table-based layout, finding the content to edit is more difficult in the maze-like code of tables nested inside tables. Web designers might charge extra for the time it takes to edit table-based layouts, or they will suggest scrapping the current site altogether. Another result of table-based layouts is bloated code. Large websites with heavy traffic cannot afford bloated code because of bandwidth costs.

Source...
Subscribe to our newsletter
Sign up here to get the latest news, updates and special offers delivered directly to your inbox.
You can unsubscribe at any time

Leave A Reply

Your email address will not be published.