Create a Tableless (CSS) Layout

I bet you’ve heard the coding obsessed web designers getting their knickers in a twist about CSS layouts, yet you don’t know the first thing about them, right? Obviously that’s why you’re here! Well, providing you have a little CSS knowledge and know how to separate style from content, you should find this tutorial a doddle!

Tableless Layout Basics

Firstly, let’s take a look at your current coding. It might look a little like this:

<html>
  <head>
    <title> my website </title>
  <meta name="keywords" content="joe bloggs' website, site, pages,">
  <meta name="author" content="joe bloggs">

  <link href="stylesheet.css" rel="stylesheet" type="text/css">
  </head>
  <body>

<table id="main">
<tr><td>
    <img src="images/bla.gif" align="left" alt="layout image 1"><br />
</td></tr>
<tr><td>
  <h1>Welcome to my website</h1>
    <p>This is my wonderful website with funky content and groovy images!</p>
</td></tr>
</table>

  </body>
</html>

Look at those terrible tables. Messy or what?! Anyway, <table>s are designed for tabular data — stuff like numbers and statistics, not for presentation of layouts. This means we have to find an alternative: <div>s — a highly adaptive block-element tag which can work just as well as tables.

A <div> works like most other HTML tags — most importantly you can give it an ID and assign attributes to it using CSS (in fact, this is the key to tableless layouts). <div>s can go inside other <div>s, can be floated, resized, recoloured and positioned. If you can do it to a table, you can do it to a <div>.

Let’s redo that page up there, assigning <div>s instead of <table>s (every ‘block’ of table needs a div):

<html>
  <head>
    <title> my website </title>
  <meta name="keywords" content="joe bloggs' website, site, pages,">
  <meta name="author" content="joe bloggs">

  <link href="stylesheet.css" rel="stylesheet" type="text/css">
  </head>
  <body>

<div id="image">
    <img src="images/bla.gif" align="left" alt="layout image 1"><br />
</div>
<div id="main">
  <h1>Welcome to my website</h1>
    <p>This is my wonderful website with funky content and groovy images!</p>
</div>

  </body>
</html>

You can now customise those <div>s using normal CSS. As we’ve given the <div>s in the above example IDs, we customise them like so:

#image {
float: left;
width: 500px;
}

..where image is the name we gave one of the <div>s in the example above. If we had assigned the <div> a class instead of an id, this is how we’d customise it:

.image {
float: left;
width: 500px;
}

There’s not much difference between the two, so be sure to assign the right thing. Now that is the basics of creating a tableless layout — using <div>s and then customising the <div>s with CSS. Now, onto actually creating CSS only templates…

Tableless Templates

So, you’ve figured out that <div>s are the magic boxes of the CSS world, now what can you do with them? Tons! Although most hardcore table-fans would try and make you believe that there’s things you can’t do with <div>s, they’re not giving you the whole truth. For example, let’s look at a common table-based layout:

header image
content column linkscolumn

A lot of people think you cannot replicate this with CSS. Try coding up three <div>s in an example page and see what you get; anything like that example above? No. This is where you need to learn about an integral part of CSS based layouts: floats.

Firstly, one thing you need to realise about floats is that once they’re assigned, the element you’ve assigned them to will ‘stick’ to the furthest side they can reach. For example, look at the example below. It is a <div> (represented in blue) floated to the left of a page/browser (black) with no other elements.

div resting against body

If you’ve got a fancy pants layout set up in/with that <div>, you probably won’t want it resting again against the left hand side of the browser. Even if you use the centering cheat the <div> will stick to that left hand side — this is where a container <div> comes in handy. A container <div> is just a normal <div>, but you assign the properties which position the main ‘bits’ to this <div>. First, let’s stick the container in the page, between the <body> tags:

  ..etc..
  <body>
<div id="container">

</div>
  </body>

  ..etc..

Now we just customise it in out stylesheet like we would a normal <div> (the code below demonstrates an example of the centering cheat; this would center the container):

body {
text-align: center; /* center things in pre-IE6 */
}
#container {
margin: 35px auto;
width: 500px;
text-align: left;
}

Our page should now look a bit like this; the container is represented in blue:

container div, centered

You’re probably thinking something like “well that’s all fine and dandy, but it doesn’t look anything like the table layout at the top of this page!” — this is where we start adding more <div>s along with some handy floats. The first <div> we add will need to replace the header. This is the easiest part, we just add a <div> inside the container, and give it an id of “header” (at the moment, just so we know which is which):

  ..etc..
  <body>
<div id="container">

    <div id="header">    </div>

</div>
  </body>

  ..etc..

In this header, you’d probably stick your top image or any fiddly text you want to flash up your style. That’s the easiest bit, and doesn’t require any floats or special properties. Now for the columns:

  ..etc..
  <body>
<div id="container">

    <div id="header">    </div>

    <div id="content">  blabla content  </div>

    <div id="sidebar">  blabla links  </div>

</div>
  </body>

  ..etc..

First decide how big you want this content column: as I set the container to 500 pixels above, 380 pixels would be a sufficient width. This leaves 120 pixels for the sidebar (links) column. Let’s specify these in our stylesheet (I’ve left the other stuff in so you know where we’re up to):

#container {
margin: 35px auto;
width: 500px;
}
#header {
width: auto;
}
#content {
width: 380px;
}
#sidebar {
width: 120px;
}

However, even with these <div>s declared, your page will still look something like this (red: header / green: content / pink: sidebar):

wrongly positioned columns

We need to give our columns some floats. As the content column is on the left, it’ll need a left float. The sidebar column is on the right, so that’ll need a right float. We assign these using CSS like so:

#content {
float: left;
width: 380px;
}
#sidebar {
float: right;
width: 120px;
}

That’s pretty much it. Your <div>s should now be correctly positioned, and should look a bit like this (without all the pretty colours):

correctly positioned columns

The two columns should float against the correct sides of the container side-by-side without problem, as long as the total of both columns does not exceed the width of the container. That means if you assign padding, margin or a border to either of the columns, you must subtract that total number from the width of the column you’ve assigned it to. If you’re still a bit clueless and need a ‘live’ example, you can download a basic header and two-column template for testing and inspiration.

Help! My container background is not appearing properly?
Certain browsers will not show the background behind floated divs unless you ‘clear’ them. To get past this little problem we need to add another div before we close our container, a footer div:

  ..etc..
    <div id="sidebar">  blabla links  </div>

    <div id="footer">    </div>

</div>
  </body>

  ..etc..

Then we clear it in our stylesheet, by adding this to the bottom:

#footer {
clear: both;
}

As simple as that!

Comments

  1. Why is it the links for your templates got an error message?

  2. Nicely done. I know this was published 6 years ago but the content is still helpful. It didn’t look right (like a container) till I added the footer div.
    Thanks for this, I needed a really simple into to tableless css design and this fit fine!

  3. Thanks – what a wonderfully simple, clear introduction!

  4. Thanks,

    This was exactly what I needed (to try and break my “table” habit.)

  5. I’m attempting to break out of my table habit (e.g. iframes, yes, shameful I know D:) and this tutorial will certainly help me do that. Thanks Jem! :)

  6. Tired and Grumpy says:

    IF I had hair I would have pulled it out, but finally I have understood DIV’s!

    Thanks

    T&G

  7. Thank you so much! This is the only explanation that helped me create a good centered page!

    I <3 you ;)

  8. Peter Jones says:

    Hi,
    Would you be able to re-link the download for Create a Tableless (CSS) Layout#?

    Thanks

    Peter Jones

  9. viralmehta1411 says:

    you really help me to do table less coding thanks….

  10. Thanks! I’ve spent about a week reading up to try and make my site look the same without using tables and I’ve finally got the answer.

    A container div had occurred to me but I didn’t know how to put it into practice. You’ve explained it very well.

  11. farshid-iran says:

    merci!

  12. Finally I understood tableless layout by reading this example.

    Keep up the good work

  13. This truly is helpful! My teacher is one of those die hard table fans, so it’s nice to beable to learn this else where.

  14. But I still don’t understand why tables are bad.

Trackbacks

  1. How to start says:

    [...] is a tutorial that explains how to make CSS tables, Create a Tableless (CSS) Layout | girlswhogeek.com And this other explains how to add CSS to tables, HTML Tables with CSS StylesAlthough tables are in [...]

  2. [...] http://girlswhogeek.com/tutorials/2006/create-a-tableless-css-layout Tagged with: Other People's Blogs • Websites • Work  If you enjoyed this article, please consider sharing it! [...]

  3. [...] some functionality in a website that you like, such as CSS sprites, a javascript image slider, or true table-less design, and practice until you get them just perfect. A great way to learn is to deconstruct other [...]

Add Comment Register



Speak Your Mind

*