O'Reilly logo

CSS Cookbook by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required