PDA

View Full Version : Too many tables



Spider
01-28-2009, 09:54 AM
I was reading an article about Bad website design and a list of No-nos included "Too many tables."

The author didn't say how many was too many nor why too many tables was "bad design."

Any suggestions? How many are too many and why are too many not good? Or was that bad advice?

vangogh
01-28-2009, 12:48 PM
Depends on the purpose of the site or page. Tables shouldn't be used for layout. It's how sites used to be built, but the better way to build a site is to use a combination of html and css. html for the structure and css for the presentation. One table used for the layout of a web page is one table too many.

However tables certainly have their use. If you're presenting tabular data for your content then it's completely appropriate to use a table for that data. There's really no limit to how many of those tables you can use. It depends on the content itself. If you're writing an article that compares information from 15 sets of data then use 15 tables to display that data.

I can't tell you whether or not the information in the article you read was good or bad without reading the article, but the general advice not to use "too many tables" doesn't really make sense. It depends on the context you're using them.

For layout you should use exactly 0 tables.
For tabular data you should use as many as you need for your specific content.

nealrm
01-28-2009, 01:42 PM
Vangogh,
I think you are a little strict on the no layout tables rule. I agree you should not use table multiple layers deep, a single or dual layer table should not cause any issues.

Definatly avoid using tables that are several (>3) layers deep for any reason.

cbscreative
01-28-2009, 01:57 PM
For the most part, the only reason to use tables for layout is not knowing CSS. Tables can also present maintenance problems. Suppose you want to insert a "cell" between two others in a 3 column layout. There are tools to make this easier, but it presents coding issues you would not have to worry about using CSS. Style based pages are easy to update and maintain, table based pages can become labor intensive.

vangogh
01-28-2009, 02:12 PM
Sorry nealrm, but I'm not being strict at all about the tables. Using tables for a layout is not the right way to build a site. Even a single table causes problems.

They take longer to load in a browser
They make it much more difficult to maintain a site
They make it more difficult to control the layout

I'll go as far to say if you hired a developer who builds your site with tables you've hired a poor developer. Sorry, but I'm not being hard at all. Tables are not the way to build a site layout. Table based layouts are a legacy hack when there wasn't a better way. A very clever and useful hack at one time, but one that is no longer necessary and no longer recommended. Quite honestly the only people you see using tables for layout today are those who aren't willing to take the time to learn css and layout a site the correct way.

Feel free to use tables. You can certainly make a site layout work using them. But over the life of the site you'll spend more time and money making changes to the site and you'll probably run into more problems with your site not quite displaying the way you want.

You can force a nail into a wall using a screwdriver, but that doesn't mean you should use one to drive a nail. You should still use a hammer.

orion_joel
01-29-2009, 11:15 PM
I think i would tend to agree with Vangogh on the tables issue, the primary reason is that even using just a table in the normal content to show a little data, can sometimes cause problems trying to get the open and close right for the start and end of a table, and then when you start to use it for the layout as well as displaying data in the content, it can get messy, and for larger pages within a site if they have a few tables it can get quite hard to find which open or close is affecting your design sometimes.

vangogh
01-29-2009, 11:58 PM
Granted this isn't scientific, but every developer I've ever known who knew how to build sites with either css or tables, chooses to build them with css. And every person I've ever encountered who defended tables didn't really know how to develop an all css layout by their own admission.

CSS layouts are simply a better way to develop websites, which is why you should use exactly 0 tables in your layout.

Spider
01-30-2009, 12:11 AM
Thank you, guys - very interesting.

vangogh
01-30-2009, 12:16 AM
Frederick, do you have a link to the article you read? It would be interesting to read. I know why css is better to use than tables for the layout of a website, but I'm always curious as to the reasons others give.

billbenson
01-30-2009, 06:48 AM
A few years back I read an article on a web design site stating that while css was better, they continued to use table layout because of cross browser support issues.

I just took a quick look at the source for a couple of large sites that I know were using tables a while back. This includes several large news sites as well as yahoo. All are using css today. When exactly they made the change, I'm not sure. When the big boys start using css for layout, you know its time to make the change as well.

That doesn't mean you shouldn't use a table for tabular data though. I can't see that ever hurting you. I haven't seen anything indicating its going to be phased out either.

vangogh
01-30-2009, 01:34 PM
The cross browser issues are more to do with a lack of skill than anything in the technology. You can develop cross browser layouts with either a table based or css layout perfectly fine. The main reason people usually argue in favor of the table based layout is a lack of skill doing the same thing with css. I've yet to see anyone offer any other reason. All the usual arguments against css could be easily solved by learning css a little better.

I've been developing css sites for years and there have always been ways to deal with the cross browser issues. Today those issues really break down to a few tweaks for Internet Explorer since most every other browser in existence adheres pretty well to the standards. My current process is to develop a site in Firefox (currently my preferred browser) and periodically test the site in other browsers. At the end I generally have about a half dozen lines of css at most that need to be tweaked for IE, which I'll include in an IE specific stylesheet. I'll use a conditional comment to show that stylesheet to IE only and can even easily control which version of IE sees it.

All told it adds about 5 minutes of development time and is quite easy to achieve. It's much easier to do than it is to explain.

Something most people don't know about tables. In order for a browser to display a table it needs to read the code twice. Before it can begin to display a table cell the browser needs to first understand how many columns and rows the table has. So it reads the code once to understand the basic structure and then a second time to display the table. If you've ever been to a site that shows as mostly empty and then suddenly the whole site appears it's generally because of the wait time while browsers are making that first pass at the table code.

As you start nesting tables inside other tables it becomes more complcated for the browser and so the wait time becomes longer.

Here's an old article about ESPN switching from tables to css in a redesign (http://www.mikeindustries.com/blog/archive/2003/06/espn-interview). It's from 2003. Among other things here is the savings in bandwidth as reported in in the article.

Projected bandwidth savings:



* 2 terabytes/day
* 61 terabytes/month
* 730 terabytes/year


One more thing to add to the discussion. Usually if you want to know the best way to do something you consult an expert in that something. If you want to know how to build a rocket you ask a NASA engineer and not the owner of the local grocery. Go out and find the people who are the thought leaders in web design and development. Find even one that recommends using tables to layout your site. I'll save you time. You won't find any, because there are no good reasons to layout a site with tables other than not understanding how to layout a site with css.

nealrm
01-30-2009, 02:34 PM
Ok Vangogh we need to learn more about CSS. So is there somewhere on the web or a book with good tutorials? I have looked around and most of the site either offer simple or intermediate instructions. Even the "advanced" tutorials don't teach much.

rezzy
01-30-2009, 02:38 PM
I would also like to note, that although I also believe CSS is the only way to layout a site. Each browser can see things slightly different.

Margins, padding, font sizes and spaces are rendered differently in each browser. Which can be a drag sometimes when trying to space certain elements in page.

A last point to why CSS is better. CSS allows it to be removed, so visitors can view your website without all the extra pictures and content. This is needed for people who are visually handicapped or have color perception problems.

Another thing that does not belong in modern design are: frames, inline css and inline code in general!

HTML is meant for visible text. Its not meant to layout out a page! :D

Just my two cents.

rezzy
01-30-2009, 02:40 PM
Ok Vangogh we need to learn more about CSS. So is there somewhere on the web or a book with good tutorials? I have looked around and most of the site either offer simple or intermediate instructions. Even the "advanced" tutorials don't teach much.

Well, what are you looking to learn? I think theres such a variety of things you can learn. Are you looking for help in just setting up a basic page with CSS?

phanio
01-30-2009, 02:59 PM
Most of the so called manuals out there for web design and layout start out with using tables. I started this way only two years ago and still use some when I just can’t get the CSS to do what I want. But, CSS (the little I know about it) does seem to work better in most situations.

I too would like to know of a good design book using CSS.

rezzy
01-30-2009, 03:28 PM
For those interested I could write up tutorial for doing somethings in CSS and post it later today. I'll start with the basics and build up from there.

vangogh
01-30-2009, 04:17 PM
Ok, I'll definitely put something together that's a list of resources and tutorials or write something up on my own. I've been needing ideas for my blog anyway.

Here are two posts from my blog:

2 Column CSS Layout (http://www.vanseodesign.com/blog/css/2-column-css-layout/)
3 Column CSS Layout (http://www.vanseodesign.com/blog/css/3-column-css-layout/)

to get you started. I actually do things a little differently now, but everything in the posts will still work and hopefully makes the concepts easy to understand. Probably time to update both posts, though.

Much of what I learned was from the books of Eric Meyer (http://meyerweb.com/eric/writing.html), particularly Eric Meyer on CSS. The second one More Eric Meyer... came out after I was already pretty good with css, but I assume it's just as good. In each he takes a typical table based layout and slowly works them to be css layouts. The books are a few years old so there may be better techniques now, but I would think they're still good at getting the concepts across.

To get the best use of the books download the code and actually type through each change to see what's happening.

A few tips:

I won't lie and tell you you'll be building a perfect css layout with your first site. You won't it takes some practice, but it gets easier with each site. Try to understand why something works or doesn't instead of just knowing it does or doesn't work. The why will help you solve different problems. The what just helps you solve the one.

Joel is right about the different defaults across browsers. A good example are lists. I forget which does which, but between IE and Firefox one uses margins to indent the list and the other uses padding. So when you code a list you start with

ol {margin:0; padding:0}

and then they should be the same in both browsers. When you want to add some indent pick either margin or padding and add some back in. Lists aren't the only place browsers have different defaults.

The above has led to the idea of css resets, where you zero out a number of elements. Again Eric Meyer to the rescue. He's created what's become the default css reset (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/). I'm not using it myself since I have enough experience to know what elements I need to reset, but you may find it helpful. At the very least you'll get an idea for which elements will have different defaults across browsers.

One common thing I've seen with new css developer, including myself, is that we gravitate toward positioning to layout a site. Positioning (absolute and relative) is generally not the best way to layout a site. It can become unwieldy in a hurry. Try to master floats though they may seem more difficult to work with at first.

A big part of the trick with css layouts is realizing you don't need to do as much as you think with floats or positioning. Usually you can let everything just lie where it naturally will and then find the few key elements that do need to be floated or positioned.

If you look at most websites you'll see the layout is generally some combination of the following:



header
footer
main content area
sidebar


There may be one sidebar 5 sidebars or no sidebars. You might even think of the sidebars + main content area as a set of columns.

Try to master creating some basic layouts and then start refining what's inside them. When you see a design image, think about how the various parts might fit into one of the elements above.

Not every designs needs to or should fit into the above and if you can find ways to break out of the typically you've probably created a more interesting design. But before you can break the rules successful it's good to know the rules and why they work.

nealrm
01-30-2009, 04:18 PM
Well, what are you looking to learn? I think theres such a variety of things you can learn. Are you looking for help in just setting up a basic page with CSS?

No, it more advanced than that. I'm trying to get an image, the accompaning text and background to resize correctly. So far I have been able to only get 2 of the 3 to scale right.

vangogh
01-30-2009, 04:25 PM
Feel free to post the code or link to the page in question if it's online. I'm sure someone can figure out a way to help make it work.

rezzy
01-30-2009, 04:55 PM
No, it more advanced than that. I'm trying to get an image, the accompaning text and background to resize correctly. So far I have been able to only get 2 of the 3 to scale right.

Please link them. I would like to mention a tool which I found very useful in helping me work through CSS, and programming projects I work on.

Its a Firefox plug-in called "Web Developer". When creating css it will highlight the divs and provides alot of other helpful tools we programming the behind the scenes code and for getting layout stuff right.

One problem maybe, you havent used the right hook. CSS works by you creating a hook in the html code, then refrencing that in CSS and manipulating it.

For instance.
HTML
<h1>Header Text </h1>

CSS
h1 { font-size: 12px; }

This will make all h1 tags a small 12 pt font.

I just thought of another reason why CSS is great. It allows a level of interactivity to be introduced into your site. Hoverover effects in text, images etc. Without using javascript or some other bulky program.

orion_joel
01-30-2009, 10:30 PM
I think the most important thing that you need to remember in moving from tables to CSS is that when you use tables and a page loads, it loads every <TR><TD> and related properties of those tags. You go to the next page on your site and it loads them all again. When you do it with CSS the browser gets the css file, and stores it to cache. So each time that file is called by your site, it isn't truly loading it again, it knows what is there. Where as you may think each of your pages has the same layout with tables, but every page is a different file the browser does not know they have anything to do with one another except they are part of the same site as far as a web browser is concerned they would be two entirely different websites because they have a different file name.

nealrm
01-30-2009, 11:23 PM
Feel free to post the code or link to the page in question if it's online. I'm sure someone can figure out a way to help make it work.

So that I didn't highjack this thread I posted the request here (http://www.small-business-forum.net/website-reviews/955-css-help.html).

vangogh
01-31-2009, 12:27 AM
Good point Joel. Of course that only works if your css is in an external file, but that's generally the case. It's another way css speeds up the load time of a website where a table slows it down.

orion_joel
01-31-2009, 08:11 AM
To use inline CSS is probably just about as bad as using tables, it duplicates the code that displays the page to much, to the point that you lose any gain, i believe

rezzy
01-31-2009, 08:23 AM
Right on Joel. Inline css, as I mentioned in a previous post is one thing that doesnt make much since. It defeats alot of the reasons for using CSS.

Spider
01-31-2009, 01:43 PM
Thanks for your comments, guys - most interesting. I'm afraid I might have missed or misunderstood some of the information, though. Considering that I am not a web developer/designer and don't create websites day in and day out, I have little need, for example, for a coding method that makes multiple page revisions quick and easy. Because I never have to revise multiple pages - I might do a pages now and again.

So, the reasons I saw for css being 'better' than tables were very good reasons for a designer-business but not so necessary for someone who just likes to potter around with his own site. Horses for courses, right?

Am I correct in understanding from you all that serp positiong is not affected by whether the code is css or tables? That's what I understood from this or maybe another thread in this forum. (Same participants, different location!)

Also, Thank you, VG, for the mini-course on getting started in css. I had been thinking I ought to learn css and would, when I get round to it, but you sticking that information under my nose, so to speak, may have actually got the ball rolling for me. So, thanks for posting it.

rezzy
01-31-2009, 03:08 PM
Spider, using css is a best practice. Of course there are many ways to skin a cat, but which one is the most humane and socially accepted.

CSS is great because like you mentioned (I think) it allows sweeping changes to be made to a site.

What could be better? Change one file and everything else is modified to look the same, consistency is always best in making a site.

vangogh
01-31-2009, 06:49 PM
Frederick, I think there are more advantages to css than the maintenance and being able to make revisions easily, but just sticking with that one thing, I've known many people who said they would never change their site and then later did. You may or may not make those kind of changes, but if you decide one day you do want to make those changes wouldn't it be nice to your site is set up in a way to make those changes easy?

Personally I like doing things that will work well now and in the future even if I don't know what I plan to do in the future. Just something to consider. Also even a change to a single page now and again is usually easier with css than tables. Depends on the change of course.

With css and ranking it was probably me who said it wasn't a big deal to use css. I think it was in another thread. A couple things to know.

There's plenty of debate about whether or not css leads to better SERPs. Some people swear by it and others think it has no effect. My thoughts are that search engines are interested in ranking content and not code. I think someone who understand search engine optimization can build a site with either tables or css that pleases search engine spiders. And a poor developer could create a site with either that cause problems.

You can make coding mistakes that do trip up search spiders to the degree that they can't find your content or see it in a way that wasn't intended causing it to rank poorly.

Generally css ends up with leaner code. Tables tend to create a more complex structure which increases the odds of making mistakes that trip up search engines. A greater probability doesn't mean you'll make those mistakes of course, which is why I think css doesn't automatically lead to better SERPs.

Still most people who develop sites and know seo will choose to create a site using an all css layout, including myself. If a search engine was going to prefer one or the other now or in the future I would think they'd sooner prefer css.

Ultimately I don't think using a table-based layout will automatically hurt your rankings, but you can probably do more things using css that will help your ranking. CSS gives you greater control over a lot of things.

Glad to help with the mini-tutorial, especially if it gets you started learning css. The basics of css are no more difficult to learn than tables. The hardest part is probably the all css layout. The best way to start would be to learn the syntax and change some basic presentational things. Play around with colors through css, change your font-size and style with css. That sort of thing. You can still use a table based layout and use css to control many things.

It'll likely be easier to get started with css that way instead of trying to work on the all css layouts. Once you feel more comfortable styling individual elements you can move into using css for the layout of an entire page or site.

Spider
01-31-2009, 07:07 PM
Thanks, VG. At this point in time. I think I'd be more likely to try it the other way round - wrapping some css around existing tabled content to see what happens. Maybe that would be a disaster, but we'll find out.

One of the reasons I like tables is the very reason that pro designers don't, I suppose - the one-page at a time. I have become quite proficient with tables and I often find that ooching a column a little wider on one page accommodates certain text better without the pages looking any different - I mean, who (being visitors) can tell if a column is 200 px wide or 202px wide. Looks the same, right, but isn't and text with some long words might fit better if that one page's column is a teeny-bit bigger.

But now I have some beginning css code, I will give it a try. Who knows, next year I might be on here extolling the virtues of css.

orion_joel
01-31-2009, 07:49 PM
I thought it might have been said here, and it probably was you rezzy. Just did not have the time to go back and look when i posted.

You are probably to some extend correct in saying that people visually cannot notice a 2px difference. (Although i have noticed myself what appears to be a 1px misalignment of two elements on the wordpress new post admin page. But i can be kind of picky and find some really strange little things at times.)

Where you will really find that CSS works great is in the sites where you might have 30 pages you want the same layout and appearance just different content. Where if you change the font color for the <H1> tag, it changes it on every page, and maybe you want it centered as well. So you set these properties for the H1 tag in the CSS file, then rather then every page including those properties, all they have is the H1 tag which is modified by the CSS file. So you can find some good benefits in using CSS even if you don't initially do the layout in CSS you can move a lot of the other page settings off the individual page.

billbenson
01-31-2009, 08:13 PM
Frederick, just find a css based template that is similar to your site and use it for the next page you write. It doesn't mean that it will be the best css in the world, but it's a good way to get your feet wet a little bit. Either that or run through some tutorials. Write a practice page that isn't linked to on your site.

VG, do you use tables for tabular data or css? I still use tables a lot, but they are for "tables". Particularly for admin types of pages that I write that are only for my personal use so SEO has no real impact, whether it would or not? It's really fast to plop a table in and out of DW. Again, I'm not talking about layout.

vangogh
01-31-2009, 10:53 PM
Frederick definitely give css a try. You can easily move things a px or two with it. Really there's nothing you can do with a table that can't be done with css. Ultimately css will give you more control over things though.

Bill I'll use a table for tabular data. That's what the table tag is there for. There's nothing wrong with tables in general. They just aren't the best solution to use for site layout. When it comes to tabular data they work very well. CSS actually has a value for the display property called table and a few others. You can create a table purely with css and without table tags. I'd use table tags though.