table trick

[greenleaves]

I have been considering using the table trick for a wile. I never really did it, becasue i feared incompatibility with old versions of netscape and mac users. As compatibility with this trick is increasing, I am now going to implement it on one of the sites I manage.

My question: what do you all think of this trick? Is it worth it?


Any and all words of wisdom will be greatly appresiated. :)

[polarmate]

I'd recommend switching to a more standards compliant design - using CSS for positioning instead of tables. You'll be able to do much more with CSS than you could by possibly adopting the table trick to position your content before the navigation links in the left or right columns.

Of course, just my opinion.

[AussieWebmaster]

Every little bit helps... though I have not used it recently it did help boost SERPs when I did use it maybe 18 months ago.

[greenleaves]

CSS layout?

I use CSS for my text and for the look of a table (background/border/etc) but I have not used it for a layout. Can you show me an example of where it is used correctly (maybe your own site?).

I will post my experiences with the table trick, after I track results... :)

Thanks for your kind replies.

[polarmate]

There are lots of examples:
http://www.csszengarden.com/
http://www.alistapart.com/
http://www.happycog.com/

I wish I could point you to a couple of my sites that are done table-less. I am still fighting battles with so-called UI experts who design using tools that spew out images that are spliced and put together using tables. Ugh.

This google query might help you too:
http://www.google.com/search?hl=en&ie=UTF-8&q=tableless+layout&spell=1

[DianeV]

I've got a new table-less blog; pretty interesting coding.

The one problem that I see with using CSS to insert images is that, with CSS turned off, the images disappear. Of course, there may not be so many people surfing with CSS disabled.

[Anthony Parsons]

Greenleaves,

Two good examples I will use between the difference of CSS positioning with tables and CSS tableless are two of my own sites.

http://www.anthonyparsons.com uses CSS absolute positioning with the use of tables. That puts the content at the top of the code for the engines to read first, thus appears different to how the eye views it.

http://www.seotesting.com is completely tableless using CSS to position everything within <div>. This one uses no tables, though the content is still fed to the engines first in the code, though again, the eye does not see that from the site.

You do not need to leave blank cells or nest tables within tables to achieve the content before navigation. That is old old old and just not required. CSS can do everything for you now. Learn it and become familiar with it, as its limits far surpass conventional table design.

Either way it irrelevant, and then many variances of both are easily found on the net as polarmate has already given. There are many many websites available for learning aspects. Look at the code in sites you visit. Download their css file and look what they have done to achieve their design.

[Robert_Charlton]

I've continued to use tables for layout, with CSS for text formatting, and I use the table trick on about half the sites I optimize.

It can't be used on all sites. Layouts that require an absolutely seamless join between the top of the site and the nav bar are troublesome with the table trick.

Also, on sites with graphic nav buttons and complicated table structures, the table trick may not be worth it. But I find it works well, and, if nowhere else, it pays off on which text is displayed in the snippets.

On other forums where the table trick has been discussed, I've seen it said that the use of the trick might be worth, say, two positions in the serps. I think this is probably hard to generalize. I've never tried A-B comparisons, because when I go into a site I'm making a lot of changes all at once, so rankings jump up for a combination of reasons.

An alternative to the table trick you might consider is the use of right hand navigation. Though right hand nav is unconventional and requires a page layout to pull the eye in that direction, I think it offers several advantages... particularly having the scroll bar and the navigation right next to each other.

One caution about the table trick... if your second column page content is very much longer than your left hand nav column, you may need to insert a bunch of break tags under the nav content to keep the nav from "drifting" down the page.

[greenleaves]

Thank you all for the replies.

I think I will wait to start using more complex CSS. I feel very comfortable using tables. I am not a graphic designer. I have quite a bit of experience (across the board) doing online marketing, so I don’t focus too much on one thing (like design). And my tables have worked, and continue to work. I do understand I must keep up to date, so I will put this subject on my “things to do list”.

Anyway, thanks

[Marcia]

On content sites that are primarily text it's one thing, but for ecom sites with products it would take me ten times longer to use CSS rather than with nested tables. And for the occasional times where I want to use a special font effect in the copy, it takes 3 seconds to add a font tag - they're just not all the same all throughout any of those sites.

I use the framework of CSS for what will be uniform through the site, but for quick and dirty format changes for couple of words here it would be laborious to add to the stylesheets. For those things being a purist would drive me to flipping burgers.

How good the tables trick is depends on the site, the page structure and the anchor text being used. Most times it's OK but occasionally it's too much of a consecutive repetition.

[AussieWebmaster]

being a purist would drive me to flipping burgers.


I love flipping burgers... though it has to be in my backyard and for my mates and family.... in that respect I am a purist burger flipper!
:D

[Marcia]

Now I'm craving a nice greasy Fatburger with fries. ;)

About the tables trick, another way to deal with the left column problem of the navigation slipping down, is rather than use a lot of <br> to keep it in place - is to make a small invisible gif, and when working on the page put a border around it in a color so it's visible and make it as long as it needs to be to keep the navigation in place.

Then, when the page is to be uploaded, you just remove the border and it's invisible. You just don't make it 1px wide so it doesn't look dodgy - maybe something like 20px wide by 300px high (or however long) when it's in place. It's called a spacer, and that's exactly what it does, it fills the space.

[DianeV]

That's fine, and works; I used to use that when there was nothing else. But it gets pretty tiresome on larger sites.

I've found CSS an incredible boon both for designing and for updating. But that's just my preference and opinion.

For years now, I have not wanted to move to table-less CSS sites due to browser compatibility problems; the most I'd do is simple tables and heavy CSS. However, after messing with the Wordpress blog software and its more advanced CSS -- and getting the sense of it all -- I have to say I am impressed.

I fear I am about to spout off about Web Standards. <grin>

[Anthony Parsons]

Don't worry Diane, I'm with you on the CSS tableless designs ...... and web standards just for interest sake.

[DianeV]

Okay. <off-topic> From what I've read in my brief look at Web Standards, the idea is that millions of people are not going to update zillions of websites, so the Web Standards Project has been going to the browser makers to "encourage" them to make browsers that actually follow the W3C standards.

Many of us have, at one time or another, found/learned workarounds to earlier incompatibilities between browser displays. ("It looks different in I.E.") The fact that we've gotten good at it doesn't mean there might not be a better way. Or we've simply not coded to take advantage of the neat (and W3C-compliant) features of one browser because another didn't support them. What this appears to mean is that the very same browser makers who helpd to create the standards are not fully supporting them with their darned browsers. Doing that means we could support a wider audience more easily (e.g., aural screen readers).

Aw, geez, it's happened. I'm already starting to sound like an evangelist.

At any rate, I like CSS table-less design. Just wouldn't use it solely on all sites. Today, that is.

Never mind, guys. I'm first and foremost a designer. Or a marketer. Not an evangelist. I hope. </off topic>

[Nick W]

it would take me ten times longer to use CSS rather than with nested tables

hehe, too true!

However (you knew it was coming right?), it's all about design, if people stop trying to create layouts that evolved from the dirty old days of html they'd have less trouble impleminting clean, elegant code ;)

>>table trick

I remember a thread being renamed over at wmw to 'table tip', there's nothing dirty about it ;)

Nick

[critter]

HEY ALL..

I wrote an article about CSS, showcasing how powerfull it is for SEO here;

http://www.logicalsense.ca/articles/the-power-css.html

ENJOY

Critter

[Marcia]

>>(you knew it was coming right?)

I knew YOU were coming into this discussion Mate, it was inevitable. I was just wondering how long it would take you to get here. :D

On some product type sites, there are different sized images being used, different sized text areas being used for writing descriptions, different font for regular text and WOW!! type text, different heading placements depending on photo sizes, etc. For those I use little tables and pop them into a main "container" table on the pages. Using nested tables works beautifully for that, giving the flexibility and speed for putting the pages together.

However - to concede the point that anything that's site-wide is best done with CSS, I am now wondering if it's possible to combine my quick and dirty nested table technique with using CSS positioning for major site area placements that are global, such as header, footer, left and right columns, and while using CSS for that continue to use the messy old tables for the main content "container" area on the pages where they're needed - which isn't all of them.

What say Nick? Can I get the CSS guru to budge an inch?

[DianeV]

The answer is yes, and with less code, less looking back to check font sizes, colors, etc. I'll let Nick explain.

[Nick W]

On some product type sites, there are different sized images being used, different sized text areas being used for writing descriptions,


Well, the first thing that springs to mind on a project like that is: Why are the images all different sizes?

I'd start by seeing if you can put a little continuity into the image sizes, would make life a little easier ;)

For single product pages, my tendency is just to float the image to the right, give it some nice sensible margins and if captions and descriptions are needed then just wrap the whole thing in a div and float that. Couldn't be simpler...

On 'catalog' style pages with many images and small titles/descriptions the temptation is of course to use a table, however, I remember doing one such project and having some good success with enclosing each image in a div and floating them.

<div class="catImg"><img src="/imgs/pic.jpg" alt="" /><h4>Pic Title</h4><p>blah blan blan</p></div>

...and the css (this is all from vague memory, you'll have to mess with it, i've been doing info sites the past year and it's a long time since I did this! ;))


.catImg {
float: right;
margin: 0 1em 1em 1em;
border: 1px solid #CCC;
}
.catImg h4 {
make it pretty;
}
.catimg p {
make it pretty;
}


This *should* let them spill onto the page nicely without bumping into eachother. Of course if your img sizes are all over the place then the results could be quite fun, but impracticle. Use a table, i wont tell anyone... ;-)

Nick

[cuzco]

For me CSS is not only easier to manage but involves less typing. All those <table><tr><td> are a sure way to make my RSI worse so you could say CSS is better for your health :D Not suing tables has been the norm for me for quite awhile, but what i really love is the extra power, like when i recently did a photo gallery where we wanted the number of images per row to vary depending on the screen size.


Have only bothered putting content before menus and headers on a few sites.
Does it really make much difference?
Worth doing all the time or only when you have huge(define huge) menus and headers?
Will this cause accessibility problems?
Wont it look odd on other user agents like mobiles and text browsers?

[Mikkel deMib Svendsen]

It's interesting to see that many still use the table trick. I think last time I used it was 97 :) For the sites I used it on it turned out to give to many other problems, so for those sites we went (back then) with right hand navigation.

I still believe it makes a lot of sense to do whatever you have to, to get your most important copy as high in your code as possible - both from a presentation (description snippets in search results) and from a ranking point of view.

For floating designs, that fill the entire screen, I think right hand navigation works perfect and even for some sites with fixed width it works ok too. I know left hand navigation is most comon, but I do think that right hand navigation is also so widespread that most users will not be turned off by it - if well done, and all other usability issues is hanlded well, as well.

I have to admit, the few websites I personally design and code I still do mostly in tables. The only reason is I have been to bussy with other aspects of my SEO-work to become any good at CSS. I simply work faster in tables :) However, I have worked on several sites, with good programmers, where everything is done with CSS positioning. And I have to say, I love it.

Beside the better flexibility CSS positioning gives us I also think it's woth to mention size! Most large table based web pages end up being quite large. If you combine a well coded CSS page with server side compression you can end up with very small files - and this does have a positive impact on indexing in itself (not necessarily on ranking). The faster spiders can grab your content the more they will crawl you. Google support server side compressions - I am not absolutely sure about Yahoo!Search.

I did some work for a large European portal, ya know, the kind with tons of graphics, banners and all that dirt. After they did a redesign using CSS, client side XML, server-compression etc. they ended up with only having to serve up about 2kb every time a user requested a new page (click an internal link)! This, I am sure, will not only improve indexing but also keep your users happy.

[DianeV]

Well, I know something about this, you'll probably be surprised to know, Mikkel. <wink>

I've been using CSS and absolutely positioned divs for years. The only problem is that "absolutely positioned" means "from the top and the left", at a minimum. This means that it's difficult (unless I've missed something) to get the page to center at higher resolutions; it's all going to be "stuck" on the left because it was absolutely positioned there.

Now, I've just started a blog, using software written in Web Standards compliant code and CSS; content is on the left and menu on the right. While it displays great at 800x600, as the resolution gets higher, one finds that the menu remains "stuck" to the right side of the screen.

Well, there's apparently a reason for coding it this way, and it's called IE6. And I have just spent the night reading about floats, divs, various kinds of positioning, Box Model problems and Tantek Celik hacks. The concensus seems to be that since IE looks at a web page a little differently than other browsers do, hacks are required to make it behave. As if I feel like installing every browser that comes out from here until forever and checking it ("Does it still look right? Does it still look right?") I am that close to making a two-column table, plopping everything in it and moving on. Except for two things:

(1) Jeffrey Zeldman does not appear to be having this problem.

(2) I can't stand not beating the challenge of this mysterious puzzle.

So, I am off to read a few more pages, and then Mr. Zeldman's 10K CSS file. No doubt I'll learn something more. And even if I decide to go with tables for earlier browser compatibility's sake, I'll have taken my coding knowledge into this century.

Which would be a great deal harder than it is if you had not browbeat me (unmercifully!) into learning how to hand code way back when, when we were you know where. :-)

[Mikkel deMib Svendsen]

I could say, that there are cloaking software and agent components out there that works for your problem ... but I wont say that :)

I know the portal I had the most extensive CSS project with detected a whole range of supported browsers - not just for the CSS sake but also because they had some pretty advanced JavaScript and DHTML going on. That is a lot of work! It made sense for this large company, but for most small and midsized companies it won't, I believe. You have to find some managable middle ground that will not take to full time engineers to maintain.

It's good to hear your experince with CSS, Diane - I think this is one reason I've never come very far on my own with CSS. But Diane, don't be desperate :) If you really need to learn what it takes to master CSS I know you can, just as I could and many more if we had the time to study it. It's not rocket science - there are just a lot of variables and exceptions to learn :)

[DianeV]

Thanks, Mikkel. With me, it's a browser display problem rather than a feed-the-SE-the-text problem (which I assume is what you're referring to regarding cloaking).

I'm sure I'll figure it out; it's just that I'm deep into it right now and need to know. LOL. My other problem is that two of our clients, having seen the blog, want their own NOW, so I gotta solve it.

[Nick W]

I simply work faster in tables


Ahhhh.. that's the trouble, unlike many in your situation though Mikkel, you prove what a concientious web-dev you are by aknowledging the fact that it's your knowledge that holds you back rather than the technology. Well done! ;)

I know one, famous webmaster (real famous) that insists css is 'bloating' and 'se unfriendly' even now. I (like many i've spoken too) think it's because he just doesn' know how to do it... any1 wanna take a guess? hehe.....

Nick

[DianeV]

Not much of a guess. :-) Y'all seem to drop hints here and there; I figure something happened.*

I have just solved a floating content and menu div problem with a workaround for IE6; not saying I'd build most commercial sites this way (at least, right now), but there is plenty that you can do with CSS that cuts down all the code for controlling fonts and the time required to update without into complex table-less layouts.

Marcia, if you just get that far, it's really not that hard, and I have a feeling you'll love it.

* Well, having been in the South of the U.S., I know that "y'all" (you all) refers to one person, so I should say "all y'all" (meaning "all of you"). Though it's probably pendantic of me to explain.

[Nick W]

>>I figure something happened

hehe, nothing to tell really, people are people....

Nick

[Marcia]

Nick, I can't do those images all the same size, they have to be used as is. But it's SUCH simple layouts being used (I do plain vanilla) that positioning for the main elements would definitely work.

[DianeV]

Well, I solved my blog layout problem.

Marcia, have you given it a try yet? You might like it. You might not. Either way, you'll know.

[Nick W]

Marcia knows more about css than she lets on Diane ;-)

So did you say you got it working with css marica?


Nick

[NFFC]

>I can't do those images all the same size

You can always make the images the same size, some may have some more white space than others but they can all be the same size.

[DianeV]

Thanks, Nick.

NFFC, that is a great solution.

[Marcia]

You can't adjust the image sizes on affiliate banner farms, most of them are hot-linked. ;)

[DianeV]

Here's the thing, though. Often people/companies want you to link to images on their sites, but isn't the telling part of the link -- the part that needs tracking -- the affiliate ID number rather than the image itself?

If it's possible to download the image to your site, and include the affiliate ID in the link, wouldn't that do?