CSS Cookbook

7.1. Developing Hybrid Layouts Using HTML Tables and CSS

Problem

You want to build a page layout that possesses the rigid structure of an HTML table while leveraging the ability to control its appearance through CSS.

Solution

Use one HTML table to control the layout of the entire page. Then, in each table row element, tr, insert an id attribute (see Figure 7-1):

<table width="600" cellspacing="0" align="center"> <tr> <th colspan="5" id="header"> <h1>Business Web Site</h1> </th> </tr> <tr id="navSite"> <td width="120"><a href="/">Home</a></td> <td width="120"><a href="/products/">Products</a></td> <td width="120"><a href="/services/">Services</a></td> <td width="120"><a href="/aboutus/">About Us</a></td> <td width="122"><a href="/contact/">Contact</a></td> </tr> <tr id="content"> <td colspan="3"> <img src="dot_darkgrey.gif" width="300" height="200"> <h2><a href="/products/">Epsum factorial non</a></h2> <p>Lorem ipsum dolor sit <a href="/products/">amet</a>, consectetuer adipiscing elit. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium.</p> <p>Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilitá de un nov lingua franca.</p> </td> <td colspan="2" > <img src="dot_darkgrey.gif" width="150" height="100"> <h3><a href="/services/">deposit quid pro</a></h3> <p>Lorem ipsum <a href="/services/">dolor</a> sit amet, consectetuer ...