Tutorials - Free2Code

Tutorials - CSS over tables; working robust stylesheets - The evils of tabular layouts

This article written by
OldSite

Member since
October 11, 2006

A note in advance; this tutorial is written from the perspective of the CSS-obsessed, i.e. the perspective of people who do things ‘the right way’.

Generally, when working with HTML to make site layouts, most people get into the habit of using tables to arrange content. It seems really easy to make ‘fluid’ interfaces using tables right? Just a couple of pointers before we go on:

Using tables for layout is stupid.
Redevelopment of table-based sites is extremely time consuming.
Tables exist for one reason: to display tabular data.

CSS can be used to make great layouts and stylish sites that are easy to modify, fast to load, and end up with much simpler HTML. When making sites using tables, your content (your own text and images etc) is mixed up with your tables. After getting into a site design using tables, you will often end up with three-layer-deep nested tables. If you’re writing a page using just HTML, there is no easy way to get your content out of the table. One has to dig and search through their table for content before changing it. Many people say that there’s an easy way around that using PHP or a similar language, for example:

<html>
<head>
   <title>Including content in a table</title>
</head>
<body>
   <table class="layout" cellspacing="0" cellpadding="0" border="1"
     style="border-collapse: collapse;" width="100%" height="100%">
      <tr>
         <td height="64" width="160" bgcolor="#336633">
            <img src="logo" width="96" height="60" alt="altlogo" />
            <?php include('logo'); ?>
         </td>
         <td bgcolor="#663333">
            heading
         </td>
      </tr>
      <tr>
      <php include('topnav'); ?>
         <td height="20" bgcolor="#333366">
            'Null.gif' or 'NAV0' here.
         </td>
         <td>
            <table cellspacing="0" cellpadding="0" border="1"
              style="border-collapse: collapse;" width="100%"
              height="100%" bgcolor="#333366">
               <tr>
                  <td width="20%" style="border-bottom: 1px solid #999;">
                     First NAV
                  </td>
                  <td width="20%" style="border-bottom: 1px solid #999;">
                     Second NAV
                  </td>
                  <td width="20%" style="border-bottom: 1px solid #999;">
                     Third NAV
                  </td>
                  <td width="20%" style="border-bottom: 1px solid #999;">
                     Fourth NAV
                  </td>
                  <td width="20%" style="border-bottom: 1px solid #999;">
                     Fifth NAV
                  </td>
               </tr>
            </table>
         </td>
      </tr>
      <tr>
         <td bgcolor="#333366">
         More NAV
         <php include('More NAV'); ?>
            <table cellspacing="0" cellpadding="0" border="1"
              style="border-collapse: collapse;" width="100%" height="100%">
               <tr>
                  <td>
                     One More NAV
                  </td>
               </tr>
               <tr>
                  <td>
                     Two More NAV
                  </td>
               </tr>
               <tr>
                  <td>
                     Three More NAV
                  </td>
               </tr>
               <tr>
                  <td>
                     Four More NAV
                  </td>
               </tr>
               <tr>
                  <td>
                     Five More NAV
                  </td>
               </tr>
            </table>
         </td>
         <td bgcolor="#cccccc">
            <php include('Content'); >
            Content
         </td>
   </table>
</body>
</html>

Are you going to try and do something like that? I should sincerely hope not. Now we’d end up with PHP includes inside tables inside PHP includes inside tables. Very complex when changing your layout, even slightly. Another big fat problem with tables is that most browsers display tables differently. Sure, you could have your borders completely nonexistent, but what are you going to do to separate the columns now? Oh sure, make up some background-images that include borders. Right. And if you want it pixel perfect with borders all around? You’re stumped.

Continue to The benefits of stylesheet layouts »

In this tutorial: