Eliminating tables: a tutorial on XHTML-compliant divs with CSS for people who are used to table-based website layouts

Requirements: HTML (basic understanding), JavaScript (basic understanding), CSS (basic understanding)

What is a table?

If you’ve been making HTML sites for a while, you should be familiar with the concept of tables. Tables are a method of displaying content in a row-by-column fashion. Tables were developed initially to display data in, well, a table form. They soon, however, became a popular method of laying out websites. Web developers would cut up their websites into rows and columns and, using a combination background images and other styling techniques, generate a website layout. Although this technique technically works fine, using tables for your web layout leads to many problems. The problem is, many web developers are too addicted or too used to using tables and they therefore find it hard to stop using them. . Don’t get me wrong – tables are still good for displaying data! The problem is that they are terrible for website layouts. Therefore, I am going to teach you how to replace tables with divs and CSS.

(more…)

June 17, 2012 at 4:20 pm | Posted in: Tutorials, Web Design | 1 comment