Converting Tables to CSS Layouts
Page layout problems that trigger an error message are easy to identify. However, some page changes that are required to make a site optimal for Ajax development (and all other uses) don't result in validation errors or accessibility warnings. One of the most common old layout tricks before the advent of CSS was using HTML tables to manage the page contents, regardless of content type. However, HTML tables were meant for tabular data, such as a listing of records from a database. For our purposes, HTML tables are not very adaptable to many Ajax effects. As I'll demonstrate later in this chapter, and also in Chapter 6, updating a dynamic table is trickier than updating a discrete div element. In addition, you can't necessarily move a table row or handle a table cell as a distinct object. HTML tables also drive the semantic web people batty—if you use HTML tables to present all of the information on a web page, the tabular data will not stand out.
Here are some of the issues with using HTML tables for all of your page content:
HTML table elements were created specifically for tabular data.
HTML tables add an extra layer of complexity when using JavaScript.
HTML table elements, such as rows and cells, exist within a framework that makes it awkward to work with an element individually.
HTML table elements can't be easily collapsed, moved, or removed from the display without adversely effecting other elements.
Some JavaScript-based effects, such as layering, ...