Developer

Abandon tables, simplify design with CSS

Many HTML developers use tables to create their page layouts, but using Cascading Style Sheets (CSS) is the preferred method. Learn about CSS by following this simple example.


HTML tables are the darlings of many Web designers, but the original intent of these tables was the tabular display of data (Excel-like format for easier reading). Designers quickly realized it was hard to control the placement of data within an HTML page, and tables provided the answer. Cascading Style Sheets (CSS) offer an alternative. A style sheet contains definitions of how content should be rendered on a page. The best way to approach the subject is to convert an HTML page that's laid out with tables to a page that uses style sheets. Let's get started.

Layout with tables
Tables allow items to be laid out according to columns and rows within a Web page. Figure A displays the conversion starting point for this article. It is a simple page that uses a table to display a picture, text message, and e-mail link on the screen. The image spans two rows, with the text and e-mail link displayed next to it.

Figure A
Simple Web page layout using HTML tables


Here's the complete HTML for Figure A:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en">
<head>
<title>Builder.com Test page</title>
<meta name="author"  content="Tony Patton" />
<meta name="contact" content="tony.patton@cnet.com" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head><body title="Main Page">
<font face="Arial">
<center>

<h1 title="Test Home Page">This is just a test ...</h1>
</center>
<table>
<tr>
<td rowspan="2">
<img src="tony_patton.jpg" title="Tony Patton Mugshot" alt="Tony Patton Mugshot" />
</td>
<td>
I have developed this sample page to demonstrate a simple layout utilizing CSS - a conversion from the older method using HTML tables.
</td>
</tr>
<tr>
<td align="center" colspan="2">
<a href="mailto:tony.patton@cnet.com" title="Send me an email">Send me an email!</a>
</td>
</tr>
</table></font></body></html>


The HTML is very basic, but I’ll point out a few details. The first line specifies the type of document, and this document conforms to the XHTML standard. The head tag contains the standard title along with meta tags to signal the author and related information. The font element establishes the font (Arial) to be used in the page. One font tag is included, so only one font is used. The table is the main element in the page; it establishes the rows and columns used to lay out the site content. Notice that the cell containing the image spans two rows, so the text appears to the right of it.

This table works well for a basic layout, and it loads in the browser with no problems. However, problems arise when changes are required on the page. For instance, you may need to apply different formatting to the e-mail address and the page title. This requires the editing of the HTML page and can become cumbersome. These problems are greatly reduced with the use of CSS.

Layout with style sheets
CSS allows the data presentation and formatting to be separated. That is, the data to be presented to the user is contained within the HTML page. The formatting is maintained separately as a style sheet (CSS). Let’s redesign the page from Figure A with a style sheet. The main focus of this design effort is a layout that positions the image to the left and text flowing to its right. In addition, the text and image should be properly spaced.

Styles sheets make it easy to apply font, spacing, and other attributes to individual elements within a page. Style sheets can be stored in a separate file (with a .css file extension), included in the head section of the HTML document, or included with the corresponding HTML element. In this example, the CSS is created in the head portion of the page and referenced throughout the document. Here's the reworked HTML:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<title>Builder.com Test page</title>
<meta name="author"  content="Tony Patton" />
<meta name="contact" content="tony.patton@cnet.com" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" title="stylesheet">
<!—
body { color : black; background-color : #ddfdcf; }
a.link    { color : red; }
a.active  { color : yellow; }
a.visited { color : blue; }
.link { font-size : 10pt; font-family : Arial, sans-serif, Times; color : white; text-align : center; font-style : italic; letter-spacing : 0.05em; }
.divider { font-size : 12pt; font-family : serif,Times; color:black; margin-top : 30px; }
.p-default { font-size : 12pt; font-family : serif,Times; color:black; text-indent : 0.0in; padding-left : 0.15in; margin : 0px; }
h1  { font-size : 18pt; font-family : Helvetica, Arial, Times; color : black; word-spacing : 0.25em; margin-left : 1.15in; }
p img { float : left; width : 5em; margin-right : 3%;}
div.divider:first-letter { font-size : 200%; line-height : 1px; vertical-align : -100%; }
—>
</style>
</head>
<body title="Main Page">
<h1 title="Test Home Page">This is just a test ...</h1>
<p class="p-default" title="Main paragraph">
<img src="tony_patton.jpg" title="Tony Patton Mugshot" alt="Tony Patton Mugshot" />
<div class="divider" title="Introductory paragraph">
I have developed this sample page to demonstrate a simple layout utilizing CSS - a conversion from the older method using HTML tables.
</div>
</p>
<p class="link" title="email link">
<a href="mailto:tony.patton@cnet.com" title="Send me an email">Send me an email!</a>
</p>
 </body></html>



The first noticeable difference is the existence of the style element within the head portion of the HTML document. The style section allows you to establish formatting rules to apply to individual elements within the document. There are two ways to handle the formatting:
  • The standard element tag name is specified in the style section. For instance, the sample document establishes formatting rules for link tags (<a> element). Individual attributes of the element are handled with dot notation and the attribute name. The link attribute of the <a> element is set up to display as red in our example.
  • Custom names are assigned to individual styles, and these styles are applied to individual elements within the page through the use of the class attribute. For example, the paragraph elements in the sample page are set up to use different styles. The first paragraph uses the p-default style, while the second instance uses the link style. In addition, including the complete element structure separated by spaces with the accompanying style uniquely formats nested elements. In the sample document, img elements within paragraph elements are formatted with specific margins.

The results of the HTML sample appear in Figure B. I used a different background color to help differentiate it from the first sample.

Figure B
Simple page layout using CSS


As you can see, the layout of the two pages is the same. The main advantage of the CSS approach is the separation of content and formatting, which makes it easy to change formatting by modifying the style sheet. In our example, editing the style sheet will allow us to change the font or text color. No time is wasted searching through the HTML document. One note about the HTML in this article: The pages have been developed to conform to accessibility guidelines, so extra attributes are included.

Standard continues to evolve
Like most Internet standards, the CSS initiative is changing. The current version, 2, is available from the W3C site. Although the examples we looked at here are simple, CSS places enormous power and flexibility in the Web developer or designer’s hands. One final note: As always, browser support is not uniform, so designs must be tested with all targeted platforms.

Editor's Picks

Free Newsletters, In your Inbox