Tables Vs CSS

[gradez28]

For a while now i have seen over and over again people talking about how "bad" it is to use tables for layouts. I have made countless layouts with tables over the past few years and very rarely have I had any cross-browser viewing issues, but whenever i do layer/css-only sites I have to fight it like crazy and usually have to compromise in order for it to work on multiple browsers. Some things i still haven't found a real solution to; such as making layers stretch 100% height without using some extremely distasteful hack like setting the bottom margin to an incredibly high number and offsetting it with a negative padding. with a table i could solve that issue in about 30 seconds, instead i have come to the point multiple times of spending hours trying to find a reasonable solution. (if you know of any please let me know!)

One thing i have read is an author who claimed tables are bad because of "excessive usage of spacer gifs".. I have seen this done before by some people (as well as photoshop's way of exporting sliced layouts), but whenever i slice and code a layout, 99% of the time i do so to where there are absolutely no spacer gifs, and the layout is expandable both by width and height. I cant remember the last time i used a "Spacer gif"... perhaps when i was 14.

Another reasoning i have heard is that filesize is smaller when using layers. This may be true for a simple [header, 2-column, footer] layout, but I have to disagree when it comes to compex layouts that require full stretchability with intense graphics.. the size of the css file alone becomes more than what the table html uses. not to mention the number of layer elements required to layer on one another to get the desired effects.

despite being doubtful, i have jumped on the bandwagon of the new trend and hopefully will find a good reason to keep from using tables in the critical areas.
my latest project in the making is diffusionstudios.com which i have got working in all browsers (ie, ff, ns, opera) except a small issue in safari i havn't worked on yet.

So I was just curious to see some of your input and opinions on the subject of css vs tables.

[toicontien]

Search this forum. You'll have more opinions than you care to read.

[felgall]

What about the 99% of possible page layouts that can't be done using tables where you have no choice but to use CSS?

[gradez28]

What about the 99% of possible page layouts that can't be done using tables where you have no choice but to use CSS?
do you have an example?

[felgall]

Any layout where two elements overlap can't be done with tables but can be easily done with CSS. There is an example on http://www.felgall.com/cshow09.htm that shows how easy it is to overlap things with CSS while of course with tables they can't overlap at all.

Any layout that doesn't have a rigid grid structure can only be done by building huge grids wiith tables and using lots of colspan and rowspan but can be easily done with CSS. Example see http://javascript.about.com/library/blpiano1.htm where the piano keyboard is drawn with 65 divs and 5 lines of CSS instead of a 105x5 table (which is what I saw used for a similar script)

[gradez28]

Any layout where two elements overlap can't be done with tables but can be easily done with CSS. There is an example on http://www.felgall.com/cshow09.htm that shows how easy it is to overlap things with CSS while of course with tables they can't overlap at all.

Any layout that doesn't have a rigid grid structure can only be done by building huge grids wiith tables and using lots of colspan and rowspan but can be easily done with CSS. Example see http://javascript.about.com/library/blpiano1.htm where the piano keyboard is drawn with 65 divs and 5 lines of CSS instead of a 105x5 table (which is what I saw used for a similar script)

As far as the scroll, I personally find it to be less desirable to use a static image when overlapping with any text, especially when most of my work is using dynamic content. So, for arguments sake, i took your goal of the scroll, and took it one step further: http://diffusionstudios.com/temp/scroll/scroll.html

Now, it will automatically expand to fit the text inside, using tables. Yes it can be done with layers, and just expanding vertically is pretty easy with layers as well (3 layers, fist contains the center bg, and then the following 2 layers contain the top and bottom overlay image). but what if you wanted to make it expand horizontal, too? you will end up with an excess of un-needed code that probably is going to be really buggy between browsers.. but with tables, you'd have 7-9 cells that work in every browser.

also, the way i use tables, i never use colspans or rowspans unless its displaying raw data and its required. when it comes to layouts i subdivide groups into new tables to ensure proper rendering. Ive seen browsers act too funny when it comes to colspans and fluid content.

As for the piano, i agree something like that should use layers, I was aiming my rant/discussion more towards the actual layouts of websites.

[gradez28]

btw im not here to cause a heated argument, i just like having a friendly debate to see other people's point of views.

[felgall]

The difference between the piano built with divs and with tables is no different from the situation with most web pages done one way or the other.

Also if you use tables then people using a web reader can't access your page properly and neither can people using mobile phones and other handheld devices. Using CSS allows you to define alternate layouts for those people.

[gradez28]

The difference between the piano built with divs and with tables is no different from the situation with most web pages done one way or the other.

Also if you use tables then people using a web reader can't access your page properly and neither can people using mobile phones and other handheld devices. Using CSS allows you to define alternate layouts for those people.

The ability to dynamically change the entire css definition is one of the reasons i love CSS, however if i were to go as far as making sure my sites are compatible with mobile devices, i would simply either redirect them to a url such as mobile.domain.com, or use an html preprocessor to cloke the output specifically for them to ensure only the data required is shown. Otherwise if you rely solely on css for the compatibly, throughout the whole development and maintenance processes you'll have to keep in the back of your mind "well, is this going to work right for mobile devices?" and often times you will have to compromise for a layout/feature you want, just so that you can have multiple css layouts. A good example is if you want to have, say a 120x600 skyscraper google ad on the side (quite distastful, but hey, its advertising), you probably don't want to show that to your mobile users as it will consume a large part of their scroll bar. Sure, you can just hide that layer with css, but then you run into a TOS predicament with google which can get you banned. I know this has nothing to do with tables directly, but unless you have a super simplified blog, i wouldn't ever suggest a webmaster to try making a single page compatible for standard browser and mobile viewers all in one - thus [in my reasoning] eliminating that as a selling point for layers vs tables. :)

Do you have any other examples of functional website layouts that "cant" be done with tables?

[ray326]

do you have an example?http://csszengarden.com

The web has evolved beyond the concept that the layout is handled by the markup. The markup should deliver semantically correct content; the presentation handled by semantic-free elements (div, span) and CSS. A table has a semantic meaning and it almost never coincides with the presentation of a full page.

[gradez28]

http://csszengarden.com
I could recreate any of those layouts using tables, and if i desired to offer more than 1 skin, i would simply whip up a simple php template engine. (not saying that i would always choose tables over layers though, like the site i mentioned above i constructed without a single table)


The web has evolved beyond the concept that the layout is handled by the markup. The markup should deliver semantically correct content; the presentation handled by semantic-free elements (div, span) and CSS. A table has a semantic meaning and it almost never coincides with the presentation of a full page.

but who is to say that using the markup for design structure is "bad", when its been done that way for 16 years? Im looking for reasons why people are so disgusted with tables; especially when often times they don't even know why, other than hearing other people talk about how "bad" it is.

dont get me wrong, i think css is wonderful and i use it as much as i can; its just that more times than not, tables offer a more fluent solution to issues than layers do.

Just because people are switching to new VOIP phone systems, does that make regular telephone "bad" or looked down upon?

[felgall]

Tables were never intended for layout in the first place. The only reason that they got used for layout was that prior to the introduction of CSS there wasn't any other way of doing anything but the most simple layouts and tables made not quite so simple layouts possible. CSS of course can do anything tables can do in way less code and do it in an external file so that only one copy is needed for the whole site.

Imagine that you have a three column layout for a 10,000 page web site and the client decides they want to switch columns one and three. With tables you have 10,000 pages to change, with CSS you have perhaps half a dozen line of code to change.

[Stephen Philbin]

Personally, I hate CSS. CSS 2.1 hasn't even reached the "Recommendation" status yet and it's very poorly supported in the web's most widely used browser. To make matters worse, we now have two versions of the web's most popular browser, each of which is still incapable of doing their job and each incapable in different ways. So now cross-browser compatibility is tougher than ever. I also think the behaviour of CSS makes far less sense than it should. I'd love to know who decided there was no need for a proper column system.

That said, I still won't use tables for layout. I strongly dislike CSS, but I dislike doing things wrong and producing poor quality work even more. To me, using tables just doesn't make any sense. The only viable course of action I see is to just put up with what we have and learn to use it as best we can.

I think we've a very long way to go before CSS comes close to being as useful as it should be, but it's still the best tool for the job.

[gradez28]

Tables were never intended for layout in the first place. The only reason that they got used for layout was that prior to the introduction of CSS there wasn't any other way of doing anything but the most simple layouts and tables made not quite so simple layouts possible. CSS of course can do anything tables can do in way less code and do it in an external file so that only one copy is needed for the whole site.

Imagine that you have a three column layout for a 10,000 page web site and the client decides they want to switch columns one and three. With tables you have 10,000 pages to change, with CSS you have perhaps half a dozen line of code to change.

lol i would hope that if you have a website with 10,000 pages, your not using a seperate file for each ones' global markup. that my friend is being stuck in the 90's ;) I actually have a website with over 40,000 pages (an article site) and youd be amazed at how easily i can modify the layout on every page, without relying only on a css file to do so.

Just curious, would anybody here be interested in a show-down? I will make a psd of a complex layout, and we can see who can slice it up into xhtml/css using the less code with each person's preferred method - but it must work in the top browsers (ie, ff, ns, opera) and have the ability to stretch width/height wise seamlessly. could be a fun little project. :D

[felgall]

Let's use a design with overlapping elements then so that you have to slice it into itsy bitsy pieces in order to get it to work with a table and to be absolutely fair let's have it have the overlapped parts able to be moved with JavaScript and finally let's set a realistic maximum size for the page.

Let's also require different layouts for print and handheld devices and give visitors the choice of five different screen layouts.

It all has to be done as a single page.

I'll even give you a week's head start so that you can work out how to do the layout with tables and try to figure out how to squash all of the code into the allowed file size.

[gradez28]

Let's use a design with overlapping elements then so that you have to slice it into itsy bitsy pieces in order to get it to work with a table and to be absolutely fair let's have it have the overlapped parts able to be moved with JavaScript and finally let's set a realistic maximum size for the page.

Let's also require different layouts for print and handheld devices and give visitors the choice of five different screen layouts.

It all has to be done as a single page.

I'll even give you a week's head start so that you can work out how to do the layout with tables and try to figure out how to squash all of the code into the allowed file size.

Well like i mentioned above, i don't find it to be efficient nor good webmastering to try and squash a website into a single file for multiple layouts for mobile and standard browsers. I would use a smarter route of a preprocessor to manipulate not only the markup they receive, but also the content, so im not gonna bother with a challenge that requires me going against standard methods i use.

For the overlays being able to be moved with javascript, im game, as long as its something realistic (not something you design solely to make me fail that would never be used on a website anyways -- do you have an example of what you have in mind?). Also my terms remain that the whole layout must be able to expand/contract vertically, and horizontally.. and it has to be more than just single color plain columns, im talking graphical content.


:D

[ray326]

I could recreate any of those layouts using tables,Then you've yet to fully grasp the power of what you're seeing there. You could NOT reproduce every one of those without recoding both the content and the presentation. Take any one of those examples, recode it using tables then leave the HTML alone and make what you have look like one of the others.

The other aspect of this is that within any domain the body of practitioners discover what they consider to be "best practices" and successful patterns for design. The major players in web design in the last 5-6 years have determined that "separation of concerns" was a pattern that produced web sites and web applecations that were easier to create and maintain and that deliver their content to the widest viewer audience. Feel free to cling to your 20th century ideas in this respect; it only benefits your competitors, not your customers.

[HazardTW]

<-- grabs a bag of popcorn and takes a front-row seat =)

I can see the results of this face off ending up as a valuable sticky post on these forums, I can hardly wait!

Should the final judgment really be what method would be easier to implement?

From my own experience I am almost sure that Felgall's CSS solutions would be much easier to 'borrow'.

I personally find CSS layout more predictable than a table based layout, tables seem to have a mind of their own.

Either way, cheers to you both for upcoming efforts!

[felgall]

As I said earlier, 99% of what can be done with page layouts with CSS can't be done with tables.

Selecting a layout out of that remaining 1% just so as to allow someone to create a table version would be unfair and misleading. If a layout were to be chosen fairly from all of the possible ways that a page can be set up then there is no contest from the start.

In any case gradez28 has already said that they would need to create 7 pages to meet my suggested specification for one page and I suspect that each of those 7 pages would be much larger in size than the one created with CSS.

Anyway, the way to start would be to specify the content of the page and then define the way that it is supposed to look under which circumstances. Starting with a PSD and chopping it up is as antiquated as using tables for layout.

[felgall]

I think I have come up with a way to make this a fair comparison.

gradez28 can nominate a page that they have already written using tables that is to be reproduced using CSS. I will nominate my home page at http://www.felgall.com that uses CSS that is to be reproduced using tables (any CSS except for margin, padding, clear, float and position can also be used).

The object is to reproduce the nominated page so that it functions as closely as possible to the same way as the other version does on IE6/7, Firefox, Opera, and Safari as well as looking the same when printed.

Everyone is welcome to make suggestions on how to achieve the required results.

Does that sound like a fair way to compare the two?

[WebJoel]

...with a way to make this a fair comparison.Now, -you have my attention. :D (Not going to take you/anyone else up on the challenge... my mind has been made-up pro-CSS for a few years now).

[gradez28]

I think I have come up with a way to make this a fair comparison.

gradez28 can nominate a page that they have already written using tables that is to be reproduced using CSS. I will nominate my home page at http://www.felgall.com that uses CSS that is to be reproduced using tables (any CSS except for margin, padding, clear, float and position can also be used).

The object is to reproduce the nominated page so that it functions as closely as possible to the same way as the other version does on IE6/7, Firefox, Opera, and Safari as well as looking the same when printed.

Everyone is welcome to make suggestions on how to achieve the required results.

Does that sound like a fair way to compare the two?

(any CSS except for margin, padding, clear, float and position can also be used).
I use those properties in my table layouts as well, though, especially when any javascript comes into play (like the menu); it would be impossible without.

Also, if i were to make a really simple layout as the one at felgal.com i would chose css/layers; as tables would provide no real benefit (again, like i mentioned previously tables allow for complex graphical layouts that expand/contract). If a page uses very simple solid color blocks, then theres no need to use tables because i just makes more sense to use layers with css.

If you insist on felgal.com I will do it, but theres no reason to keep me from using those css properties (when i use them every single day on table layouts) and i can pretty much guess right now that my file size will be bigger because its such a simple layout, and the layers will be more efficient.

Here would be my submission. It is a simplified version of a layout i worked with a while back. It would have to expand to fit the whole screen (the center column flows horizontally, the center/top content area expands for the height. The left and right columns must also be able to fit whatever width that you may want to change in the markup/css. So lets say the default value is 187px and then a week later you need to make it 200px to make room for something unexpected, you just enter the value into your css/markup and it will automatically stretch to that amount (without any disruption to the graphics, gradients, or content headers) -- this will have to be demonstrated as part of the challenge. and to top it off, each content area must have some lorum ipsum text, and every content header needs to have a title in place.

My only restriction in place is that you cant use any tables (since you dont anyways lol).

If you agree, I will send you the psd file, and ill also start slicing it up for my table version. Heres your chance to prove what layers & css can do :D

http://diffusionstudios.com/temp/iwsbanner2.gif

[felgall]

So in the end this turns out to not be about using tables OR CSS but whether to use CSS with or without tables.

It appears that we are all agreed that CSS is required to create any decent page layout whether using complete separation of content and appearance or using a transitional approach where some of the positional information is still provided in the HTML (eg. via tables). A contest between creating a pure table layout and a pure CSS layout is therefore pointless.

[gradez28]

Sorry if my thread title and posts have been misleading. I am a strong user of css; the whole reason of starting this thread is because people are always saying how much easier, better, cleaner, cost-efficient, etc table-less designs are, but i think the layout snapshot i posted is a perfect example of when tables are the better choice to go with. I have noticed that pretty much all of the "standardized table-less css" websites i see now days, are simple. perhaps its just the styling trend that comes along with this new epiphany everybody gets, but i think its because they have to base their designing around what you can do [easily] with css. goto any designer/coder who sticks strictly with table-less design and ask them to slice that layout i posted to my specifications, and the price is going to be 5 times, if not more, than what would be charged by someone who can do it with tables. And in the end, the viewers of the website will see the same thing, with the same function (assuming the css coder can do it), and it can still be easily w3c validated. only a small percent of those anal people are going to look in the source and get sick to their stomach from all the <td>s :rolleyes:

tables weren't "designed" for layouts, whoopty doo. the internet wasn't designed for every other teenager on the planet to sit home all day posted pictures on myspace, but that doesn't stop it from happening. tables work -- they work great (if you know how to properly utilize them, which from what I've seen a lot of people don't). and until css/layers because more standardized between browsers i will continue to use tables on layouts such as posted above.

thanks for allowing my rant lol :)

btw if anybody wants to take me up on the challenge with the layout i posted above ill be more than glad to make a table version.

[Dragonkai]

lol this would be fun to watch, imagine in the future web development tournaments!

[felgall]

Well only those who use antiquated techniques like slicing layouts will consider using tables since slicing is part of the way that tables for layout works. The two go together.

If instead you look at the elements of the page as separate elements then your whole approach to constructing the page will be different and using tables to position all of those elements is just making more work for yourself.

[gradez28]

Well only those who use antiquated techniques like slicing layouts will consider using tables since slicing is part of the way that tables for layout works. The two go together.

If instead you look at the elements of the page as separate elements then your whole approach to constructing the page will be different and using tables to position all of those elements is just making more work for yourself.

so do you think you can make that layout work without tables, without slicing, and to my specifications? (full screen stretching & modifiable column widths, without losing any of the graphical content of the layout). IF you can do it without using the so called "antique method" of slicing a layout, i will send you $50, and you get to write another article about the power of table-less design, along with your revolutionary new way of creating GUI-based websites that apparently nobody else has thought of yet.

I can do it table-less (i am also experienced making table-less designs, even though my posts may not make it seem as so), and even without tables, there is no possible way of doing it without slicing the layout into many pieces. thats just in the territory of graphic interfaces. and untill there is support within the browser to specify which sections of the images will expand and repeat (much like the windows xp GUI works), then there will be no other way to do such a layout. Theres nothing antique about it. The only thing i see on the internet that makes me scream antique is overly simplified eyesores of webpages with no artistic elements whatsoever that looks as if they are straight from 1995.

[Jeff Mott]

Let's have less talk and more action.

gradez28, can you post a photoshop file of your page layout?

And since it's the holidays here in the U.S., let's not expect solutions until the end of the weekend at the earliest. I don't know how much time I'll spend at the computer in the next few days.

[gradez28]

Right on Jeff! :) No rush at all.

http://diffusionstudios.com/temp/iwsbanner2.psd


must stretch to the whole page. horizontally and vertically
column widths must be dynamic
must contain all graphical components without any distortion (gradients, texture, etc)
no tables
must work in IE 6+, FF 2, Opera 9, and netscape 9

[toicontien]

I've been looking for a challenge lately. Count me in. :)

[toicontien]

Also, good job of designing within the constraints of tables. ;)

[Centauri]

I was also going to have a look at this challenge, but a look at the psd file shows no content....

The whole point of a web page is to convey content - without any content, there is nothing to style, nor are there any clues as to what elements should do what fluidly. Trying to come up with a "layout" without content is a pointless exercise..................

[felgall]

I was also going to have a look at this challenge, but a look at the psd file shows no content....

The whole point of a web page is to convey content - without any content, there is nothing to style, nor are there any clues as to what elements should do what fluidly. Trying to come up with a "layout" without content is a pointless exercise..................

That makes it very easy. No content means nothing to put between the <body></body> and you just attach a gif or jpg version of the image as a background to the body via the stylesheet. Done and no need for tables or any other HTML.

[HazardTW]

Here would be my submission. It is a simplified version of a layout i worked with a while back. It would have to expand to fit the whole screen (the center column flows horizontally, the center/top content area expands for the height. The left and right columns must also be able to fit whatever width that you may want to change in the markup/css. So lets say the default value is 187px and then a week later you need to make it 200px to make room for something unexpected, you just enter the value into your css/markup and it will automatically stretch to that amount (without any disruption to the graphics, gradients, or content headers) -- this will have to be demonstrated as part of the challenge. and to top it off, each content area must have some lorum ipsum text, and every content header needs to have a title in place.


I am not pro-tables, but it seems to me the CSS rally cry is "separation of content from presentation", now you are telling him that you cannot create a layout(presentation) without being provided the content.

I'm just a noob at this but it doesn't make much sense to me.

Is it not possible to come up with hypothetical content that would fall within the parameters of the layout's prescribed capabilities?

[felgall]

How do you tell what is a content area unless it has content there?

The way to create a web page is to code the content in the HTML first before you start applying the appearance in the stylesheet. You can't do that from a single image file, you need the actual content and the individual images.

[HazardTW]

Ok, I agree that he could have labeled the PSD where he expects content and perhaps what type of content he expects there.

I really hope to see completed versions of this in CSS and tables, well, mostly want to see CSS version :)

Hurry, my popcorn is getting cold!! LMAO

[gradez28]

I was also going to have a look at this challenge, but a look at the psd file shows no content....

The whole point of a web page is to convey content - without any content, there is nothing to style, nor are there any clues as to what elements should do what fluidly. Trying to come up with a "layout" without content is a pointless exercise..................

I assumed that anybody smart enough to use css could figure out where the content goes. also if you look in my guidelines it says that every "content area" must be filled with lorum ipsum text. If you cant figure out where content would go, let me know and i will update the psd with some "content" for you :rolleyes:

webpages are not just about content, or else every single webpage would be simple white background and all text. websites are just as much about how they present themself as they are about the content they provide. if visual design didn't have anything to do with website development, then artists wouldn't be making their living doing online design work, and getting paid big bucks for it. yes, you need to design with the type of content and use in mind, but you dont have to have the content to be able to design for the type of content. Plus, the layout is already there for you, there is no designing to do. its simply a matter of semantics of making it work in a browser.

Its nowhere near being a pointless exercise; rather it be in the real world or as little competition. A perfect example is that a client wants you to design a website in which they will post articles. Are you going to tell them you cannot do their work until every single one of their articles are finished and sent to you, so that you can "design around the content"? thats ridiculous! they would find another designer/programmer without a second thought if you conveyed that attitude to them.

another thought; long gone are the days of static websites. if you design a website based around a group of static content, then thatever website you are creating is boring. plain and simple. viewers arn't going to care how clean your code is, they are going to see your page, lose interest, and move on. the web is going to leave you behind. in fact, it already has. viewers want fresh content, immediate updates, lots of media, and eye candy.


That makes it very easy. No content means nothing to put between the <body></body> and you just attach a gif or jpg version of the image as a background to the body via the stylesheet. Done and no need for tables or any other HTML.
lol, man at first i took you seriously. but now im not so sure.
Im still waiting for a reply to my last post. I already figured you have absolutely no graphical ability, or perhaps you just choose not to use it and go as far in the other direction as you can, but for you to not even understand the simple concept is really amazing.

So if i was a paying client that came to you with that layout and wanted you to make it into a full-page usable layout that is table-less.. you would simply set it as the background image and call it good? pathetic. I guess thats why you offer free help instead of paid services.

[gradez28]

I am not pro-tables, but it seems to me the CSS rally cry is "separation of content from presentation", now you are telling him that you cannot create a layout(presentation) without being provided the content.

I'm just a noob at this but it doesn't make much sense to me.

Is it not possible to come up with hypothetical content that would fall within the parameters of the layout's prescribed capabilities?

Finally, someone is thinking outside the box! LOL

[F84]

Well that certainly escalated very quickly... I personally think that you are arguing over something quite stupid (sorry I meant debating) because they can do virtually the same thing but in different ways.

I put it down to personal taste and preference. It’s like debating over who makes the best trainers, Nike or Adidas..... They do near enough exactly the same thing but again its up to preference.


But saying that I want to see what you “Web Jedi’s” produce!

-------------------------
Ding Ding - Round 1
-------------------------

[gradez28]

Well that certainly escalated very quickly... I personally think that you are arguing over something quite stupid (sorry I meant debating) because they can do virtually the same thing but in different ways.

I put it down to personal taste and preference. It’s like debating over who makes the best trainers, Nike or Adidas..... They do near enough exactly the same thing but again its up to preference.


But saying that I want to see what you “Web Jedi’s” produce!

-------------------------
Ding Ding - Round 1
-------------------------
Lol I didn't intend to come off as rude but i think i did. Ill blame that on 3am :) yeah arguing about this is kind of stupid, but thats cool with me lol

Im just about done with my table version. I will finish it later tonight and post it up. I cant wait to see a css version. I hope at least one of you guys come through with it

[toicontien]

I'm working on a CSS version, and holding a full time job down too. I get to it when I can. I have to admit, I'm kind of pumped about this. I haven't had much initial design work to do lately at my job. This will be a great exercise. :)

[F84]

:cool: I love a good contest.

[F84]

hey gradez28, have you got a site of some of your work?

[gradez28]

ladies and gentlemen, i present you my finished version using tables:
http://diffusionstudios.com/temp/tables/layout.php

Total file size is just over 9kb, thats including html, css, a small php browser detection script (see below), and a little bit of lorum ipsum content. If i was really worried about file size (some css worshipers use that as an argument) I could easily drop off a couple kb through a few different compression techniques, but 9kb is nothing so I wouldn't bother.


It displays and works properly on IE6, FF2, Opera 9, and Netscape 9 (none others tested).
It is w3c valid for xhtml and css.
It gives no errors or warnings in firefox error dialog (which can be brutal at times).
Full screen fluid-fit
All 3 columns' widths can be modified without distrupting the graphical interface (i can demonstrate if wanted)

those of you running lower resolution wont get to experience the fluid capabilities (full screen stretching) as the content will most likely push the layout past your window size causing a scroll bar. those of you with higher resolutions can change the size of your window and watch the whole layout flow-fit.

Browser Quirks
1. Opera must be refreshed for it to update the table's fluid capabilities (very odd behavior.. it will expand while making the browser larger, but when you shrink the browser, it will not re-draw the tables untill you hit refresh)
2. IE required an older doc type to work with height: 100% properly (reason for php detection script mentioned above)


F84, I don't have a worthy portfolio up right now but thats what diffusionstudios.com will be. Right now im developing the ajax systems for it and then i will get some more work put in there.

[WebJoel]

Not bad. Looks the same in IE as in Firefox. A minor loss of some image border images on the bottom edge when viewed on Konqueror (I did a few refreshes and it never resolved... could be a fault on my end or, in transit. Not too concerned, -it doesn't affect content).

Total Page Size is 98,776 bytes, -will take 30.17 seconds to load on 56-KBS dial-up (more than 8-10 seconds on dial-up, people start to 'back out' due to impatience). Really, not so bad. Layouts like this with TABLE and take a minute or more.

41-images used.

The CSS is 3818-bytes, -small enough to be sent in 3 TCP-IP packages (which is good).

Fits into 800x600 (with a very small scrolling on horizontal, but it reveals nothing so, is dismissable).

Nice use of white-space. Text easy to read. Very few colors used (not too colorful which can be a distraction).

A well thought-out page overall. Kudos.

[HazardTW]

Looks great!

Code reads like stereo instructions as I suspected, to me at least.

I find it easier to understand the code of a CSS layout than digging through tr's and td's, but I think there are a lot of people who are exactly the opposite.

When I see clearly marked div's with id's and nested div's, I don't worry about the order they appear in the HTML, but I understand what I am looking at, and can quickly see in the CSS what those div's should be doing, and where they should be, weather they DO fall in place as ordered in the HTML, or positioned absolutely, under another div via z-index, hidden via display:none, etc.

CSS was so much easier for me to wrap my brain around, the short time I used tables they drove me freaking nuts, could never get them to behave as well as you have done.

I know there are accessibility issues using tables, would this table layout cause problems with screen readers or is it good to go?

[mactheweb]

While I crank out totally CSS based sites, 22 in 06, I have to admit that I do so because I can. I'll also admit that some of my reason for using straight CSS is vanity. I'm good enough to build with CSS, so there. A sufficiently skilled designer can visually duplicate the huge majority of designs with either CSS or tables or a combination.

Yes, there are semantic and usability advantages for a totally CSS layout. A CSS layout is generally leaner and can be easily re-purposed for print. But CSS layout also has a steeper learning curve and more gotchas to look out for.

Want a different background color or pattern in two or more columns and you can't always predict which column will be longest? Tables are easier, much easier. Did you accidentally place an image width wider than your floated CSS div? Oops. Does your content now drop below where it should be? Do you see peekaboo, 3 pixel or guillotine bugs in your floated columns? You wouldn't with tables.

Just because ignorant table based designers use multiple nested tables and spacer gifs doesn't mean that such are necessary for sophisticated design. Hybrid designs that employ mostly CSS layout in a simple table skeleton can combine the best of both approaches.

A very basic container table with say two or three columns, a header and a footer wouldn't need any more code than duplicating the design with CSS. Then use margin, padding and absolute positioning within the 4 or 5 table cells and your hybrid layout is both more robust than a floated div layout and more flexible than an absolutely positioned one. Give an id to each cell and you can easily use CSS to serve up a nice printable page, or JavaScript to manipulate the DOM. Cell width, height, background, display and visibility are controlled from the CSS file. For sub elements within the cells use divs and you retain virtually all the advantages of CSS layout while avoiding many of its bugs. Want independent images? Use backgrounds in the HTML, body, table, cell and div elements. Place the table in a containing div or more if you need to. The only feature you realistically lose is source order independence, and honestly, how often is that really used? Your separation of layout and content is not absolute, but what is the real world, practical implication of that? Trivial to none.

In an ideal world in which all browser developers adhered strictly to web standards, in which all of the CSS 2.1 recommendations were followed and that used most of the proposed CSS 3 elements, child and pseudo elements, there would be no question. CSS would rule. In the real world, hybrid designs are generally the easiest designs to deploy. I'd even recommend that, unless, of course, you are as elitist or idealistic as I am.

[gradez28]

While I crank out totally CSS based sites, 22 in 06, I have to admit that I do so because I can. I'll also admit that some of my reason for using straight CSS is vanity. I'm good enough to build with CSS, so there. A sufficiently skilled designer can visually duplicate the huge majority of designs with either CSS or tables or a combination.

Would you happen to know a good solution to using height: 100% in nested
divs? Despite all my table-advocating, i love to use layers whenever i can, but whenever i come across a section that needs to expand height wise, I never can find a solution (the only thing i keep reading about is a nasty margin-padding hack using real high numbers to offset each other), which i feel is even more substandard than using a table to get that part done. Im not talking about just putting a background image on repeat so it *looks* like a column is running to the bottom; as from you can probably tell i like to have the ability to change the size of elements on the fly without having to resize the background image and try to pad everything to rework around the background.


I find it easier to understand the code of a CSS layout than digging through tr's and td's, but I think there are a lot of people who are exactly the opposite.

I know there are accessibility issues using tables, would this table layout cause problems with screen readers or is it good to go?

I agree, simple css/layer based designs are no doubt easier to read and for others to modify. with this table layout I could go in and edit it easily mainly just because im the one that designed the grid structure, but if i were to look at a similiarly-designed websites code it would take me a little time to get convert the code to visuals (especially when using css since you cant see what kind of styling properties each element has while skimming the code without having to reference back to css) however, this sort of layout isn't going to need much maintenance, and if it were a final product of mine, the owner of the site would never even need to open that file in order to manipulate any section of the site they wish (im addicted to php/sql :) )

As far as screen readers, tables shouldn't effect its ability to do what it needs to do, however If i were anticipating people to use them on my site, i would find out a way to detect it with php and output a different content layout that would be easier for say a blind person to navigate. your not going to want to give them 3 columns with 9 sections of different content, youd want to have the links listed first, and then the desired content, not all the other junk.

As far as total download size, it could be quite a bit smaller if I took the time to optimize each slice but for this example i didn't bother as it was just a show of code rather than a usable layout.


Also a note about this layout, i didn't design it - its not quite my style. A while back I had a freelancer that wanted some work so i told him to make me something for a site i was going to open. After he gave me this i realised it was just a few different "premium :rolleyes: " templates sold on ebay that he hacked up and threw together... he didn't get anymore work from me. But it only cost me $20 so im not complaining, and it was a perfect example for this exercise of a full screen GUI.

[felgall]

ladies and gentlemen, i present you my finished version using tables:
http://diffusionstudios.com/temp/tables/layout.php


What is the eight or so screens full of whitespace at the bottom for? At least if FF the page fills the browser but the scrollbar allows for scrolling down about 8 or so additional pages worth that are nothing but whitespace.

In Lynx your main page heading is half way through the content rather than at the top but at least all of the content is there (although since it isn't meaningful content it is impossible to make any sense of it).

In Opera the page doesn't fit the window properly and has scrollbars.

Switching off the stylesheet leaves a whole load of meaningless images in the page that shouldn't be there because they are not a part of the content.

For such a small page it certainly takes a really long time to load properly but I guess that is because you are using tables without including widths in the HTML and so the browser has to redraw the page each time it finishes loading an image..

[gradez28]

What is the eight or so screens full of whitespace at the bottom for? At least if FF the page fills the browser but the scrollbar allows for scrolling down about 8 or so additional pages worth that are nothing but whitespace.

In Lynx your main page heading is half way through the content rather than at the top but at least all of the content is there (although since it isn't meaningful content it is impossible to make any sense of it).

In Opera the page doesn't fit the window properly and has scrollbars.

Switching off the stylesheet leaves a whole load of meaningless images in the page that shouldn't be there because they are not a part of the content.

For such a small page it certainly takes a really long time to load properly but I guess that is because you are using tables without including widths in the HTML and so the browser has to redraw the page each time it finishes loading an image..
Its funny that none of my browsers do that. Perhaps my comptuer is just pro-tables :rolleyes: or maybe you dug up the oldest version of the browsers you could just to find something wrong?

If you would have looked at the code you would see that all widths and heights are set for where they need to be. The reason its loading slow is because its made up of 95% images. Thats just part of having a graphical layout.

As far as lynx, i set the goal for this to work in the browsers listed, and thats what i did. If i wanted to cater to the very small percent using lynx i would have added it to the list and made sure it worked properly in it. BTW, you know what is funny, that page heading is actually positioned with a layer, not tables LOL.. great way to point out a css/layer flaw in lynx. The reason i had to put it in the content section is because [here it comes, another flaw] IE was leaving a relative space wherever the layer was at, despite having absolute positioning. -- I sure love the irony right there, Mr. layer man. ;)

You sure are great at criticizing but i have yet to see you do anything that requires skill. I think the smartest thing said in this whole thread was by Jeff Mott, "Let's have less talk and more action.". Is it because you write articles for about.com that you are so self-assured? I guess the saying holds true, those who can: do. those who cant: teach.

If you think you can do so much better, lets see you do this layout in css/layers and make it work for all the browsers mentioned, plus lynx -- prove yourself. once again, i am calling your bluff and am willing to bet that you CANT.

I swear, every post you make makes it clearer how full of -- you are.

[mactheweb]

Would you happen to know a good solution to using height: 100% in nested
divs? Despite all my table-advocating, i love to use layers whenever i can, but whenever i come across a section that needs to expand height wise, I never can find a solution (the only thing i keep reading about is a nasty margin-padding hack using real high numbers to offset each other), which i feel is even more substandard than using a table to get that part done. Im not talking about just putting a background image on repeat so it *looks* like a column is running to the bottom; as from you can probably tell i like to have the ability to change the size of elements on the fly without having to resize the background image and try to pad everything to rework around the background.

That's the crux of it isn't it. Equal height columns and vertical centering are built into table cells and require hacks in CSS. The problem with equal height columns is that all divs are independent of each other unlike cells which all have the same height in the same row. You can use JavaScript to read the height of the longest div and write that into the shorter one, but that introduces a whole other set of problems, cross browser compatibility and complexity issues. If your elements are changed on the fly via JavaScript you might want to look at something like this script (http://www.dynamicdrive.com/style/blog/entry/css-equal-columns-height-script/). Unfortunately there seems to be a pretty consistent 10% of the population that disables JavaScript. That's just too big a portion of the market for me.

Other than some JavaScript solutions, I don't know of a method as simple as using tables create equal column height.

I very seldom use 100% height. I do use the background image with faux columns fairly often. If there are only two columns that works easily. You don't have to resize the image. Just make each background color wider than you can imagine wanting and position it with negative margin.

Say you might want a 200px left column on one page and a 300px one on another. If your background image has a 400px wide left color or pattern then using url(bg.gif) -200px 0 repeat-y;} would do the trick on the first. -100px on the second.

If you need more content below your container use a new background after you've cleared the previous container div. If you want borders between the columns build them into the background.

Another way to do this is the one used in the "one true layout" (http://www.google.com/url?sa=t&ct=res&cd=1&url=http%3A%2F%2Fwww.positioniseverything.net%2Farticles%2Fonetruelayout%2F&ei=kCOQRqTyLpyuggPHr5nLCA&usg=AFQjCNHXyHj2PUsBR89Ul6h1KctT2iOQww&sig2=zagQrOcRNKM2C81A9J71PQ). This is basically done by wrapping your column layout inside a div with overflow: hidden and adding a ridiculous amount of bottom padding and an equally ridiculous amount of negative bottom margin on a column. For instance, you might define a column as:
.column {
padding-bottom: 2000px;
margin-bottom: -2000px;
}

This is a bit hacky but not too difficult. I've used it but generally I'm more likely to use absolutely positioned columns within relatively positioned containers than floated ones. That relieves many of the problems associated with Internet Explorer's flaky float implementation but doesn't solve the equal height problem.

[gradez28]

thanks for the reply mactheweb.

Ive thought about your suggestion of making the background image larger than it needs to be, but that only works for solid colors, patterns, or a graphic that only caters to one side of the column (like for a border or single-side gradient). It cant work like that if you have a column with for an example, a gradient color change, with a border on both sides.

Heres a quick example i threw together.. its a column (using layers) where there is a repeating image for both the left and right side, with the shared middle-ground being a solid bg color. If you click on the link you can see how it has the ability to stretch wile still keeping the same graphical interface.
http://diffusionstudios.com/temp/tables/column/col.html


One thing that has always stumped me, you can get height:100% to work if the parent node is body, but not if its nested inside another element. Unfortunately for me, i rarely design a site in which the required 100% height column is stuck to the side of the page requiring the full body :(

Ive considered using javascript to take care of it but I have always over-thought it. i honestly never thought of simply grabbing the height of the longest column. I am going to put this to test at diffusionstudios.com where the left column is stuck at a specified height right now. and since the site is using javascript extensively i wont have to worry about it not working (those with javascript turned off will be taken to a friendlier page with "old fashioned" navigation, lol)

[felgall]

Its funny that none of my browsers do that. Perhaps my comptuer is just pro-tables :rolleyes: or maybe you dug up the oldest version of the browsers you could just to find something wrong?


No - definitely the absolute latest version of the browser - even ran a check for updates just before and had the web sites reply that they didn't have any later updates of any sort available.

Lynx gives a good indication of the order in which people listening to your page will hear the content read out which is the only reason I ever use it.

In any case I can't see any point in creating a non-tables version of that particular layout where the whole design of the page is so obviously designed to be a table.

The only actual problem I can see with the design apart from the browser quirks that you apparently don't see (and which are not really major issues in any case) are the presentational elements that still appear when you turn off the stylesheet,

[mactheweb]

thanks for the reply mactheweb.
One thing that has always stumped me, you can get height:100% to work if the parent node is body, but not if its nested inside another element. Unfortunately for me, i rarely design a site in which the required 100% height column is stuck to the side of the page requiring the full body :(

You know using the body doesn't require having the page stick to the side. Give html a background then set body an explicit or percentage width and margin say:
html {background: blue}
body {background: white; margin: 10px auto; padding: 12px; width: 80%;}

[gradez28]

You know using the body doesn't require having the page stick to the side. Give html a background then set body an explicit or percentage width and margin say:
html {background: blue}
body {background: white; margin: 10px auto; padding: 12px; width: 80%;}
yeah. what i meant by what i said is that usually when i need a height to be 100%, its almost always within the design itself (like diffusionstudios.com), making it out of place to use a root-level layer.. HOWEVER, earlier today I did come up with a solution that i havn't read about anywhere yet (im sure its been done, though).. is to keep all 100% height layers on the root level, and then simply "cover" the un-needed sections up with horizontal layers containing another part of the design (namely header and footer).. this could cause problems of content flowing under the footer if margin/padding is ignored by the browser when the screen is shrunk (seen it happen before), but if absolutely required, could be fixed with a spacer image, as it cant collapse and would force a scroll. It could also become very tricky to get the current placement if say you have 3 columns, but only at a set total width which floats in the center of the page on larger resolutions.

Ill have to play with it a little to see how well it behaves.

[HazardTW]

UH! All four of your links point right back to the same page!!!
I tried and tried to get this page to load on my Commodore 64, no joy, hope you have an explanation!


;)

[gradez28]

UH! All four of your links point right back to the same page!!!
LOL.. tables are notorious for eating up small children and making links disappear :D


I tried and tried to get this page to load on my Commodore 64, no joy, hope you have an explanation!

I think its because your 5.2" floppy drive is malfunctioning.. upgrade to a newer unit and the page should load. I promise. seriously, go try it.

on a serious note, i need to dig up my old C64 and take a trip down memory lane. That thing was my first programming experience -- hardcore. :cool:

[HazardTW]

:) glad you understood my post.

My first programming experience was on a TRS-80 Model 2, a bunch of BASIC and started getting into the Z-80 Assembly Language, then I discovered girls and beer, oops...

[gradez28]

then I discovered girls and beer, oops...
LOL.. it all goes downhill from there

[F84]

:confused: I can't see any point in creating a non-tables version:confused:

Talk is soo cheap!!! When are you going to man up and produce a css design.


??????????????????????????????????????????????????????????????????????????

[HazardTW]

He's stuck trying to come up with the CSS version of "8 blank pages" ;)

Just imagine Muhammad Ali mouthing it up as usual before a fight, then comes fight night and he jumps out of the ring before the first bell, mouthing all the way out of the arena about how he just can't see the point in fighting this opponent, it would just be too easy, or too 'whatever'.

I don't know if I was the only one looking forward to seeing a beautiful CSS version of this challenge from Felgall, but I can see I am definitely not the only one disappointed that he can't step up to the plate after all the rhetoric.

[F84]

FELGAL, FELGAL, FELGAL

are you all 'About' talking or do you actually make any web pages?

[drhowarddrfine]

:confused: :confused:

Talk is soo cheap!!! When are you going to man up and produce a css design.


??????????????????????????????????????????????????????????????????????????
How much are you going to pay him? Why should he? Time is money for those of us who are paid to do this.

Apparently this thread started the day I went out of town so I only skimmed it. Here's something to think about for those who prefer tables for layout and "hate css" especially because "the leading web browser" doesn't handle css well. I'm talking of Andy Clarke, Molly Holzschlag, Dave Shea, Zeldman, et al. In their new book, Transcending CSS, it is stated that they no longer code for the lowest common denominator nor for the most popular (that is, Internet Explorer). They load up their pages with all the latest published standard elements, including CSS3 and they only use xhtml. If you use Firefox or Opera, you'll see everything the web standards can handle. If you use IE, sorry but you'll get the degraded version.

No more "graceful degradation" for them. Get a better browser.

Tables for layout? Hah! The guy who created this method was David Siegel in 1997. Not long after that he wrote "The Web Is Ruined and I Ruined It": (http://xml.com/pub/a/w3j/s1.people.html)
I ruined the web by mixing chocolate and peanut butter so they could never become unmixed. I committed the hangable offence of mixing structure with presentation.
They go on to call tables for layout "a monster". Another problem with tables is that they impose their order on content rather than the content deciding the order.

[felgall]

FELGAL, FELGAL, FELGAL

are you all 'About' talking or do you actually make any web pages?

I spend most of my time working on web pages that I actually get paid for and so do not see any point in wasting any of it on producing a page for which I will not get any payment. In any case this particular page design was created specifically to use a table to start with and would require a significant effort to get it to work properly whichever way it is coded.

[gradez28]

How much are you going to pay him? Why should he? Time is money for those of us who are paid to do this.

Apparently this thread started the day I went out of town so I only skimmed it. Here's something to think about for those who prefer tables for layout and "hate css" especially because "the leading web browser" doesn't handle css well. I'm talking of Andy Clarke, Molly Holzschlag, Dave Shea, Zeldman, et al. In their new book, Transcending CSS, it is stated that they no longer code for the lowest common denominator nor for the most popular (that is, Internet Explorer). They load up their pages with all the latest published standard elements, including CSS3 and they only use xhtml. If you use Firefox or Opera, you'll see everything the web standards can handle. If you use IE, sorry but you'll get the degraded version.

No more "graceful degradation" for them. Get a better browser.
I wish everybody would follow that advice!

A few years ago I used to be a die-hard IE-only user/coder. I would ignorantly code [html & javascript] to work just for IE and say screw the other browsers (mainly nutscrape, as i used to call it). but luckily a friend of mine got me to try FF. I havn't used IE since (except for making my work compatible with it). Back then i never would imagine that one day i would curse at IE as much as i do now. Coding in w3c standards for FF is just so easy because 99% of the time, it works the way it should.. but then you goto IE and its all jacked up requiring css hacks, extra javascript code, and sometimes even requiring a sacrifice. I haven't personally used the new IE so i have no idea what kind of improvements they have done, but IE 6 and its predecessors are no doubt junk! however i don't think i would go as far as going the "sorry, your browser sucks.. please upgrade" route. I take the extra time to make sure its compatible, to an extent (i don't worry about pre-6.0 IE, or pre 9.0 netscape)

As far as creating tabled layouts, I think the first time i did it was around 2000. I didn't learn it from anywhere, it was just something i happened to come across as a possibility while playing around with pointless coding projects


In any case this particular page design was created specifically to use a table to start with and would require a significant effort to get it to work properly whichever way it is coded.
It doesn't matter if you do it with or without tables, the same method still has to be used as far as slicing the layout into pieces in order to separate the static sections from the fluid. It can be done in CSS-only, just not easily. And the making it fit vertically in the browser would cause some serious headache to any brave soul trying to do it, while keeping it within standards and to my guidelines. Most people either wouldn't want to try to do that in CSS, or couldn't afford to pay someone to do it, and so they would most likely make a sacrifice and go with a *simpler* layout.. which is one of my main points: when using css only, you must design your site around its basic capabilities, unless you have the patience, skill and/or funds to get it done... where otherwise they could do what they really want with almost no limitations, more efficiently, using tables.

I agree that it would require a significant effort. It took me a long time to do it with tables, and it would take even longer without tables. Thus proving 2 more of my points: table-less css is not always easier, and table-less css is not always more "cost effective" (two points that i have seen used promoting table-less designs on more than one occasion)

What browsers did the "8 pages of white" show up in? Im still tryign to figure out why that would happen. I have the latest version of FF, opera, netscape, and for the hell of it i even tried it in safari -- loads perfect in all of them. Only browser i use thats outdated is IE 6.0.29~
Does this quirk show up for anybody else? (a scroll bar with excessive white space underneath the layout)

One more thought... a few times it has been brought up that when using table layouts, "you cant keep the content in the right order". First, who is to say what the right order is? Should a menu come before or after the logo. should the copyright come before or after the advertisements? There is no right and wrong when it comes to "order". So when you say you cant keep content in the right order, how do you determine whats the "right" order of content?
-second, why is it such a big deal which order the content is in? Anybody who programs beyond html/css knows that programming is not a linear process from beginning to end (unless the extend of your skill is making a 20 line javascript). If you aren't comfortable with stuff being "scattered", then you are in the wrong line of work. Plus, websites are all about the end user and the final display of content. It doesn't matter if your logo is coded in on the very last line of the html, 99% of users aren't going to care, or even ever know. Very few people are going to study your source code, and even few of them are going to give it a second thought.

[toicontien]

One more thought... a few times it has been brought up that when using table layouts, "you cant keep the content in the right order". First, who is to say what the right order is?
Felgall is referring to having your main content come before your navigation. The idea is, since the main content is what people are after, it should come first, or just after the logo. Search engines will like it a little more, and people with screen readers will like not having to listen to your main menu every time they visit a page. I also used to believe this until I read an article about a small study that debunked that theory. People who used screen readers expected the web page to be read in the order they would see the page: left to right. If you have a menu in the left column, put it before the main content in the middle column. It surprised me, and I wish I had a link to that article. I might have book marked it on my other machine. Though I must admit, the people in the study might be considered "low sighted" or legally blind. They do see, just not clear enough to be useful, so they can see the basic shape of the page, as well as some color. I'm not sure if any of the people in the study were "total darkness" blind.

As for the CSS version of the aforementioned layout, the hardest part was getting the footer to always remain at the bottom of the viewport or page. I finally have that figured out and the code to do it turned out to be amazingly simple. Anyhow, sorry it's taking so long. I actually haven't gotten much of a chance to work on it.

[jochem]

Check out these links:

http://blog.html.it/layoutgala
http://w3tableless.com

:D Cheers, Jochem

[gradez28]

Felgall is referring to having your main content come before your navigation. The idea is, since the main content is what people are after, it should come first, or just after the logo. Search engines will like it a little more, and people with screen readers will like not having to listen to your main menu every time they visit a page. I also used to believe this until I read an article about a small study that debunked that theory. People who used screen readers expected the web page to be read in the order they would see the page: left to right. If you have a menu in the left column, put it before the main content in the middle column. It surprised me, and I wish I had a link to that article. I might have book marked it on my other machine. Though I must admit, the people in the study might be considered "low sighted" or legally blind. They do see, just not clear enough to be useful, so they can see the basic shape of the page, as well as some color. I'm not sure if any of the people in the study were "total darkness" blind.

As for the CSS version of the aforementioned layout, the hardest part was getting the footer to always remain at the bottom of the viewport or page. I finally have that figured out and the code to do it turned out to be amazingly simple. Anyhow, sorry it's taking so long. I actually haven't gotten much of a chance to work on it.

Lol take a look at the source code for felgall.com. He has 46 navigation links placed before any of his content. ;)

No problem about taking a while on the layout. Im in no rush, Im just glad someone it up to it :)

[felgall]

I was actually referring to the fact that the page heading comes half way through the content rather than at the top.

I completely agree that what appears at the top left of the page should be first in the source regardless of what it is.

Where using CSS without tables becomes easier to maintain is when the client decides that they want to change the way that the pages look completely. Unless you are using a server side language to generate the code for the template portion of the page this would mean a complete rewrite of every page on the site which may take weeks or even months to do. With the layout defined entirely by CSS you only have one file that needs changing even if it does take a day or two to sort out the new layout properly. Plus you don't have the overhead of server side processing on pages that don't really need it.

Of course everyone can't just switch the method they use to create pages overnight and there are many steps along the path from HTML 3.2 tabled layouts to pure CSS layouts without tables (except for tabular data). It is also easier to move away from tables once you also move away from slicing up a single image that defines the appearance to using individual images for the parts of the page where no slicing is required.

[gradez28]

I was actually referring to the fact that the page heading comes half way through the content rather than at the top.



Thats not typically something i do. As stated before only reason i did it this time was because for some reason IE was acting up with the layer and putting a space wherever it was coded at even though it had absolute positioning. (most likely due to having to revert to an older doc type in IE for height=100% to work). That issue is completely irrelevant to the tables.

Of course everyone can't just switch the method they use to create pages overnight and there are many steps along the path from HTML 3.2 tabled layouts to pure CSS layouts without tables (except for tabular data). It is also easier to move away from tables once you also move away from slicing up a single image that defines the appearance to using individual images for the parts of the page where no slicing is required.
I dunno if that was aimed at me or for people general; but i do also do plenty of table-less work and i use css in every website i do regardless of tables. And when i do use tables, its not "html 3.2" or else it wouldn't validate as xhtml via w3c standards.

also, I only slice images when its needed for the layout to display property (once again a matter of making the layout more usable by allowing it to flow even with a graphical face)

I agree, there are plenty of ignorant people who use tables the wrong way and are living proof of "why you shouldn't" because of their poor techniques, but that doesn't make me believe that they are wrong to use, because i know how to properly utilize them, when they are the better choice

[felgall]

I agree, there are plenty of ignorant people who use tables the wrong way and are living proof of "why you shouldn't" because of their poor techniques, but that doesn't make me believe that they are wrong to use, because i know how to properly utilize them, when they are the better choice

Tables are intended to be used to display tabular data.

There are situations where everyone will agree that the content is tabular data and that the use of tables is appropriate.

There are situations where it is obvious that the content is not tabular data and that the use of tables is completely inappropriate.

There are also a range of situations where some people would consider the content to be tabular data and others would not. Individuals may even change their own opinions on some of these situations as they become more familiar with CSS and what can and can't be done with it.

The particular design presented by gradez28 is certainly one where it could be argued that the surrounding image is tabular data in which case the use of a table would be appropriate.

[drhowarddrfine]

btw, there is no such thing as a layer in HTML or CSS. It's OK to refer to 'layers' if you are using z-index and if you are talking Dreamweaver talk. Other than that, <div>s are not called layers and only confuse when they are.

[gradez28]

btw, there is no such thing as a layer in HTML or CSS. It's OK to refer to 'layers' if you are using z-index and if you are talking Dreamweaver talk. Other than that, <div>s are not called layers and only confuse when they are.
thanks for clearing that up. Ive always heard them referred to as layers so i just picked up on it. Just curious, are there any other names for div's? Does div stand for anything?

[drhowarddrfine]

A horse is a horse and a div is a div. Possibly divider or division. You should really read the spec. (http://www.w3.org/TR/html401/struct/global.html#edef-DIV)

[toicontien]

I just need to throw in a few more borders on my CSS version of the layout, then test it in IE-Win (and hack and hack and hack and hack...). It's 11 and I'm ready to not be staring at a computer screen anymore.

[Jeff Mott]

My CSS version:
http://www.itss.brockport.edu/~jmot0712/iwsbanner2/

I checked it in FF, IE6, IE7, and Opera.

Comparing CSS and Tables

First and foremost, you can view speed reports for the tables version (http://www.websiteoptimization.com/services/analyze/wso.php?url=http://diffusionstudios.com/temp/tables/layout.php) and the CSS version (http://www.websiteoptimization.com/services/analyze/wso.php?url=http://www.itss.brockport.edu/~jmot0712/iwsbanner2/). The tables version has a total size of about 106 kB, and the CSS version, 56 kB. These sizes, however, include the images. But including the images is, I think, semi-fair, since the method you use to lay out the page determines how you can slice the images and create the backgrounds. But if we ignore the images anyway, then the two are about even, with the tables version's HTML and CSS coming to about 9.2 kB and the CSS version's, 10.6 kB.

Second, the CSS version is more flexible with content and font size. In the tables version, when the font size is increased (people with bad eyesight do, do that) the text spills out of the boxes and backgrounds; the text in the CSS version does not. (In IE for the tables version, the font size cannot be changed at all. It’s a bug in IE that happens under certain conditions. Every Web developer needs to try to avoid those conditions.) Also, in at least one area of the tables version -- Consectetuer -- the box does not expand vertically. If you add a few more links to that box, they will spill overtop the Suspendisse box.

Third, the tables version has no semantic structure. You can see the Lynx output for the tables version (http://www.yellowpipe.com/yis/tools/lynx/IElynxviewEXT.cgi?url=http://diffusionstudios.com/temp/tables/layout.php) and the CSS version (http://www.yellowpipe.com/yis/tools/lynx/IElynxviewEXT.cgi?url=http://www.itss.brockport.edu/~jmot0712/iwsbanner2/). This is important. It’s a representation of how screen readers and also search engines will see your page. The tables version has no meaningful structure or content order. The most blatant example of bad content order is the page title; it’s stuffed somewhere between the blog and the About Me section.

And finally, all the benefits of separated content and presentation still apply. Maintenance and changes in the future become enormously easier. Swapping a single CSS file can give your site a completely different appearance and layout without needing to edit anything else. And more than anything else, I think this is the biggest benefit. It's less about immediate benefit and more about forward planning.

[gradez28]

very nice work!

You managed to fulfull every guideline except to have it automatically stretch to the height of the browser (thats the main beef i have with css). If i was one of those terribly anal clients that insisted on it fitting the height of the page, you would have a headache on your hands.. but from my experience 14/15 clients would be willing to let that slide anyways.

One small thing i noticed that tables solves with no extra tweaking (can be dealt with in css), is that if the window width is sized smaller than a certain amount, instead of holding the layout at a certain size and giving scroll bars, everything instead just get distorted. Not necessarily a flaw of css, just something a css coder would have to "watch out for".

Your cssSupplement class is pretty cool. Very nice way to keep the code super lean, and amazingly flexible.

As far as the total size, i didn't do any real optimizing to lower the entire size. In a little bit i will make a second copy of the layout with some optimization done just for the hell of it to see what kind of difference there is. Just removing the extra white space from the css will drop 20% off that file.

I think in this particular layout, hard-coding the extra wrapper elements would have saved you some size, but then again the base code would not be nearly as flexible. I would choose flexibility over file size any day.

I was really hoping to see the css version fit the height of the window, but even without that, i am quite impressed with your work. Not just because you did it with css, but because you took the extra step to really allow CSS's advantages shine through. You had my respect after your first post, and your work just adds to it.

I think comparing the two works alone would be enough proof to make the majority of table-users decide on css. At this point, the only point i still have that tables have an advantage would be the height issue.

What would you estimate the total time spent to be on this? I spent around 2 hours of work on mine.

toicontien, Id still like to see your take on it if you still want to.

http://www.webdeveloper.com/forum/images/icons/icon14.gif

[gradez28]

Optimized table version: http://diffusionstudios.com/temp/optim/layout.php
Total Size: 49517 bytes :)

[Jeff Mott]

You managed to fulfull every guideline except to have it automatically stretch to the height of the browser (thats the main beef i have with css).It's not a problem with CSS so much as a problem with IE. Many tasks would be so much simpler if we didn't limit ourselves to what IE can handle.

But even with those limitations, stretching at least to fill the browser window can still be done. With my markup, it would involve setting #Page to a min-height of 100% (with the BODY and HTML elements already at 100%) and absolute positioning #Footer to the bottom of #Page. From an earlier post, it sounds like toicontien is doing exactly that, so maybe you'll still get to see it.


if the window width is sized smaller than a certain amount, instead of holding the layout at a certain size and giving scroll bars, everything instead just get distorted. Not necessarily a flaw of css, just something a css coder would have to "watch out for".You're right that it's not a flaw in CSS. It's a flaw in IE. IE 6 doesn't support the min-width property. Firefox does, as well as IE 7. If you view the page in those browsers, the layout will indeed hold to a minimum size.

But in most websites I build, this isn't an issue. Usability research (http://www.usability.gov/pubs/082006news.html) has found that users prefer text line-lengths of about four inches. So I tend to make my main content areas about four inches wide rather than being fluid.

I even had the chance to look at both your and my demo page on a wide-screen computer, and I thought they looked a bit ugly with the middle section so wide. If it had creative control over the design, I would probably give the page a fixed width.


Your cssSupplement class is pretty cool. Very nice way to keep the code super lean, and amazingly flexible.Thanks! The idea was to give myself features coming in CSS3, at least until CSS3 itself can be used. But with pace Microsoft has been setting, that's going to be a long time.

The next feature I want to add to the CssSupplement library is support for zebra tables. Consecutive tags -- such as table rows, paragraphs or list items -- would be marked with the classes "even" and "odd". That way you could do tr.even { background-color: gray } tr.odd { background-color: silver } And just like that... instant zebra tables. :)


In a little bit i will make a second copy of the layout with some optimization done just for the hell of it to see what kind of difference there is. Just removing the extra white space from the css will drop 20% off that file.... Total Size: 49517 bytes :)Well, I can downgrade image quality and strip whitespace too, ;). http://www.itss.brockport.edu/~jmot0712/iwsbanner2-small/ -- 43640 bytes (42.6 kB). A little competition for ya. :p


I think in this particular layout, hard-coding the extra wrapper elements would have saved you some size, but then again the base code would not be nearly as flexible. I would choose flexibility over file size any day.I completely agree. I would definitely choose flexibility too. Like the case of the zebra tables, I like knowing that I can automatically add whatever classes or boxes that I may need in the future.


i am quite impressed with your work. Not just because you did it with css, but because you took the extra step to really allow CSS's advantages shine through. You had my respect after your first post, and your work just adds to it.:) Thanks.


I think comparing the two works alone would be enough proof to make the majority of table-users decide on css.Well, creating such a pure separation is not something everyone is up to. And browser support (rather, IE's support) only makes things harder. Many people have said that any design can be made with only CSS, and that's true, but that doesn't mean every design is easy.


What would you estimate the total time spent to be on this?eek... I'm not sure. I rarely got to work at it for any length of time. My routine came to be, save one graphic, get it up on the page, and then I'd have to walk away again until the next day, ;P. But if I had to guess, I'd say definitely longer than two hours... maybe four or five. It didn't help that I had to scrap most of the page at one point. I had originally made the shadow under the header with a semi-transparent PNG. That would have let me not worry about shadowed-graphics for each of the columns. The PNG would simply shadow whatever happened to be there. But sadly IE 6 wouldn't let such an elegant solution work. :(

[gradez28]

You're right that it's not a flaw in CSS. It's a flaw in IE. IE 6 doesn't support the min-width property. Firefox does, as well as IE 7. If you view the page in those browsers, the layout will indeed hold to a minimum size.

But in most websites I build, this isn't an issue. Usability research has found that users prefer text line-lengths of about four inches. So I tend to make my main content areas about four inches wide rather than being fluid.

I even had the chance to look at both your and my demo page on a wide-screen computer, and I thought they looked a bit ugly with the middle section so wide. If it had creative control over the design, I would probably give the page a fixed width.
I actually didn't even try it in IE. I use firefox 99% of the time. Here is a screenshot of what i meant...... ok nevermind, looks like you fixed it, lol - right on.

I agree that this particular layout looks quite ugly with width: 100% (it was originally designed to be fixed width and height, but for this experiment i wanted to go with full-screen)... actually, i think the layout is kind of ugly, period, lol.
I almost always go with a fixed width layout because 100% width layouts are easy to make look good for people with lower resolutions, but then it looks too bare and open whenever viewed on say 1600x1200 (which is what i use.) Even though i stick with fixed width, i still like to always build in the ability to stretch horizontally if needed though

Thats too bad about the png issue. IE is the only reason i haven't started using that image format; which sucks because i constantly come into situations where the alpha channel would rock.

I like knowing that I can automatically add whatever classes or boxes that I may need in the future.
the joys of being a programmer!

[moogle]

i've been reading through this post, as much as i've tried to like css, it annoys me so much because of its incompatability. one problem i cannot do in css and what tables makes so easy like grade said is stretching columns.

take a look at http://moogs.l2furyx.com/test.php

the left and right columns never stretch to the full length. for a layout like this i would have to use tables right?

[Jeff Mott]

the left and right columns never stretch to the full length. for a layout like this i would have to use tables right?Not necessarily. After all, if you look at the CSS page I posted in this thread, you'll see those columns stretching the full length... or, at least appearing to.

But you're right. Until IE catches up with technology, we can't stretch columns vertically. But fortunately, in the mean time, another CSS guru named Dan Cederholm came up with a trick to achieve the same effect, and he called it Faux Columns (http://www.alistapart.com/articles/fauxcolumns/).

[toicontien]

toicontien, Id still like to see your take on it if you still want to.
I'm still working on it. I'm trying a new method for creating columns of equal height using DIVs rather than images. It's working decent in IE6, and excellent in Firefox et all. What I'm having problems with now is getting a minimum width to work in that lousy browser. I also ran into a problem where 100% is less than 100% in IE6. Yeesh. Basically I'm 99% done except Internet Explorer refuses to shave off one or two pixels, depending on the view port size.

I hate that @%$& browser...

To get the design working in Firefox, it took me a matter of maybe two hours of coding. Opera worked beautifully. Now I've reworked my code 3 @#$%ing times to get it to work in Internet Explorer, and I've spent probably 4 hours doing it.

I need to just admit defeat and use images for equal column heights like I planned originally.

[AlexCr]

Hi,

I get the sense that some people think designers who resort to tables are doing it because they don't have sufficient CSS skills and are too lazy to learn them. That's probably true in some cases, but what about WebDeveloper.com, or at least vBulletin.com who makes the forum software used here by WebDeveloper.com? If you look at the source for this very page you'll see enough tables (nested too!) to start a furniture store. Yes it's a hybrid design making use of CSS where it makes sense, but I wouldn't call it a "light" use of tables. Are they just stuck in 1999? Too lazy to learn CSS? I doubt it. :)

What about Google? It's fair to say they know something about the web and CSS. But look at Google's News page. It uses tables extensively. Not just a single top level table, but nested tables all over the place. What do they get in return for this outrage? Notice how their layout is fairly liquid. It responds well to resizing of the page. It uses most of the available space even on a large monitor. Notice how you can resize the text easily in either IE or FF. For me those are all major benefits.

I am amazed :eek: at the fact that many (maybe most?) professionally designed sites, including those from authorities like Dave Shea (CSS Zen Garden) (see his blog: http://www.mezzoblue.com/), use 100% fixed non-liquid layouts that do not resize their text in response to IE's View/Text-Size menu. Obviously Google made a different choice. I'm personally very glad they did :).

Alex

[Jeff Mott]

But look at Google's News page. It uses tables extensively.In the Google home page source code, you'll also find font tags. Should we follow Google's example and start using those again as well?

Granted that CSS layouts are still in the minority among the bigger businesses and organizations, but that's slowly changing. As CSS continues to develop and browser support continues to grow, more and more sites are making the change. In another five to ten years, it very well may be the standard.


Notice how their [Google's] layout is fairly liquid. It responds well to resizing of the page. It uses most of the available space even on a large monitor.CSS can do exactly the same, and just as easily. Notice the CSS page I posted in this thread (http://www.webdeveloper.com/forum/showpost.php?p=776976&postcount=76). It's also liquid and responds well to resizing of the page.


Notice how you can resize the text easily in either IE or FF. For me those are all major benefits.In the CSS page I posted in this thread (http://www.webdeveloper.com/forum/showpost.php?p=776976&postcount=76), notice how you can resize the text easily in either IE or FF. And in the tables version of the same page (http://www.webdeveloper.com/forum/showpost.php?p=774241&postcount=44), notice how you can't.


I am amazed at the fact that many (maybe most?) professionally designed sites ... use 100% fixed non-liquid layouts that do not resize their text in response to IE's View/Text-Size menu. Obviously Google made a different choice. I'm personally very glad they did.That choice is purely aesthetic. It has nothing to do with CSS or tables. And IE not being able to resize text is really just a bug in IE. Developers can of course work around it, but that also still has nothing to do with CSS or tables.

But I do think your first paragraph has some truth to it. There certainly seems to be people who think tabled layouts are the result of lazy and stupid developers only. But at the same time, there seems to be people who think CSS layouts are always hacked together and with no real benefits. Even in your own post, AlexCr, you attributed several drawbacks to CSS even though those issues have nothing at all to do with either CSS or tables.

I think some people on both sides need to take a step back and try to work out their biases.

[AlexCr]

Hi Jeff,

In the Google home page source code, you'll also find font tags. Should we follow Google's example and start using those again as well?

I'll admit, when I saw those font tags in Google's pages I was a little surprised too. But yes, I am actually tempted to make that same scandalous conclusion you just stated. But lets stick to CSS for the moment. <sarcasm>My goodness, it's these darned standards-hostile companies like Google that are ruining the web. :) </sarcasm>

Granted that CSS layouts are still in the minority among the bigger businesses and organizations, but that's slowly changing. As CSS continues to develop and browser support continues to grow, more and more sites are making the change. In another five to ten years, it very well may be the standard.

Five or ten years? But you, me and Google still have to serve a lot of pages during that time. What are we supposed to do until then?

The key point is that for most sites it doesn't really matter what newer versions of "CSS" in the abstract can do. Most sites are expected to render well on the current browsers in the field. Until IE6's share drops below a certain percentage it's irrelevant what the latest IE or Firefox can do. Presumably that is why Google is coding their pages using tables. That is, because it's the only way to get the look / behavior they want on the range of browsers they consider significant.

Or Jeff, do you think you could re-code those Google pages without tables and meet the above constraints?

Alex

[Jeff Mott]

Five or ten years? But you, me and Google still have to serve a lot of pages during that time. What are we supposed to do until then?Is this a real question?

For the next five to ten years, you, me and Google will... make webpages. With tables if you like, or with CSS if you prefer.

The key point is that for most sites it doesn't really matter what newer versions of "CSS" in the abstract can do. Most sites are expected to render well on the current browsers in the field. Until IE6's share drops below a certain percentage it's irrelevant what the latest IE or Firefox can do.A purely CSS layout can already render correctly in at least 99% of browsers in use, which obviously includes IE6. So... I'm not quite sure what you're worried about.

Or Jeff, do you think you could re-code those Google pages without tables and meet the above constraints?Yes. In fact, such a challenge is what this whole thread is already about. gradez28 wasn't sure if an intensely graphical and intricate design could be made with CSS and still work in all the browsers it would need to work in. I showed it could. I linked right to it for you in my post before this one. I'll link to it again just in case you missed it. You should take a look.

http://www.webdeveloper.com/forum/showthread.php?p=776976

[drhowarddrfine]

I've only been scanning this and was gone for a few days but a few comments:
1) There is nothing wrong with CSS. It's the browsers that are the problem. And, as noted above, 99% of browser problems are only with IE.

2) A lot of sites are still built with tables and <font> and there are Amish farmers that pull weeds by hand or a hoe or a horse, but that doesn't mean we should get a horse, too. It takes a long time for big companies and big ships to change course or do things differently. They need a lot of people and sometimes those people aren't up to date so you go with what youse got.

3) As I stated in another post elsewhere, the best known designers are now using every tool in the box and if IE can't handle it, to heck with IE; get a better browser, meaning Firefox and Opera and Safari users can see nice features that IE users can't. No loss of functionality but better browsers get better stuff.

[fdoze]

Hi,

I'm trying to set a fluid CSS design.

I'm so stucked at this point that I'm begining to think about TABLES again. I really do now know if its possible to build what I want using CSS....


Please see attached picture for details.

http://img58.imageshack.us/img58/1997/cssliquiddesignao6.gif


Thanks in advance,

f.

[drhowarddrfine]

Can you overlap those cells on the left hand side like your image shows? Of course, you can do all that in CSS though fluid layouts are trickier but I guess they're trickier with anything but, since you said you would go back to tables to accomplish that, I'm wondering how you are doing it now. Ignoring the fluid part makes that layout relatively easy.

[AlexCr]

Hi Jeff,

Yes. In fact, such a challenge is what this whole thread is already about. gradez28 wasn't sure if an intensely graphical and intricate design could be made with CSS and still work in all the browsers it would need to work in. I showed it could. I linked right to it for you in my post before this one. I'll link to it again just in case you missed it. You should take a look.

Yes, I actually did read the rest of the thread before I posted :).

But it appears we are "talking past each other". You and gradez28 are talking about his particular page, requirements and challenge. I'm talking about another "challenge": http://news.google.com/. Which is one of the highest traffic sites on the web.

Just to make sure I understand you: You are saying you could duplicate news.google.com without using the heavily nested tables they currently use? The catch is you'd need to get the same look and behavior on all the browsers they consider significant. I don't know exactly which browsers they consider significant, but clearly it's beyond IE7 and FF2. Is that what you are saying?

Alex

[drhowarddrfine]

Well, MSN.com did it. A lot of sites were featured as remade using CSS on a site somewhere. Or was it an article? Don't recall. But MSN only uses one table, I think, and appropriately, while the rest is all CSS.

edit: Yep. One table for stock quotes and that's it.

[Jeff Mott]

You and gradez28 are talking about his particular page, requirements and challenge. I'm talking about another "challenge": http://news.google.com/.It wasn't gradez28's personal page. It was a design he (she?) picked out specifically to be complex and to test the capabilities of CSS. And the requirements for that challenge really weren't any different. The page needed to look and work correctly in all the significant browsers. And I make sure all the other pages I build work in IE 6, IE 7, FF, Netscape, Safari, and Opera. And about half the time, I can even make a design work in the ancient IE 5. And when I can't, I make sure it degrades gracefully.

You seem to be waiting for the day when CSS is supported well enough to use for real-world sites. But that day is already here. It has been for quite a while.


Just to make sure I understand you: You are saying you could duplicate news.google.com without using the heavily nested tables they currently use? The catch is you'd need to get the same look and behavior on all the browsers they consider significant.Yes. And that catch isn't really a catch. It's a very standard requirement that I would assume applies to any website.

[wamboid]

I've been reading this thread regularly, thus far without comment. I'd like to jump in deeper, but my schedule has just been too hectic lately.

I liked watching this challenge. Well done to all. As far as the news.google.com challenge, it's not really much of a challenge. That format looks very basic, not nearly so difficult as the original challenge in this thread.

[AlexCr]

Yes. And that catch isn't really a catch. It's a very standard requirement that I would assume applies to any website.

Ok, so you think you can rewrite news.google.com without using tables ;). To wamboid: apparently you consider it a slam dunk :rolleyes:.

Well I'm sorry folks, I'm sure you collectively know a ton about CSS, including all the tricks and hacks, but IMHO there is absolutely, positively no way you can duplicate the look and behavior of news.google.com without using tables.

Here is my reasoning. The folks at Google are not dumb. news.google.com is not some minor page in their help system, this is one of the highest traffic pages on the web. I'm willing to bet there have been endless meetings at the "Googleplex" by rooms full of Stanford PhDs about every detail of that page's design and implementation. I'm sure they would have loved to do it with CSS layout, but they just couldn't get the look and behavior they wanted without using tables for layout.

MSN.com did it.
MSN.com does NOT duplicate the look and behavior of news.google.com. They make an important simplification, one that Google evidently was not willing to make. MSN.com has a fixed layout, while news.google.com is very liquid. As you resize the browser it adapts nicely to fully use all available space.

Alex

[felgall]

Google is probably one of the few sites to still get a significant enough number of Netscape 4 users to still make it worthwhile catering to them as well as people using more modern browsers and Netscape 4 was the last significant browser to not understand enough CSS to get away from tables.

[drhowarddrfine]

Just because they don't doesn't mean they can't. Perhaps it was a design decision they made but even Google's page only resizes partway.

I visited a site recently, all CSS, no javascript, where the columns would move to the bottom of the page when the browser was resized. Try doing that with tables.

[wamboid]

apparently you consider it a slam dunk :rolleyes:.

Compared to the challenge in this thread, a definite yes. It is basically a header, followed by a three column layout with the left column fixed, followed by a two colum layout, followed by a footer. I'm currently looking at it in ie7. Only thing I'm not real sure about is making the left column go away first when shrinking the width without even a scroll bar allowing me to go there. Probably not an effect they actually want and not one I think I'd really want to duplicate.

Here is my reasoning. The folks at Google are not dumb. news.google.com is not some minor page in their help system, this is one of the highest traffic pages on the web. I'm willing to bet there have been endless meetings at the "Googleplex" by rooms full of Stanford PhDs about every detail of that page's design and implementation. I'm sure they would have loved to do it with CSS layout, but they just couldn't get the look and behavior they wanted without using tables for layout.

My problem with your reasoning is that it has nothing to do with CSS and everything to do with your guess as to their intelligence and what goes on behind closed doors. The same reasoning could be applied to many other situations and be just as faulty:

I'm sure Microsoft has many very intelligent, or at least well educated people who have been at endless meetings about their browser, not to mention their operating system, but haven't managed to get it right yet.
Same could be said for Apple, but all their meetings with smart people didn't prevent them from taking an arguably better product and making it a very distant second to the public.
Have you seen some of those totally stupid things that the intelligent people at google have done lately, like blatantly using another companies work for their search engine in China for example?

The list could go on and on, but it wouldn't really matter since it has nothing to do with the ability to make a layout in CSS. Also, I gather that google has changed some of their pages, but not all. Wouldn't it make sense to start with the simpler pages to get the technique down and then build your way up to the more complicated ones? I really don't expect it to be too long before it changes, but, I would understand if the project takes a back burner, considering that it currently works fine and there wouldn't really be that much profit margin in fixing it.

Sorry about the long rant, my schedule finally caught up with me, forcing me to stay home sick today. I'm bored with being in bed and had to get on the net for a bit.

[Jeff Mott]

I'm gonna have to agree with wamboid here. The reasoning "Google didn't do it, therefore it isn't possible" really isn't very good reasoning.

There are several reasons why Google may have decided against a CSS layout. felgall mentioned one, that possibly Google still wants to cater to Netscape 4. Or, with so many employees, perhaps Google wanted a wider variety of developers to be able to work on the site; developer's who can build CSS layouts are still relatively few.

I considered redoing the Google news page for you, AlexCr, but wamboid is right: The page from the earlier challenge is far more complex than Google news. The whole point of picking a complex layout was to remove doubt for simpler layouts. And the fact is that I won't redo a different page every time someone new comes along who doubts it can be done. A very intricate layout was picked (more intricate than Google news), and I built it. That will have to suffice.

[AlexCr]

Hi Jeff and wamboid,

...with so many employees, perhaps Google wanted a wider variety of developers to be able to work on the site; developer's who can build CSS layouts are still relatively few.

So, on the one hand Jeff, you and wamboid both consider the challenge of doing a table-less news.google.com as so trivially easy that it's not even worth your trying. But on the other hand you are saying that people who can build CSS layouts are so scarce that Google couldn't scrape together one or two to optimize one of the highest traffic pages on the web.

Doesn't that seem contradictory?

I'd love to get an answer from someone at Google who really knows. If anyone knows someone within Google who is qualified and willing to answer this question (even anonymously), I'd love to hear their response. You can email me at "alexcrieg atsign hotmail period com". The question would simply be: "Why are you using tables on news.google.com rather than CSS-layout? Is it the practical consideration that you couldn't get the same behavior (like full width liquidity) and look on the browsers you target? Or some other reason?" I realize those who know may be reluctant to go on the record given how politically incorrect or bone-head the use of tables is widely considered.

Alex

[Jeff Mott]

So, on the one hand Jeff, you and wamboid both consider the challenge of doing a table-less news.google.com as so trivially easy that it's not even worth your trying.That's actually not what I said. I did say it would be relatively easy, but the reason I'm not building it is because I already built a page for the mere sake of a challenge. I'm not going to build page after page every time someone new wants the point reinforced.


But on the other hand you are saying that people who can build CSS layouts are so scarce that Google couldn't scrape together one or two to optimize one of the highest traffic pages on the web.The learning curve when changing from table-based layouts to CSS-based layouts can be steep. For that reason, CSS layout developers are scarce. But once you've perfected the skill, then Google news becomes easy. So no, no contradiction: CSS developers are scarce because of the learning curve, but if you have learned, then Google news is easy.

Also, you are very mistaken if you think that Google will have only one or two developers working on their news page. They likely have dozens.


I'd love to get an answer from someone at Google who really knows.I'm sure Google has "Contact us" links and forms. You should be able to ask that question yourself.


But for now, for your viewing pleasure, other CSS-based layouts:

http://www.stanford.edu/
http://www.walmart.com/
http://www.johnkerry.com/

[gradez28]

woh i didn't realise this thread was still going on. I stopped getting email notifications.

About the google news, I agree it is a fairly simple layout to do with css because it has no graphical content directly relating to the interface.
The only real behavior that cant be duplicated (which isn't something designed into the layout, but rather just a side effect of tables), is that whenever you make the window width small, the left column loses about 20px before "jamming" against the text. Not a big deal and like i said its not something that was intended to happen, just a side effect of tables.

why did google choose tables instead of css? It surely wasn't because they dont have any skilled enough people to do it in css (just the thought of that makes me laugh) especially considering that layout is very simple.

[wamboid]

So, on the one hand Jeff, you and wamboid both consider the challenge of doing a table-less news.google.com as so trivially easy that it's not even worth your trying.
That isn't quite what I said. In my case, I said that my schedule has been so hectic with actual paying jobs and other responsibilities, that I've barely had any spare time. In Jeff's case, he did a very good job on a much more difficult (non-paying) challenge in this thread. I'm impressed with all the hours he put in on that. To continue to take up every challenge each time someone wants the point proven again would just be a bit silly.

But on the other hand you are saying that people who can build CSS layouts are so scarce that Google couldn't scrape together one or two to optimize one of the highest traffic pages on the web.

Doesn't that seem contradictory?
Not really. Like I said, I expect to eventually see it from them, but Google has their hand in several pots right now. Optimizing something that already works wouldn't be as profitable as some of their other ventures. Using tables vs CSS may get them a bit of ridicule from some of the developer community, but the vast majority of the world, you know, their customer base, wouldn't even know what we were talking about.

As far as hearing from Google, I was going to pm you a name of someone I have chatted with before, but his blog is down. Not sure if he even works for Google anymore. Ironically, I'll google his name and see what I can find out. In the meantime, I'm sure they have a contact page of some sort that you could try.

edit: Wow, when I started this post, it would have followed Alex. Nice to see that my response was similar to Jeff's.

[wamboid]

I finally found a site I've been looking for. I keep hearing complaints about full page vertical stretching and horizontal fluidity not being possible with css. Check out this page (http://www.fu2k.org/alex/css/). This doesn't exactly fit the google problem, but I think shows the possibilities fairly well.

[drhowarddrfine]

This thread is getting monotonous. It stems from trying to prove a negative. That CSS is incapable of doing something. If gradez8 understood CSS and semantics better, this discussion would never take place. Rather than trying to prove anything to him, gradez8 should take the opportunity to teach himself how to do this, an "exercise for the reader".

It's almost like asking an astronomer to prove the universe is expanding. He can show you the math but if you don't understand it, what else is there left to do? He's not going to spend the time teaching the math.

[gradez28]

This thread is getting monotonous. It stems from trying to prove a negative. That CSS is incapable of doing something. If gradez8 understood CSS and semantics better, this discussion would never take place. Rather than trying to prove anything to him, gradez8 should take the opportunity to teach himself how to do this, an "exercise for the reader".

It's almost like asking an astronomer to prove the universe is expanding. He can show you the math but if you don't understand it, what else is there left to do? He's not going to spend the time teaching the math.
sorry you misunderstood this thread. I never said css was incapable of doing anything, i simply said its not always the more efficient route and that at times, tables are not the devil like people make them out to be.

I bet you that i have more skill with css than a lot of people at this site. Just because im not anal enough to say its the only way of getting things done, doesn't mean i dont understand it. I use CSS every day, including table-less designs that are more complex than the majority of the "experts" work here.

[drhowarddrfine]

I'll say it again. If you knew CSS that well, you would never question which is better for layout.

[gradez28]

I never asked which is better lol

If you look at my very first post, you will see the whole beginning of this thread was for this:

"So I was just curious to see some of your input and opinions on the subject of css vs tables."

[felgall]

There were a number of people who misunderstood the original question to be asking which is better to which of course the obvious answer is CSS. I think the point that gradez28 was trying to make is that there are some layouts that require a really thorough knowledge of CSS to get them working properly and while it is impossible to get those layouts working properly by using tables you can at least get them reasonably close to working properly using a table a lot more quickly than you can using pure CSS. For those working to a schedule this may be a useful interim solution until such time as they gain a better knowledge of how to use CSS properly. Of course it only applies to about .1% of the layouts that can be done with tables which is less than .001% of all possible layouts (given that most page layouts possible with CSS can't be done with tables even if you wanted to). The example was specifically one where this situation applies and not one of the vast majority of table layouts where conversion to pure CSS is trivial for anyone with a basic understanding of how to use CSS and the difficulties in converting this layout relate specifically to how to get IE6 to display it correctly meaning that once the number of people using that browser falls low enough to be able to disregard it then this exceptional situation will no longer apply.

[wamboid]

I've rather enjoyed reading this thread. It has been one of the best discussions, notice I didn't say arguments, on the subject that I've seen. I personally don't think I would ever resort to using tables for layout ever again, but I can see situations where I don't need to stand on my soap box and look down at some people who do. The challenge in this thread was a good example of needing a very good grasp of css to do the job, although I think the final css solution was better, and even that solution took quite a bit more time to come up with if I remember correctly.

There are a few other situations where I don't mind someone using tables for layout when it isn't practical for them, although, like I said before, I would probably never do it. It's really not worth going into detail about unless someone wants to call me on it.

I do slightly disagree with felgall on one point, that most page layouts possible with CSS can't be done with tables even if you wanted to. I've yet to see one that couldn't be done with tables, although at times it would be horribly inefficient. I am open minded though, so show me one if you have an example in mind.

[gradez28]

I agree completely with wamboids last post.

Most people reading this thread probably automatically assume I'm up on the "table soapbox" arguing with those up on the "pure css soapbox"... but the fact is I'm standing on the humble ground between the two extremes laughing at those who on the aforementioned "soapboxes" lol

From my point of view, this is my balancing scale between the two (notice which one has more pros before you keep on thinking i am a newbie "table-master" that needs to learn css :rolleyes: )

Table-Less Pure CSS; lets call this TLPC
Hybrid use of Tables and CSS: lets call this TC

TLPC Pros

Cleaner looking code
Easier to manipulate/manage static content
*can be* extremely flexible if used correctly (ie: dynamic style sheet swapping, browser based passive degradation )
Keeps "standards-anal" people happy
Once you take care of hacks, it can be widely portable to all sorts of browsers from your desktop to your cell.

TLPC Cons

Can be more costly (financial and time wise) to develop advanced layouts
Steeper learning curve than tables (but still not THAT hard. Anybody who wants to call themself a webmaster should not limit their knowledge just because something takes more learning. This is only a "con" to the lazy people)
Often times requires hacks for cross-browser complience
No simple "height: 100%" for nested objects with parents that have a height less than the browser's total height.


TC Pros

More rapid development
Almost complete browser compliance "right out of the box"
Height: 100% behaves in a much more logical manner

TC Cons

Code looks messier
Not as flexible for dynamic interface manipulation
Often used with poor techniques and buggy code



As for "layouts that cant be done with tables". As wamboid said, i have not seen a single layout that cant be done with tables. And to clarify, I'm talking layouts, but interactive menus or mini-apps. That is javascript working, not the lack of tables.

[drhowarddrfine]

I'm standing on the humble ground between the two extremesThen I am right. There is no middle ground. Either you know or you not know. You not know and that is why this discussion is even taking place. Also, here's my edited version of your pros/cons:

TLPC Pros

* Cleaner looking code
* Easier to manipulate/manage static content
* IS extremely flexible if used correctly (ie: dynamic style sheet swapping, browser based passive degradation )
* Keeps "standards-anal" people happy. What kind of comment is that? Who is dumb enough not to code to standards?
* Once you take care of hacks, it can be widely portable to all sorts of browsers from your desktop to your cell. Hacks are not as dominant as they once were once you know what you are doing.

TLPC Cons

* Can be more costly (financial and time wise) to develop advanced layouts. Not always but definitely cheaper in upkeep and maintenance.
* Steeper learning curve than tables (but still not THAT hard. Anybody who wants to call themself a webmaster should not limit their knowledge just because something takes more learning. This is only a "con" to the lazy people) Not learning CSS is the same as not learning HTML. You MUST learn it. It is not an option.
* Often times requires hacks for cross-browser compliance. Occasionally, not often, and usually only for IE.
* No simple "height: 100%" for nested objects with parents that have a height less than the browser's total height. This is NOT an issue if you know what you are doing.


TC Pros

* More rapid development on rare occasions.
* Almost complete browser compliance "right out of the box"
* Height: 100% behaves in a much more logical manner. Not true at all. Height:100% works in all browsers with CSS if you know how.

TC Cons

* Code looks messier
* Not as flexible for dynamic interface manipulation
* Often used with poor techniques and buggy code. Not true if you know what you are doing but people who use tables for layout don't know what they are doing.

[gradez28]

lol im not even gonna reply to most of your additions except for this

"No simple "height: 100%" for nested objects with parents that have a height less than the browser's total height. This is NOT an issue if you know what you are doing."

Perhaps you know something i don't. Care to share?

Great example of where apparently i dont know what im doing.
http://diffusionstudios.com/

I have spaced out the homepage "content" so that it forces the layout to expand. The left column does not automatically expand to 100%. Without using a poor technique likea background image to create a "faux column", how do you make it automatically expand?

I have already created a solution with javascript on my local development server (which of course doesn't properly work with IE due to its retarded height property evaluating), but I want to learn how to do it with css. If i absolutely had to i would resort to relying on the background image for this particular layout (which i dont want to do -- thats poor standards if you ask me).

Im not asking you to "prove" anything. Im asking you to teach me and other "stupid web developers" whom "dont know what we are doing" since from your posts i get the notion you are a css master that "knows what you are doing".

and i dont consider huge margin hacks a "solution". anybody who cares so much about standards shouldn't rely on something like that. its like using duct tape on a saleen S7.

[felgall]

I do slightly disagree with felgall on one point, that most page layouts possible with CSS can't be done with tables even if you wanted to. I've yet to see one that couldn't be done with tables, although at times it would be horribly inefficient. I am open minded though, so show me one if you have an example in mind.

To do a layout with tables that layout must be mapped to a grid. Any layout where elements may overlap can't be mapped to a grid and still be able to be resized. The reason why the vast majority of layouts are not even considered by web designers is that they were simply impossible before CSS. There is a whole new world out there for web designers once they abandon the grid in their page design.

[gradez28]

have any website examples?

[shorecreature]

and where is this psd? I'm all css, if worked properly I haven't had too many issues regarding compatibility, my biggest gripe being png's and the fact that IE6 will still be a contender in future. And I still use tables to a degree, usually when I need true vertical alignment, that's another major gripe.

...just found that I've skipped a major part of the discussion

[wamboid]

I would mostly agree with the good dr on the pros and cons. On the 100% height issue, check out the link I put up a few posts back. That site is not necessarily the best example since it provides some quick and easy templates, but just the first I found while in a hurry from some old notes.

I would add one more pro for TC, although it isn't an issue for any real developer:

* Can be done by a complete amatuer with little or no knowledge of web development by use of a wyswig program. Of course in this case, tables for layout would probably be the least of their problems.

felgall, maybe I'm not understanding what you are talking about. Give an example. Not that I'm condoning it, but isn't overlapping elements what a tables person would use extremely nested tables for? If not that, then I'm also thinking tables for layout doesn't mean you couldn't use background images with tables on top.

Again, I don't use tables for layout and don't condone the use.

Got more to say but just realized I have around 10 minutes to get to my office across town. Luckily, it's a small town!
edit: Made it, aren't small towns wonderful.

[gizmo]

What many 'tables for layout' people overlook is that there is more than just the visual look of the page to consider. The visually impaired, for example, would have a difficult time interpreting the content with a screen reader, hence the need to keep content separate from mark-up.

[felgall]

have any website examples?

There is a simple example in the Sitepoint book "The Art and Science of CSS". Chapter three examines a simple layout where one object is required to be in the top right corner, another in the bottom right corner and a third down the left side. There the window size is reduced sufficiently these objects have to overlap one another with the appropriate one in front. A tabler solution would break as soon as the window size became small enough that the three elements count not fit into separate cells.

Any layout that REQUIRES the use of the CSS "position" attribute cannot be done using tables, only those that can be done without using position can be done with tables..

[gradez28]

I would mostly agree with the good dr on the pros and cons. On the 100% height issue, check out the link I put up a few posts back. That site is not necessarily the best example since it provides some quick and easy templates, but just the first I found while in a hurry from some old notes.

I looked at the link but didn't see anything of real merit. All of the layouts i clicked on had different sized columns (thus, none of them having auto-height ability).. and the "One True Layout" article uses the margin hack i was talking about earlier (which i really dont like). As i said before, a hack like that is comparible to using duct tape on a high-dollar sports car IMO.

There is a simple example in the Sitepoint book "The Art and Science of CSS". Chapter three examines a simple layout where one object is required to be in the top right corner, another in the bottom right corner and a third down the left side. There the window size is reduced sufficiently these objects have to overlap one another with the appropriate one in front. A tabler solution would break as soon as the window size became small enough that the three elements count not fit into separate cells.

Any layout that REQUIRES the use of the CSS "position" attribute cannot be done using tables, only those that can be done without using position can be done with tables..
I dont see that as ever being used "in the real world". Why on earth would you want one piece of content to overlap the other? thats not thinking about the viewer very much. I think any web user would agree that getting a scroll bar on a small window is better than having stuff overlapping to where it becomes useless.

Of course it only applies to about .1% of the layouts that can be done with tables which is less than .001% of all possible layouts
If 99.9 percent of layouts cant be done with tables using this method your talking about, it should be easy enough to post a couple of links?

[gradez28]

Also, your wrong. What you mentioned, can be done with tables just as they are with divs

Proof: http://diffusionstudios.com/temp/table_test.htm

(i would personally use divs for something like this just because it wouldn't make any sense to have the data nested in a table instead of seperate divs, but this is just a proof of point)

[wamboid]

I don't happen to own that book, so I'll repeat, and I'll try to be more specific this time. Could you give an example, one that is actually on the web complete with a link so I can see it. Just in case I'm coming across wrong here, I'm not saying that you are incorrect and that I don't think you can show it to me. I'm saying that I've never seen it and would like to.

As far as the example you described in the book, I might be looking at it a bit simplistically, but how about a background for the page in the upper right, a table covering the whole page with a background lower right, and a cell of the table lower left overlapping each. As I said before, I don't condone that or think it is in any way the correct way to do it, I just don't think it is impossible.

edited for poor grammer and spelling, and probably missed some.

[wamboid]

Also, your wrong. What you mentioned, can be done with tables just as they are with divs

Proof: http://diffusionstudios.com/temp/table_test.htm

(i would personally use divs for something like this just because it wouldn't make any sense to have the data nested in a table instead of seperate divs, but this is just a proof of point)
You posted while I was typing. I was thinking more of graphics, but that works too, unless I'm just not understanding what felgall is talking about. Again, I'm not saying it should ever be done that way, just that it isn't impossible.

[gradez28]

You posted while I was typing. I was thinking more of graphics, but that works too, unless I'm just not understanding what felgall is talking about. Again, I'm not saying it should ever be done that way, just that it isn't impossible.
my first interpretation of his post was also graphics (thats the only real-world use, really) but then i figured if i did it using the method you mentioned (exact same thoughts i had) then people would automatically jump on and say "well we are talking about content wahhh" so to skip the whining stage i went strait with content blocks. :)

[pathfinder74]

I could recreate any of those layouts using tables, and if i desired to offer more than 1 skin, i would simply whip up a simple php template engine. (not saying that i would always choose tables over layers though, like the site i mentioned above i constructed without a single table)

PHP goes pretty far beyond basic designing and layout though, doesn't it?
That's another whole language you need to learn to be able to do what you're saying, right?

I think CSS Zen Garden is the most incredibl site... the HTML remains absolutely unchanged and the CSS changes everything. I can't imagine doing that same site using PHP could be easier than CSS.

My biggest problem with CSS is I always design in Photoshop, and I end up getting way to rich in graphics to where I end up slicing the whole thing apart and then reassembling it using CSS. The problem I have with doing this, is I could probably just make the entire layout on big background image and then just place the content over top of it using additional CSS div containers.

I could just as easily do a sliced up site just saving optimized and letting Photoshop put together the HTML with the rollovers and everything and cut out the CSS all together. I try not to do this anymore mianly because "it's bad", but in all honesty it seems a lot easier and it preserves the graphics of the page I design in PS. Probably makes it a lot more of a bandwidth hog doing it this way though. But doing it that way also assmebles everything in tables... oh, those evil tables.

I also like to use a lot of lighting effects, to include on the BG so that it makes it inhibitive to be able to use a small BG repeated over the whole page. This usually gets me in the most trouble.

I would also like to use more alpha transparency images in the form of .png's but not enough people use the newest versions of the browsers that support it and if someone looks at it without that the page looks like ass.

I'm sure this isn't the right way... and I'd love to learn how to design more effectively than the way I'm doing it now.