Why Tables For Layout Is Stupid problems defined, solutions offered

this covers what every web developer/designer should know, first and foremost. although this resource has been around since 2003, there are still some things to learn from it, especially for beginners. the gist of it all is this: avoid TABLES for LAYOUT at all cost.

 

Why tables for layout is stupid: problems defined, solutions offered

 

MAIN SECTIONS COVERED:

Introduction

Tables existed in HTML for one reason: To display tabular data. But then border="0" made it possible for designers to have a grid upon which to lay out images and text. Still the most dominant means of designing visually rich Web sites, the use of tables is now actually interfering with building a better, more accessible, flexible, and functional Web. Find out where the problems stem from, and learn solutions to create transitional or completely table-less layout.

Background

Problems with using tables

Why CSS is better than tables

Transitional designs

Getting started with CSS

Thinking about markup

Thinking about your pages and site

Doing it

Examples, links, and resources

For those who would want everything above on one long, flowing page: https://www.hotdesign.com/seybold/everything.html

You can shove this presentation down every web developer's throat, but not every web developer is going to go into div based designs. I've tried, and tried again, but many people simply do not want to convert to non-table based designs.

Edited June 15, 2007 by Tetraca (see edit history)

Great, I never really understood tables at all! Bye, tables! I won't use you, except for MySQL stuff. Thanks you!

You can shove this presentation down every web developer's throat, but not every web developer is going to go into div based designs. I've tried, and tried again, but many people simply do not want to convert to non-table based designs.

i know. web developers have free will, and they could do anything they want to do with their web creations. arguments for and against table layouts is up in the air, and it is up to each developer which to embrace. if i'm going to shove this down a web developer's throat, he will not choke as much, unlike with using table layouts.

I've come across that site before. If i remember correctly, in the end of it it says that you don't have to get rid of tables altogether, you can use them for the structure of your design—which is what i do when i don't feel like messing around with floats: they can be pretty bothersome. I've also ran into plenty of times where using a table element was better than going the "CSS" way. I say don't get rid of tables, just get rid of the unnecessaries.

Well to make the argument even worse, I been on and off designing templates and slowly converting them to divs, you wouldn't believe the process it takes to make a tabless design when converting those tables. But I would have to tend to agree depending on what kind of site your making you could go either way. As my web design teacher put tables are used for organizing databases, especially using dating from MySQL. But if you making a portfolio site then yeah throw tables out the window. However, most internet software still uses tables i.e (forums, news scripts), so like I mention tables are not going to go away and you be surprised how many sites stick to standards that use tables. So it's a matter of opinion of where a person should go, but the best advice I can give learn both ways and you don't have to rely on one set of rules.

If you start the design off with DIVs rather than tables, as opposed to converting from tables to DIVs then its really no extra work and no more difficult. OK, there can be slight issues when IE decides to throw standards out the window and repeatedly stamp on them, but I generally find DIVs work better than tables for layout.Unfortunately, most people using PS to design their site will export it as an HTML page comprising of tables. I seem to remember that even if you tell it to export with DIVs, all it does is put each one in a table cell Until this changes, most designers will use tables simply because that is what they're used to. Worryingly, most are still being taught to use tables for layout rather than DIVs, and I cannot for the life of me see why.

I have stopped using tables a long time ago, that is the main reason why I use Div's instead of tables. When I was first learning html I sort of skipped the tables and went straight through to divs, which was more logical to me than tables, it just made more sense. The only pain I have experienced with divs is the hacks and all the other workarounds needed to make pages display well on more than one browser. I wish they all rendered things the same way.

i agree with this one. but i admit that i've used tables before to design my previous blog's layout. i didn't have enough time in shifting to div's because school was becoming hectic. one of the websites i saw mentioned that nested tables affect the loading time of your websites. the rendering time of the page gets affected if your tables are nested. i actually have proven this on my site alone. even though i wasn't so affected by it, i knew i wasn't doing something nice. i guess that's one of the reasons why i shifted to a wordpress installation so i could start clean from there.

I have also used tables at first but after a certain amount of time I have tried to move away from it. Once you get the technique down to using non-table web design then it looks amazing, easier to handle, and its just overrall neater. But like said above a lot of developers are comfortable with tables and wish to stay with them... But if that is what they like, than more power to them I say. Great threat, post, and information serverph!

One reason tables slow down a website is that the entire table is loaded before anything is displayed. The table needs to calculate everything before it can display the content. Each cell's measurements of width and height are figured out first, because each cell has an affect on the other ones. Say a table has three cells with widths of 25%, 50% and what ever is left. The computer does not know where to put the second cell till it has drawn the first cell. Also the width of the last cell is unknown until the widths of the other cells have been been calculated. If the web designer put a cell width of blank, 50% and 50% then it is easy to see that the first cell cannot be drawn till all the cells have been laid out. I like divs myself because they can be displayed right away, and do not have to wait for other items. This makes a difference especially with dial up users.