HTML layout - Help with good and bad practices

weasel · July 10th, 2007, 08:37 AM

Hi there,

Just got a quick question regarding good methods and bad regarding layouts.

Im a tables and CSS man myself, but I'm wondering how bad my practices are, ie are they suitable or not.

For me, its what ever gets the job done, but im concerned I might be setting myself up for bad habbits, being self taught and all.

The way I normally develop an HTML page / template is using tables.

I usually start with a single table with a single row and no colums and set that to 100% width to get my area. All are border 0 and usually cellpad and cellspace set to between 2 and 5 depending on the design.

Also depending on the design, I usually add another table inside that probably one row and two colums, and if I need to I can add a table inside one of those colums, when I have my layout and functions in place, I normally concentrate on my colors and grafix but sometimes mock some up before hand or as needed as visual place holders / notes.

Im concerned that all these tables inside tables is a bad habbit, especially when a lot of html sites / templates now days are done using css and the div tag.
I dont have a clue about working with DIV and css only.

So, am I full of bad habbits or is my way acceptable?

Cheers

Pádraig · July 10th, 2007, 08:45 AM

I think that using tables is kind of a selfish thing to do, as it is bad for screen readers and its just plain wrong aswell!

Usings DIVs (<div>'s) and CSS is the correct way to build a site.

Take the time to learn (X)HTML and CSS. Its worth it!

MikeHopley · July 10th, 2007, 08:47 AM

Full of bad habits, I'm afraid

It's not easy to become proficient in using CSS for layouts. Once you've invested the time for learning, however, you will surely prefer CSS layouts to table layouts.

Table layouts were a brilliant hack for the 90's, but their time has passed.

Be warned, though: complex layouts in CSS are not easy, and sometimes impossible. Then again, why would you want a complex layout?

If only Internet Explorer supported display: table-cell

weasel · July 10th, 2007, 08:52 AM

I have an idea that <div> layouts are controled in majority by margin and padding etc, is this correct?
I always knew tables were "cheating" because of their ease of use, but I deffinately prefer the control you get with CSS.

I will certainly look into xhtml further. I want to start moving towards compliance with the latest ways of doing things.

I can see why things progressed to css & divs beacuse it gives you total site wide control from one or two little css files.

MikeHopley · July 10th, 2007, 09:00 AM

Quote:

Originally Posted by weasel

I have an idea that <div> layouts are controled in majority by margin and padding etc, is this correct?

That's right

Other useful properties include: width, max-width, float, and position. Some of these are pretty complex, but they allow you powerful control of your page layout if used properly.

Lchad · July 10th, 2007, 09:03 AM

I have an article coming out in the August Newsletter that lays out the benefits to hand coding versus the way you are doing things.

But you'll have to wait!!!

weasel · July 10th, 2007, 09:14 AM

Sounds just like what I need... cant wait!!!
I can feel some one or two page experiments coming on lol

The tables are strong but I must resist... heheheh

I knew I loved css for a reason when I found it.
I quite often forget all the css and html commands so I got a nice bookmark folder full of sites with refereces to what does what. If I ever need something a little more complex like text appear on mouse over image, I usually use google which has proved quite usefull.

It's like a library or the world in one little box lol

karinne · July 10th, 2007, 09:17 AM

See the stickied post or the link in my sig. Mucho goodies in that thread

weasel · July 10th, 2007, 09:21 AM

One word....
WOW

Thanks for those resources, they look like just the thing I need to get started

Thanks again!!!

Lchad · July 10th, 2007, 11:07 AM

weasel, I was a table addict too! I'd come back here and say "Are you sure about the benefits to hand coding"! I even asked the question once in my frustration.. how come ebay uses tables and I can't!

I was so slow... so unprofitable.. but honestly within no time at all, I was understanding it and I was HOOKED! Everyday I learn something new and still love it.

karinne · July 10th, 2007, 11:08 AM

I remember that addiction of yours

Lchad · July 10th, 2007, 11:11 AM

Yup... Karinne gave me my first lbig push away from Tables.
:blush-anim-cl:

pa007 · July 10th, 2007, 11:18 AM

Not just tables but nested tables! I nearly had a heart attack but luckily you are on the road to web standards heaven (though it can be a bit tricky sometimes). As Mike said some stuff can be quite complex but I would say that most things are doable and I would imagine anything you are doing now is possible with css, at a guess.

Those links that karinne has put up are amongst the best resources on the net (which is why she put them up, I imagine) and you won't go far wrong with them.

Pete.

weasel · July 10th, 2007, 12:53 PM

Cheers guys for all the great responses and encouragement.

EDIT// nested tables? One inside another?

I am following one or two of the recomended tutorials now which I hope will help me better understand how to align and marginalise using css.
I am trying to get a simple header followed by a left colum and a right larger colum for content finsihed off with a footer, but
I seem to be getting into a bit of a pickle with my left nav forcing my right side content down with it lol

I refuse to give up cos I know once it clicks in my head and I figure it out I will feel like a right plum if it beats me lol

moojoo · July 10th, 2007, 12:55 PM

Tables are good for eating on. Man oh man am I fancy! woooo! At any rate CSS/XHTML Strict imo is the best way to go. In time you will find yourself getting the same results with far less code and then you can change your whole layout etc just by editing a single style sheet! It pretty much rocks.

karinne · July 10th, 2007, 01:05 PM

Quote:

Originally Posted by weasel

I am following one or two of the recomended tutorials now which I hope will help me better understand how to align and marginalise using css.
I am trying to get a simple header followed by a left colum and a right larger colum for content finsihed off with a footer, but
I seem to be getting into a bit of a pickle with my left nav forcing my right side content down with it lol

It has to do with the box model. You need to compensate for and margins or padding or borders you set for every div.

weasel · July 10th, 2007, 01:13 PM

how would I have a div side by side? ie, like I would if I split a table row into two colums?

karinne · July 10th, 2007, 01:15 PM

setting a width to each div and setting them to float: left (or right).

The examples in the thread I sent you too, should have this.

matelot · July 10th, 2007, 01:55 PM

Tables are for tabular data, and falling under after too much wine...

The way to go is CSS (and PHP). There are plenty of tutorials out there, and endless free templates you can pull apart and examine.

Welcome to the 21st Century!

weasel · July 10th, 2007, 02:01 PM

well thats really annoying... IE spoils the lot. Lovely in FF horrible in IE... why does IE suck so badly....

Here is what I have so far,

HTML

Code:

<body>
<div id="header">Header</div>
<div id="left">Left</div>
<div id="content">Content</div>
<div id="footer">FOOTER</div>
</body>

CSS

Code:

body {
margin-left:100px;
margin-right:100px;
margin-top:50px;
padding:0;
height:100%;
background:#ffffff;
font-family:"verdana",arial;
font-size:12px;
color:#ff0000;
}


#header{
padding: 10px 10px 10px 10px;
height:100px;
background-color:#999999;
}

#left{
position:absolute;
padding:10px 10px 10px 10px;
background-color:#cccccc;
float:left;
width:200px;
}
#content{
padding:10px 10px 10px 10px;
background-color:#333333;
float:right;
width:750px;
}

#footer{
padding:10px 10px 10px 10px;
height:100px;
width:780px;
background-color:#006600;
font-family:inherit;
color:#ff0000;
}

But the footer is too short in IE but just right in FF.
Also the padding I set for the footer isnt applying in IE or FF