August 17, 2005 — A cleaner table layout   6 comments

      <td colspan=“2” bgcolor=“#ffffff”>
        
A Title or Header Might Go Here
      

    

    

      <td bgcolor=“#ffffff”>
        A sidebar. I usually put an image here.       

      <td bgcolor=“#ffffff”>
        

The body of my post goes here.

      

    

  

A Better Table Layout
Image of a sunset on a lake.

I got this idea from somewhere else. I apologize that I can’t think of the exact site, but it is on Y!360 somewhere. If you think you know where, let me know and I’ll make sure I assign proper credit here.

Okay, after all that, here is a simplier (and, to my eye, more elegant) table layout than one I posted earlier that accomplishes a table border. This technique uses only one table and “normal” HTML attributes.

It still doesn’t follow modern web standards like stylesheets (CSS,) but it feels just a little less dirty to me. Also, there is not a great deal of control regarding the border attributes. That is, the border is the same color and thickness for the whole table. With CSS, one would be able to change the color, thickness and style of each side the border in each cell.

But, we play with what we’ve got, so here goes.

The table I used here for this post is an example of what I mean. Here is the simplified HTML:

<table border=“0” cellpadding=“5” cellspacing=“1” bgcolor=“#800080” summary=“Basic blog layout”>
  <tbody align
=“left” valign=“top”>
    

Below are some variations. Experiment yourself.

Two columns, thin border, more cellpadding, centered.
A sidebar with a
different background
color.

The body of my post goes here.

Three columns, thicker border.
A sidebar.

The body of my post goes here.

Another sidebar.
Advertisements

Posted Wednesday, August 17, 2005 by Grant in Random

6 responses to “August 17, 2005 — A cleaner table layout

Subscribe to comments with RSS.

  1. Awwwww , bless you my friend. Im going out of my mind trying to get these dang tables to line up in IE, and I noticed that Mister E has problems in Firefox. It’s crazy and my wrist hurts. LOL Im snagging your html for a quick study after a swim and a margarita. Thanks hun.
    Your the best.

  2. Thanks. I hope it helps.

    Like I said, I saw this technique on another blog, so I’m only spreading the love, not originating it. 🙂

    The real missing “link” is the Width attribute for tables and cells. Without it, the cells and tables collapse or stretch to the content.

    Rant: It’s frustrating to diligently apply oneself to following web standards to create maintainable, cross-browser code and then have to unlearn all that to kludge together these work-arounds.

    — Grant

  3. wow this is interesting…i might try it out…of course most likely i will end up messing the whole thing up…

  4. Thanks again Grant … I was about to relearn all those messy html. I kept telling myself .. no way I’m going to do it. And here you are!!! I’ll try yours and see if anything can come out of it, as good looking as your pages.

  5. Ok I give… I dont get it ( blond) I tried it & it didnt work … HELP!!!!???
    🙂
    Lisa

  6. ok, i seem to have problems responding to you Grant, from my e-mail, i just wanted to know how to insert the pictures in the side bar, sorry am a newbie and i found something i am really interested in…thank you….

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: