Moving from Tables to CSS

Step 2: Table layout and CSS layout co-existence

The first step in moving from Tables based layout to CSS based layout is a relatively easy one, and should be managed without any problems. The next step introduces us to the beginnings of CSS layout.

Take a look at the following example:

Company address
contact details
email etc
example logo

Company Name

  • Link 1
  • link 2
  • link 3
  • link 4

catLorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sed elit aliquet velit volutpat laoreet. Pellentesque lacus. Curabitur eget arcu.

rabbitMaecenas scelerisque, odio eget ornare dapibus, tortor quam volutpat purus, et ultrices enim dui id nulla

Now traditionally you might have considered achieving this result through a set of nested tables like the ones below:

example logo

Company Name

Company address
contact details
email etc
Link 1
Link 2
Link 3
Link 4
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sed elit aliquet velit volutpat laoreet. Pellentesque lacus. Curabitur eget arcu. cat
rabbit Maecenas scelerisque, odio eget ornare dapibus, tortor quam volutpat purus, et ultrices enim dui id nulla

However, using a bit of CSS positioning we can easily eliminate the nested tables, lightening our code and improving accessibility.

The trick is using floats. Floats basically move elements to one side while still allowing the other content to wrap around it, and they are perfect for the example above.

Take the banner for example. If we first assign an id to the top table cell then float the logo graphic to the left and the <address> to the right we can remove the need for a nested table altogether.

<table border="0" cellpadding="0" cellspacing="1"> 
<tr>
<td id="banner" colspan="2"> <address>
Company address<br />
contact details <br />
email etc
</address>
<img src="images/logo.gif" alt="example logo" width="56" height="50" />
<h2>Company Name</h2></td>
</tr>
<tr>
<td style="width:30%"><ul id="exlist">
<li>Link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul></td>
<td> <p><img src="images/cat.gif" width="50" height="50"
alt="cat" style="float:right;margin-left:6px" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Etiam sed elit aliquet velit volutpat laoreet.
Pellentesque lacus. Curabitur eget arcu. </p>
<p><img src="images/rabbit.gif" alt="rabbit"
width="50" height="50" style="float:left;margin-right:6px"/>
Maecenas scelerisque, odio eget ornare dapibus, tortor quam
volutpat purus, et ultrices enim dui id nulla</p></td>
</tr>
</table>

And now the CSS:

#banner {height:60px;}
#banner img{float:left;margin-right:15px}
#banner address{float:right}

#exlist{list-style:none}
#exlist li{padding:3px}

The same thing has been done to the main content section, the images of the cat and rabbit have been floated to the right and left removing the need for the nested table there.

The navigation at the side uses a CSS styled list, again removing the need for a nested table. Making small changes like this to your site is an easy way to improve your coding while teaching you some valuable lessons about CSS positioning.

I've not covered floats or styled lists in detail here, but if you need help check out the excellent tutorials at css.maxdesign:

Floatutorial
Listamatic

You might also like...

Comments

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“XML is like violence - if it's not working for you, you're not using enough of it.”