Good Design for making money and getting website traffic - Managing your tables

You have your own website and you do all the design and layout work and it's pretty cool right? Except when it comes to those tricky tables. They are the bane of every beginning webmaster. You think you got the look of your website just right and when you look at it in a browser it is a mess. The tables didn't react the way they were supposed to. It is almost as if the tables have a mind of their own. So you spend endless time resizing them and tinkering with them to try to get the design stable.

The problem is that different browsers apply different rules to tables. And different versions of browsers are even different. So the tables come out looking different than you expected. The cells are displayed in different widths than you expected. There is a solution to this that works very well.

Make some transparent shims for your table. Let me explain.

Here is a table I made. It has four colums. Looks ok right?

Now I have added some text to some of the cells. You see that the cells grown in height and this is to be expected. You can handle this.

But the disconcerting thing that happens is that when you look at this table with a browser the columns lose their shape. Look at this example:

The browser made some decisions and displayed the table like this and this kind of thing can drive a webmaster crazy! But there is an easy way to fix this.

You make transparent shims in the column width you want and you put them inside the cells of the table.

In this case I want my table to remain 400 pixels wide and I want each table column to remain 100 pixels wide so everything is nice and even. So I made a shim that is 100 pixels wide and only 1 pixel in height.

example shim here shown in color (you should make a transparent one)


Now I placed this shim in each of the columns, (in the top row)

Notice what happens. The top row of the table seemed to have disappeared but it didn't. It simply contracted to fit the size of the shim.

Now watch what happens when we re-enter the text

Looks good so far! Now let's test it out in our browser

And voila! The table columns maintain their shape. No more stretching of the columns according to the amount of text .

Woo Hoo! No more tinkering with tables and column sizes! It is every webmasters dream. I have just saved you countless hours of work.

It is a real simple thing but it works wonders to help you control the look of your tables. I keep a whole selecton of shims in various sizes. Remember the shims don't have to be the same size and you should make them transparent so they dont show up in the browser. For a page like this I could have made the shims white and that would have been fine but they might be no good for tables in pages with a different background color.

 

 

 

 

 

 


Custom Search


SUBJECTS

http://www.stormthecastle.com
This is a Stormthecastle.com website

 

 


 
New additions to this site:
 
Table of Contents for the Tutorial
 
Here are some great website ideas for making money
Recommended Books web design, google, amazon, search engine optimization - A little information can go a long way
Money Making Advanced Topics
More Tutorials on Basic Web design issues