Opinion

They have: 11 posts

Joined: May 2006

What do you prefer using to create layouts? tables, div tags with absolute position or div tags with relative position. Could you kindly let me know advanteages and disadvantages about each. Thanks.

waffles's picture

They have: 54 posts

Joined: Jun 2006

I use divs, but don't even have any positions really. One div I have floating on the right. Other than that, it's all default behavior. But my designs go in straight lines, so that works.

waffles Radio Coming to a set of speakers near you September 2006

He has: 490 posts

Joined: May 2005

My last site uses a table for a wrapper. There are 4 div inside all positioned by margins, and left or right commands. The text div has a 50% left command to keep text wrapped to the left side, and spaced from a picture on the right.

Doing it this way I am able to keep a fixed width, or make the site liquid, and every thing will come out relative to the size of the window opened. Smiling

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

I usually use div's, and a combination of floats and absolute positioning. I'm really not as well versed in the latest methods as I should be though.

The way I see it, the methods of building a layout can be broken down like this:

old school tables - this is easy enough for the beginner to work with but quickly gets into very messy hacks. You can easily create a simple columned layout with a table, but problems arise when you want to create graphic effects or simply have different margins on individual cells. Then you end up slicing images into bits and nesting tables to create the effects you want. Messy, and there are better ways so it's best to move away from this.

The truth is that tables were never meant to be used for laying out pages and never had the right tools available to do even semi sophisticated page layout. A table is meant to hold data, much like you'd have in a spreadsheet program. That's what they were built for. It's not for page layout but had to be used for it in the early days when there were no other options.

table framework with CSS - with this method you use tables to make a basic framework but use CSS to add formatting (such as the margin problem I mentioend above). Each cell would have an ID which would then be manipulated with CSS. I honestly don't use this much because if your'e going to go that far you might as well go all out and use div's. It is easier for people who have a hard time learning how to create layouts with CSS. But then again, it's also very easy to find pre-made CSS layouts that work very well and don't require you to figure out how to make them yourself.

div layout with CSS - IMO, using div's opens up a whole world of possibilities that weren't available with tables. There is a lot more flexibility in page layout and more ways to create different effects. There are still hacks, but there a little less basic than cutting up images into slices or using nested tables to create margins. Everything has moved further along. It is now possible to create different page structures or modify your layout for different devices. One example is having the code for a sidebar at the bottom when it actually appears on the left side. With tables the code would have to be at the top of the page - you wouldn't be able to position it elsewhere. The problem with the code being at the top is that screen readers or mobile devices have to go through all that before they get to the content (unless you used a skip navigation button which is a bit of a problem in itself). The kicker is that search engines work a lot like screen readers - they start at the top and move down. Not good for them to be reading all your navigation and less of your conetent (since some search engines only index the first 100kb).

BTW, in case you didn't know - a screen reader is a program that blind people use to read the internet. It just reads all the content out loud.

Another thing I really like about CSS-based layouts is that users can modify them if they want to. Opera and Firefox (with the stylish plugin) allow you to add your own user stylesheets and change the layout of a page if you don't like it. This can't be done if the layout is done with tables. Well, at least not as effectively.

If you look at what's coming with CSS3 you can see that CSS is really starting to resemble a regular page layout program. And doing things like that with tables really doesn't make any sense. I think in the future web design will be more like designing a page with a page layout program like inDesign or Publisher. And you would never think of using a table to lay out a page in a program like that, because there are so many better options.

So, in summary, tables are a useful method for compelte beginners or people who have a hard time learning how to create layouts with div's. However, they are limited in their potential and technically incorrect (I won't go into that becuase it tends to start arguments!). I think it's okay to use tables as long as you understand the limited potential and at least try to play with CSS if you can.

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

I forgot to mention the problem with div layouts - there are some problems with browser compatibility and there are often work arounds needed. This can be frustrating for a lot of people. Many will try CSS, have trouble, and switch back to tables. There is a learning curve involved, and even once you get up that curve there are always problems to figure out as you get more advanced. It can be challenging but worth it in the end.

timjpriebe's picture

He has: 2,667 posts

Joined: Dec 2004

I'm pretty much on the same page as Megan. If time allows, I prefer to do HTML with CSS. But if I'm inundated with quite a bit of work/clients, I've been known to revert back to tables.

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

I can't even do tables anymore! I went to do some sample code for someone last week and I couldn't even remember what I had to do to make a tabled layout!

Busy's picture

He has: 6,151 posts

Joined: May 2001

*sends Megan a copy of NS 4 with tables 101 Laughing out loud hehe*

I've been finding it depends on the clients wallet, if they pay going rates and are clueless especially in the content area or they keep changing their minds, I use tables as it can be quicker and easier, if the wallet is open wide then I'll spend the time doing a (mostly) CSS layout, although a couple I have resorted back to tables as the layout just wouldn't work - to boxy, to slow to load (to many background images).

I'm doing a rebuild at the moment that was recently updated by the original company that did the site, (they still using frontpage), normally I'd do this type with just tables (is freebie as they gave me awesome discount on my van's tyres, normaly $300 each) but am doing a lot of it in CSS not so much for the client but for the company who made the site in hope to open their eyes as to what is possible - fingers crossed the site comes out well lol.

They have: 20 posts

Joined: Jul 2006

I agree with everything stated above but I always take this approach. I first check the client requirements and see if the minimum browser version will allow DIVs. Things like some mobile devices have problems rendering DIVs. Next thing I do is figure out if the layout is really going to benefit from using DIVs. The only really difference from a table and DIV (aside from the code) is that a DIV can be a non blocked component and be repositioned and a tabled can't. If the layout really isn't going to benefit from using DIVs I'll use tables.

Hope this helps.

Johnny

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.