o if your like me and learned to build websites back when <tables> actually made sense you may need to take a look at this. This will help drastically clean up your code, make it easier to change your website design in the future and help separate your coding from your content!

Quick note though, I’m going to try to do this as properly as possible (you know… the standards and such?) but remember, this is being written for other newbies like myself.

First of all lets take a look at what we are trying to avoid, the dreaded “table!”

<table width="200" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td>One</td>

    <td>Two</td>

    <td>Three</td>

    <td>Four</td>

  </tr>

  <tr>

    <td>Five</td>

    <td>Six</td>

    <td>Seven</td>

    <td>Eight</td>

  </tr>

  <tr>

    <td>Nine</td>

    <td>Ten</td>

    <td>Eleven</td>

    <td>Twelve</td>

  </tr>

</table>

My oh my! Way too much code!

Now lets see how we can convert this same table to CSS, and how much less code we can use!

<style type="text/css">

<!--

.downWithTables {

    width: 250px;

}

.downWithTables li {

    display: inline;

    width: 25%;

    float: left;

    margin: 0px;

    padding: 0px;

}

.downWithTables ul {

    padding: 0px;

    margin: 0px;

}

-->

</style>

<!-- Don't forget, style tags go in the "head" section! -->

<div class="downWithTables">

<ul>

<li>One</li>

<li>Two</li>

<li>Three</li>

<li>Four</li>

<li>Five</li>

<li>Six</li>

<li>Seven</li>

<li>Eight</li>

<li>Nine</li>

<li>Ten</li>

<li>Eleven</li>

<li>Twelve</li>

</ul>

</div>
Now this is nowhere near perfect, but it does the trick!  Remember that the <style> tags belong in the head section, but you can even put them in a separate document.  This allows you to cut back your code to content ratio and you will be able to quickly change your tables in the future!