Converting to tableless design

[Mike]

Hi all,

I recently got a design that used regular HTML (with some CSS), and had lots of tables. I wanted it tableless, so got a guy to make it with div tags etc.

I tried it and mine wouldn't work in firefox, and it also took a few hours. This guy did it in under an hour.

My question, is there a quick way to do this or is it just experience?

[KLB]

The easiest way to do this is to not use IE during the development phase until you are ready to do final testing and tweaking. IE allows for some goofy stuff which can and will lead you down bad paths.

The easiest way to convert to a tableless design is to hand code your template and test using Firefox and Firefox's built in DOM inspector and Web Developer extension. The DOM inspector and Web Developer extension will help you find and eliminate your coding errors. You will find fewer cross browser issues with a tableless design if you make sure it validates to W3C specifications. I personally recommend validating to HTML4.01 Strict and CSS2.

Probably my simplest tableless website is http://EnglishRussianTranslations.com. This site is a very simple site so it should be very easy for you to look at the HTML and CSS and understand what is going on.

The most "evil"/complicated tableless site I've created is http://EnvironmentalChemistry.com. If you view this site using Firefox and then drill through its structure using the DOM inspector, you might get ideas as to how to lay out a really complicated site. With either site you can turn off CSS to see how the HTML flows without CSS.

[Mike]

How long did it take to code the translation site Ken?

I guess it must just be experience from reading what you have said...

[KLB]

For me it was more of a drawn out evolution than and translation. My environmental chemistry site is quite old and quite large. I actually started it well before there were things like PHP. I started off with static pages that used a table layout and eventually broke the table apart into Apache includes. From this I migrated to PHP and then eventually phased out tables in favor of CSS.

Bit by bit, CSS took over more of my formating until one day almost everything but structural layout was handled by CSS. At that point I started converting table related tags to DIV tags. My EC site was a challenge because I wanted the left-hand ad column to show up after my right-hand menu column with the middle content column appearing first in the HTML source. Figuring out how to pull this off took some work.

The very boiled down version of my code structure is as follows:

Pseudocode
<div id="MainWrapper" style="width:770px;margin:3px auto">
<div id="TitleBar"><!--Title Stuff //--></div>
<div id="MainBody">
<DIV id="ContentWrapper" style="width:610px;float:right">
<DIV id="ContentArea" style="Width:440px;float:left;overflow:hidden;">
<!-- PAGE CONTENT //-->
</DIV>
<DIV id="RightSidebar" style="width:160px;float:left;overflow:hidden;">
<!-- Right Side Menu //-->
</div>
</div>
<div id="LeftAdColumn" style="float:left;width:160px;overflow:hidden;">
<!-- Left Ad Column //-->
</div>
</div>
<div id="Footer"><!-- Footer Stuff //--></div>
</div>
This is only enough code to give you the idea. You also have to define margins, padding and borders. I found allowing a couple pixels of extra space between the left menu and the content wrapper to be a good way to allow for goofy stuff. Other things I did was to define all fonts using PX, set columns' maximum width and set overflow to hidden. These were all important to ensure that the width of columns didn't change from computer to computer and thus cause problems with the Ad menu not being able to slip up into its place.

Obviously the layout can be much easier if one isn't trying to "trick" the HTML flow the way I was, but I didn't want banner ads and related detritus to be the first thing SEs and users who didn't support StyleSheets (e.g. Braille readers) "saw".