Going Tableless

Posts: 21 · Posted: Wed May 14, 2008 3:32 pm

Tableless design is something that every designer should know how to do. I've vowed to create all apps without the use a single table and have learned a lot good xhtml / css along the way. The most valuable lesson for me was gaining a basic understanding of the css float attribute.

Reply to this post to share your css tips for going tableless.

Post your table and I'll show you how to do it with less actually code using divs.

The internet will be a better place for it.

Very Happy

Posts: 21 · Posted: Sun May 25, 2008 2:25 pm

Here is an example of using tables. This is the output from photoshop after slicing up an image. Below it will be the same thing after I converted to tableless design.

Code:

Going tableless means less code in your html. It is easier for text based browsers to understand and puts all the definitions in an external style sheet. This means removing the need to edit your html later on. Using this method allows you to edit your style sheet instead.

Code:

Now isn't that much nicer.

Here is the css required.

Code:

#calculatorWrapper {
width:248px;
height:319px;
display:block;
position:relative;
margin-left:auto;
margin-right:auto;
}

#calcTop {
background-image:url(../images/calculator_01.jpg);
width:248px;
height:22px;
}

#calc02 {
background-image:url(../images/calculator_02.jpg);
width:20px;
height:50px;
float:left;
}

#calc03 {
background-image:url(../images/calculator_03.jpg);
width:205px;
height:50px;
float:left;
}

#calc04 {
background-image:url(../images/calculator_04.jpg);
width:23px;
height:50px;
float:left;
}

#calc05 {
clear:left;
background-image:url(../images/calculator_05.jpg);
width:248px;
height:22px;
}

.calcBtn1 {
float:left;
background-image:url(../images/calculator_10.jpg);
width:30px;
height:64px;
}
.calcBtn2 {
float:left;
background-image:url(../images/calculator_11.jpg);
width:185px;
height:64px;
}
.calcBtn3 {
float:left;
background-image:url(../images/calculator_12.jpg);
width:33px;
height:64px;
}

#calcBottom {
clear:left;
background-image:url(../images/calculator_16.jpg);
width:248px;
height:54px;
}

You can see this code live in action here. I've used it to for designing a form. And inserted form elements in between the div tags.

http://laweightlosssurgery.com/bmic.html