Tables versus Stylesheets

Previous page

 

Table layout code:

<table cellpadding="10" cellspacing="0" border="0"> <tr> <td bgcolor="#FFC86D"> <h1> <font face="Verdana, Arial, Helvetica, sans-serif" color="#000033"> <strong> Welcome to our website! </strong> </font> </h1> </td> </tr> <tr> <td bgcolor="#ccc"> <p><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#000"> Enjoy your stay! </p> <ul> <li> <a href="#"> <font face="Verdana,Arial, Helvetica, sans-serif" color="#ff0000"> Link 1 </font> </a> </li> <li> <a href="#"> <font face="Verdana,Arial, Helvetica, sans-serif" color="#ff0000"> Link 2 </font> </a> </li> <li> <a href="#"> <font face="Verdana,Arial, Helvetica, sans-serif" color="#ff0000"> Link 3 </font> </a> </li> <li> <a href="#"> <font face="Verdana,Arial, Helvetica, sans-serif" color="#ff0000"> Link 4 </font> </a> </li> <li> <a href="#"> <font face="Verdana,Arial, Helvetica, sans-serif" color="#ff0000"> Link 5 </font> </a> </li> <li> <a href="#"> <font face="Verdana,Arial, Helvetica, sans-serif" color="#ff0000"> Link 6 </font> </a> </li> </ul> </td></tr> </table>

CSS-layout code:

<style type="text/css"> div#bound { width:300px; padding:0 } div#orange_header { background-color:#FFC86D; height:70px; padding-top:15px } #orange_header h1 { font-size:18px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#000; text-align:center } div#grey_field { background-color:#ccc; padding-left:10px; padding:15px } #grey_field a { color:red } </style> <div id="bound"> <div id="orange_header"> <h1>Welcome to our website!</h1> </div> <div id="grey_field"> <p>Enjoy your stay!</p> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> </ul> </div> </div>

As can be seen, the css code is much simpler, and there's a great deal less of it. In fact, in ordinary circumstances the upper portion of the code, ending at

</style>

would be stored in a exterior file to the webpage itself, and so only the lower portion of the code would have to be loaded by the browser.

The benefits don't simply end there. As you may notice, the non-css code requires every single element in the page to be individually formatted, while CSS allows all elements of a certain type to be formatted in one place. Added up, the code writing that is saved throughout an entire site is sizeable.

What's more, CSS information is cached by browsers. This means it only has to be loaded once, and thereafter is simply retrieved by the browser. So, rather than having to load formatting information repeatedly, CSS layouts only have to be loaded once. Thereafter, its a simple matter of surfing.

This saves bandwidth, which in turn saves real money. Less bandwidth means less cost for hosts, and thus reduced prices for clients. All of which makes it hard to understand why many designers still resist making full or even partial use of CSS.

At Website Magic, we pride ourselves on using full CSS in our web designs, and, where possible make use of pure-CSS layouts in place of tables, ensuring that your website operates as fast as possible.

Of course, we're happy to use tables. But, as they were intended, only to present tabular information.

 

Previous page | Return to the top