a lesson in css – tables away!

From everything I read about web design, tables as layout has become a dirty word. It was the thing to do a few years ago, to use tables for formatting because, yes, they gave some degree of control. And it’s easy to visualize on the page.

I knew enough to put formatting in css, like font properties, color, background. But I didn’t know how to use css to define positioning. Until now.

And hence begin the conversion exercise.

A simple display page

My gallery pictures used to sit in a grid with 3 columns and 3 rows, with all the tr and td tags well defined by width and height attributes. The top row contained the title of the page, the middle row with picture itself plus the description, and the bottom row for navigation. Logical when I first did it.

furano slope mock up

Step 1: I removed the table elements completely. The main content area is defined by #content and .body tags in css that specify the container’s position on the page. The left margin of the image container is set so it sits near the middle of the browser window.

Step 2: I added a .floatcenter property in css and applied it to the image.

Step 3: The text also gets floated.

A 5×5 grid

So now I’ve discovered how useful the float tag is, I’m can tackle the 5×5 grid on the personal page. Originally it was a nested table, 5 rows by 5 columns, with dimension for each cell at 100px. It was done using loads (and I mean loads) of tr and td tags, each fixed by width, height, alignment and class definitions. A nightamare to maintain and as I found out, not as fixed as I thought.

I debated keeping it as a table but I want to see if I can use css. And I can!

Step 1: I set a new class that defines a box 100×100 with 2-color borders which floats to the left.

.box100 {
float:left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #999999;
margin:1px;
padding: 4px;
width:100px;
height:100px;
border-width: thin;
border-style: solid;
border-color: #CCCCCC #999999 #999999 #CCCCCC;
}

I know according to strict css rules I shouldn’t be using height but for because it works I’ll leave it for the time being.

Step 2: I like to have the title in bold, but on the same line as the text. So I used the smalltitle class.

.smalltitle {
font-family:verdana, arial, geneva, helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
color: #666666;
}

Step 3: In the html each cell is defined by a <div> class:

<div class=”box100″>
<span class=”smalltitle”>to do list</span>
pay bills, put pictures up on walls, plants
</div>

Step 4: Finally to separate the rows I used a <br clear=”all” /> tag.

Probably not the most elegant, and I dread any proper web designer reading through this. But it seems to work. So I’m kinda happy.