What's the general consensus on this at the moment?

I've always written my site using tables, however last night, on a whim decided to have a go at converting it to tableless and just using divs.

It took ages to get cross browser compatibility working though, something which I have never had a problem with before using tables - so now, I am a little worried this might not be such a good idea..?

Or do the benefits definately outweight these issues?

You can see the two designs here:

http://www.inetfx.net (tables)
http://tableless.inetfx.net (tableless)

Which do you think I should go with?

Oh and also, let me know which browser you were using - I have been testing with the latest Opera, Firefox and IE - but don't know about older ones...

Thanks!

I looked at your source code for 'tableless' website and noticed there's still a table in there

Yes, sorry maybe I should re-iterate.

The main layout has been converted to tableless, tables ARE still used within the content frame. The reason being I don't want to spent hours converting everything, just to find out it was all a waste of time :)

But all the main elements are divs, the only tables are now found inside the main content cell (basically the middle) - and for data viewing...

I dont think it's really an issue, just go with what is easier for you, and what your more comfortable with. but the trend atm is tableless :P

I dont think it's really an issue, just go with what is easier for you, and what your more comfortable with. but the trend atm is tableless :PI wouldn't exactly call it a trend, because trends come and go. This is a movement toward proper use of Web elements, and the question itself is mostly moot, because no matter what people prefer to do, browsers are becoming increasingly more accepting of proper structure and consistent with CSS, and newer and alternative browsing devices are favoring tables less and less with every release, in terms of layout. The industry moved forward, regardless of who decides to use what techniques, and eventually, table-based layouts will become obsolete (not for a LONG time, but it will happen).

In terms of tabular data, you always use tables for this. That's the reason they exist.

Cheers guys - well it looks like I'll make the switch then.

A few bits are a little confusing, but it's nice to think I'm "keeping up with the times" :)

That's good to hear. Also, I know that you're making the swap, but I just want to emphasize the power of divs. Divs look a lot cleaner, so if you need to swap something or change it, you don't have the fear of totally screwing up. I've lived to see way too many nested table madnesses. Those sources seriously look like mountains. Strange.

:) Well it's (half) done - the layout main design has all been switched over and the other sections integrated.

It's not quite all plain sailing though as Firefox doesn't like a few bits, and Opera has some very weird behaviour in others - but still useable. I think I'll get a book on it all to make sure it's done properly :)

But yes, it's SOOOOO much cleaner as far as code goes. Instead of needing to put table in table, and thus have loads of the "< table > < tr > < td >" etc, just one simple "< div >" .... fantastic!

I don't think it's relevant, I think a web site that validates would have more affect than tables or table-less. This would also increase the cross-browser behavior.

Which do you think I should go with?
Tableless, its clean and less codes. Unfortuntely there's still <table>

I don't think it's relevant, I think a web site that validates would have more affect than tables or table-less. This would also increase the cross-browser behavior.I have to wohleheartedly disagree. Web standards denote the tools a developer should use to create a site, but in-and-of itself, it only very loosely defines how to use those tools properly. When you're discussing the use of tables for layout, you're talking about how those tools are being used. Creating semantically valid markup is a huge leap over simply having a site that validates, in terms of user-friendliness, accessibility and search engine exposure. But you can create valid markup that is absolutely attrocious. Validity should not be a benchmark for performance. All that code validation tells you is that you used acceptable tools.

It would be like judging a house builder's proficiency based on his choice to use a hammer to push nails into the walls. He may have used the right tool, but in doing so, he still could have constructed a crappy hous. The analogy applies directly to design as well.

Which do you think I should go with?
Tableless, its clean and less codes. Unfortuntely there's still <table>Why is it unfortunate that <table> exists? If you need to present tabular data, then you use tables. Tables and non-table containers are not mutually exclusive. If you have tabular data that should be displayed in tabular fashion (spreadsheet data, for example), you would use tables, and you would drop them into the content area of your tableless layout.

I'm not really picking up what your putting down the_pm, but the difference is as simple as tables or divs. I can use tableless design with divs with strict code (see portfolio) however simply replacing those divs with proper use of tables you cut down on file size, css size and overall time. If you do it right it will work in all browsers, it's much harder to make a tableless web site correct in all browsers, especially to go all the way and make it strict.

i dont even use tables for tabular data.. :angel:

I'm not really picking up what your putting down the_pm, but the difference is as simple as tables or divs. I can use tableless design with divs with strict code (see portfolio) however simply replacing those divs with proper use of tables you cut down on file size, css size and overall time. If you do it right it will work in all browsers, it's much harder to make a tableless web site correct in all browsers, especially to go all the way and make it strict.You'd said validation was more important than proper use of elements (the tables v. tableless argument is a matter of semantic validity). I simply disagreed, stating semantic validity is more important than validating, and that validation is a minimal requirement for any site, a quality control standard, but of much lesser significance than proper use of those valid elements, which using tables for layout is not.

I'm a bit surprised you've found tables to be lighter in terms of coding and time. I found this to be the case at first myself, I guess. But over a short period of time, this quickly turned out not to be the case, pretty much when I first started to understand semantic validity and to learn and follow the Web Content Accessibility Guidelines.

i dont even use tables for tabular data.. :angel:Erm...why? Tables are very important when it comes to tabular data, particularly for people with visual disabilities. Using tables is as important for this segment of the population as not using tables for layout.

I know CSS has provisions for table layout using CSS, but I didn't think browser support was good enough to use it. Hmm...

You'd said validation was more important than proper use of elements (the tables v. tableless argument is a matter of semantic validity). I simply disagreed, stating semantic validity is more important than validating, and that validation is a minimal requirement for any site, a quality control standard, but of much lesser significance than proper use of those valid elements, which using tables for layout is not.

I'm a bit surprised you've found tables to be lighter in terms of coding and time. I found this to be the case at first myself, I guess. But over a short period of time, this quickly turned out not to be the case, pretty much when I first started to understand semantic validity and to learn and follow the Web Content Accessibility Guidelines.

not only that, guidelines and reading into them help you prepare for future guidelines

if you cheat or only do the minimum to stick to current guidelines, it's going to hurt very bad when the new version comes out and suddenly you can't validate without a total redesign, right?

not only that, guidelines and reading into them help you prepare for future guidelines

if you cheat or only do the minimum to stick to current guidelines, it's going to hurt very bad when the new version comes out and suddenly you can't validate without a total redesign, right?
Yes! That's a huge part of this. It's not just about what works today. It's about what's most likely to work in a year or two or five or ten. Customers don't like to find out they wasted their money having a site developed only to find out the latest browsers to be released don't like the methods someone is using.

It's happening already. Mobile devices are struggling...

You'd said validation was more important than proper use of elements (the tables v. tableless argument is a matter of semantic validity). I simply disagreed, stating semantic validity is more important than validating, and that validation is a minimal requirement for any site, a quality control standard, but of much lesser significance than proper use of those valid elements, which using tables for layout is not.

So you are saying it's better to use divs and not worry about it validating and being displayed differently in all browsers, than it is to use tables that validate to W3 standards which are interoperable?

Yes! That's a huge part of this. It's not just about what works today. It's about what's most likely to work in a year or two or five or ten. Customers don't like to find out they wasted their money having a site developed only to find out the latest browsers to be released don't like the methods someone is using.

It's happening already. Mobile devices are struggling...

Again with this, it doesn't matter if its tables or table-less, it's the code used. For example if a site was designed years ago in HTML 2.0 to W3 standards it will still work right today!

So you are saying it's better to use divs and not worry about it validating and being displayed differently in all browsers, than it is to use tables that validate to W3 standards which are interoperable?No. I'm saying it's best to use divs for layout, AND validate, AND use those tools in such a way that display is consistent AND that also work in alternative browsing devices with greater consistency.

What I'm saying is that arguing for or against validation isn't worthwhile. Everything should always validate. Period. But validation itself doesn't really have a whole lot of meaning, because you can write attrocious code that still validates. Again, it's not enough to use the right tools, you must use the right tools the right way.

Ah ok, well yes divs and validating would be better, but tables and validating is just as good and for me takes less time. The only difference is that you have control over divs via css, the tables are primarily in the code with css attached. What I was saying was there is little difference between this, as long as it validates... the only difference in code being <div> and <tr>. I haven't seen a bad coded sites that validates, but I would agree that clean code should be used. Perhaps my argument can be it doesn't matter, as long as it's clean code :)

It's funny how validation was mentioned.

Joomla has the use of a lot of tables & I've found that a lot of sites using the CMS actually don't validate well. Seems like more people care about the site design/content.

It's funny how validation was mentioned.

Joomla has the use of a lot of tables & I've found that a lot of sites using the CMS actually don't validate well. Seems like more people care about the site design/content.That will always be the case, particularly when you're talking about tools designed to help people manage Web sites without needing to be Web professionals. Of course Web professionals use CMSs too, but a large portion of the audience consists of people who don't want to be that knowledgeable and therefore wouldn't be discerning over which application to you in that one respect. For many people, it will work well enough that they won't know the difference. That's fine.

The other benefit of pure css of course if cacheing - you only download the css file once, but you can change the content over and over in the html....

Thus I find sites load faster and the filesize is actually smaller....

This weekend I will remove the last of the (removeable) tables.... I've got IE, FF and Opera at the ready to test everything with results looking good so far :)

Give yourself some time. Don't expect everything to be an immediate and easy transition, after all, you're learning how to walk all over again. You'll find over time that it becomes less and less about XHTML and more about CSS.

Start checking out all the CSS sites you can find. Alistapart.com should become a regular read if it isn't. I highly recommend Eric Meyers O'Reilly book on CSS.

You will have moments when you will want to do nothing more than pull your hair out. When those times happen, take a trip to csszengarden.com.

Don't obsess over your site looking the same in every browser on every platform. This will happen more and more as the browsers converge on standards. As your skills develop, you'll be able to do this more and more anyway. What's most important is delivering the information, that's what the web is about, not making sure that everything looks the same.

Keep on this path and in the end, you will be a much better designer.

Thanks for the links :) I've actually just finished, the code is so much cleaner now and the file sizes are definately lower....

I know it can be daunting (luckily my original design wasn't too complex) - but looking at the code now, it was definately worth it :)

Thanks for everyone's input!

Also, one of the best ways to learn is to look at other sites, view source but also look at the CSS files. Then you'll start to get a feel for things, and everyone writes things differently, so you'll start to get a feel for what makes sense to you, as well as starting to understand the cascading and specificity involved in CSS... which will be a continual learning experience.

I'm still trying to determine the best and most logical way to lay out my CSS.

I use both ways. I have nothing against tables anyway ;)

Everything has its proper usage. Table is not evil.
I cannot see any easier way to put a 20x20 sheet with -say- local soccer match scores in a web page.

However tables shouldn't be used for layout of pages.
No need to be so strict about it, like "NO TABLES EVER!". Nonsense.

Check out this site for why you should not use tables for layout: http://www.hotdesign.com/seybold/

Check out this site for why you should not use tables for layout: http://www.hotdesign.com/seybold/

... This coming from a site with 12 XHTML 1.0 Transitional ERRORS?

... This coming from a site with 12 XHTML 1.0 Transitional ERRORS?
:eek: It validates to XHTML 1.0 Strict just fine! http://www.htmlhelp.com/cgi-bin/validate.cgi?url=http%3A%2F%2Fwww.hotdesign.com%2Fseybold%2F&warnings=yes

I was regarding the designer and not the site explaining how to do things - http://validator.w3.org/check?verbose=1&uri=http://www.hotdesign.com/

Anyone with css knowledge can make a page without tables, but they should follow this practice through-out there work, not just on there 'don't use tables page'.

Ahh, I see what you're saying now. To be fair to the author, the only portion that doesn't validate is the tag set used to display his Flash, presumably the code Flash exports by default. He probably hasn't gotten around to reading Flash Satay (http://www.alistapart.com/articles/flashsatay/), and if he did, he'd have this little problem licked.

But that's pretty minor, and a good example of a situation where validation doesn't affect page layout, but his use of CSS for structure does have its positive impact regardless.