Adding Ajax

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, opacity, and other subtle effects can have a negative impact when used with an HTML table.

Based on all this, one of the most common Ajax preparation tasks is converting HTML tables to valid XHTML elements and CSS. Converting the page to CSS is going to make creating Ajax effects easier, and it is going to make site maintenance easier, too. Contrary to expectation, the conversion is actually not as hard as you may think. The next couple of sections explore how to do this, along with a few other conversion efforts. If your web site is already valid and making use of CSS and XHTML, you may want to skip these sections.

Tip

HTML tables were designed to display related data, such as a list of stores and locations or the results of a survey. Using them for general page layout is not semantically correct. You'll hear mention of the semantics of an approach throughout the book. What this means (no pun intended) is that the elements used in the page are used in ways that are appropriate for their defined usage, not just for formatting. This can help screen readers and other devices to process the page more accurately. It can also help web bots, automated web robots used by search engines and other sites, process the data more efficiently.

Here's a typical web page design: the header and footer extend the width of the page or the content, and the body of the page is broken into two vertical components, one as a sidebar and the other as main content. The sidebar can be on the left or right, and the page can be sized and centered or extended to the width of the browser window.

Using an HTML table in this case is simple: create one table with two columns and three rows, and use colspan to expand the column in the first and third rows to the width of the table. There are several different methods you can use to recreate this effect using XHTML and CSS. One is to create three blocks using div elements, each expanded to 100 percent of the container space, stacked one after the other, as shown in Figure 1-4.

Figure 1-4. Page converted to XHTML and CSS using div elements and the CSS float property

To create the two columns in the middle space, add two div elements side by side instead of stacked, and sized so that the content column is wider. List the content column first in the actual page markup so that it will be the first one read by text-to-screen readers.

Normally div elements are block-level elements, which means they stack vertically. To align the columns side-by-side, use the CSS float property to float the block to the left or right, effectively removing the item from the vertical page flow. If the sidebar is going on the left, set its float value to left and set the content column's float value to right. Example 1-1 shows the complete page.

Example 1-1. XHTML page with converted two-column page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table Conversion</title>
<style type="text/css">
body { margin: 0; padding: 0 }
#wrapper { width: 800px; margin: 0 auto; }
#header { height: 100px; background-color: #00f; }
#sidebar {  width: 200px; background-color: #f00; float: left; }
#content {  width: 590px; background-color: #ff0;  padding: 5px; float: right; }
#footer { clear: both; background-color: #0f0; height: 50px; }
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.
</p><p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
 facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. </p>
</div>
<div id="sidebar">
   <ul>
     <li>Option 1</li>
     <li>Option 2</li>
   </ul>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

To remove the float property from the footer (so that it will appear below, rather than beside, the sidebar and content pages) the CSS clear property is set to both.

Viewing the page in Figure 1-4, notice that the left column, which is the sidebar, doesn't extend all the way down if the content isn't long enough. This is the drawback of using CSS-positioned XHTML: the column background extends only the length of the content.

One way of working around this problem is to set the same background color for all of the containers—this will hide the column length differences.

Another approach (and the one I prefer) is to create an image that is the same width and color of the sidebar, and then use it as a background image for the sidebar container. To use this method, set the background repeat attributes so that the image does not repeat horizontally or vertically, and position it where the sidebar would start. You can also set the background color of the container to be the same as the content column—this will fill in any area not covered by the background image. With this modification, both columns appear to be the same length. The modified style setting is:

#wrapper {
                  background-image: url(ajaxbackground.jpg);
                  background-position: top left;
                  background-repeat: repeat-y;
                  background-color: #ff0;
                  width: 800px;
                  margin: 0 auto;
                  }

The page with the modified container style setting is shown in Figure 1-5.

Figure 1-5. Modified container style settings make both columns appear to be the same length

This is just one approach. There are many CSS-based layout possibilities. The one just described is a fixed layout. In a fluid layout, the column sizes change to fit the page size, and in an elastic layout, the column sizes are based on page size, but are not to exceed a maximum width. For additional reading on CSS layouts, search the Web for "fluid fixed elastic CSS layout."

It can be difficult to get sites switched over from HTML tables to CSS because the tables are so handy and simple to use, and CSS can be a little daunting. Furthermore, a page will validate as XHTML regardless of whether it uses HTML tables. However, some web page elements simply will not validate and must be converted. In the next section, we'll look at the most common of these elements.