Re:Table height

[William.18]

Hi everybody, I was inspired by the design of this particular website: http://www.zumtobel.com/com/en/default.htm.
so i am practically redesigning my site on the same pattern, i used tables and gave the width as 100%. Now if I give the height of one of my tables as 100% will it change (occupy the entire browser screen) according to the resolution and screen size.

[Rappa]

First of all, you shouldn't use tables for a layout. You should use div's and css to position them, second, what exactly is your question?

[VIPStephan]

I can only second Rappa’s comment on not using tables. That’s not what tables are made for. And a good website is not just about a nice design. In that way you can say the website that inspired you is one of the worst sites I’ve seen lately. Look at the source code. They aren’t even using tables for the general page layout, they are writing a frameset with JavaScript and each document in the frameset is made of tables. That’s about the worst thing you can do and this site should really be banned from the internet. At least they provided some alternative content but still, it’s coded according to a 12 year old method, not at all user friendly, and far from accessible.

Now, even if you were using semantic HTML (http://www.boagworld.com/archives/2005/11/semantic_code_what_why_how.html) and would completely style it with CSS what you want is kind of an advanced layout and you should know what you do before going after such things. Adapting height according to screen resolution is one of those challenging things if you wanna get it to work in all major browsers (especially in IE) – which you should.

I’d propose you start simpler. And if you really want an advanced layout but don’t have to time or patience to properly learn HTML and CSS (http://htmldog.com) (and how to produce websites with current methods) then you should hire someone to do it right in the first place. In the end it will pay off when it comes to maintenance and changes/additions.

I would actually rather get some inspiration from http://csszengarden.com or http://bestwebgallery.com/

[abduraooft]

Get inspired by Why tables for layout is stupid:
(http://www.hotdesign.com/seybold/)

[rmedek]

Now if I give the height of one of my tables as 100% will it change (occupy the entire browser screen) according to the resolution and screen size.

Yes.

Get inspired by Why tables for layout is stupid:
(http://www.hotdesign.com/seybold/)

That article says it's okay to use the occasional table for layout.

[VIPStephan]

You’re kinda bringing out the wrong facts here, Richard. The article generally says that tables for layout is bad and should not be used. I suppose you were referring to the page about transitional layouts (http://www.hotdesign.com/seybold/14transitional.html)? That’s one page of many and it just states an alternative for people still browsing with version 4 browsers.

However, really few people are still using those and if done correctly you can as well write semantic markup and, through some kind of switch, disable the application of a stylesheet for these old browsers which will result in a plain unformatted HTML page but still shows the entire relevant content/information so people get what the site is about. Graceful degradation (http://en.wikipedia.org/wiki/Fault-tolerant_design) is the important thing, not making it display the same in whatever old browser people might use.

[rmedek]

You’re kinda bringing out the wrong facts here, Richard. The article generally says that tables for layout is bad and should not be used. I suppose you were referring to the page about transitional layouts (http://www.hotdesign.com/seybold/14transitional.html)? That’s one page of many and it just states an alternative for people still browsing with version 4 browsers.

However, really few people are still using those and if done correctly you can as well write semantic markup and, through some kind of switch, disable the application of a stylesheet for these old browsers which will result in a plain unformatted HTML page but still shows the entire relevant content/information so people get what the site is about. Graceful degradation (http://en.wikipedia.org/wiki/Fault-tolerant_design) is the important thing, not making it display the same in whatever old browser people might use.

I brought up the point because I am personally tired of hearing the same old point brought up over and over about how tables are evil, without hearing the arguments of why you would want to use one.

Yes, I know tables are bad for layout, you know tables are bad for layout, we all know tables are bad for layout, semantic HTML is where it's at…BUT in the real world there are times when a table is necessary and can be totally used without any (or with only slight) ill effects.

A 100% height page is difficult to pull off successfully in a cross-browser situation. Nesting a page full of semantic HTML into one table set at 100% height will not only work quickly but won't suffer any of the harmful effects of using nested table-only layout. Accessible/screen-reader friendly? Check. Easily updated? Check. SEO? Assuming the rest of the site is semantic and filled with juicy content, check.

Questions about tables getting shot down immediately because oooooh tables are sooo bad we all read about it and are html geniuses are just as bad as coding a table-only layout, in my opinion.

I'm not going to start a fruitless semantic argument over the benefits of table versus semanic layout—anyone who knows me knows I am the biggest proponent of semantic HTML and thinks table layout is for sissies—but I also will not pretend that these above situations don't irk the hell out of me—where one guy, obviously somewhat new to web design, asks a question and three people jump in to not give him the answer and guide him with better advice but to tell him flat out he is totally wrong, his inspiration is totally wrong, and "tables for layout is stupid."

[VIPStephan]

Yeah, I suspected this would end up in a heated discussion. :)

OK, I agree with you that this might make things easier at times. The problem I have is that exactly those people that are new to web development might get off on the wrong foot regarding the attitude and approach to website development. That example website the OP showed might be nicely designed but should never be used as inspiration regarding the coding behind the design.

Making the important point clear to newbies before they start doing it wrong right from the start might not be the most inviting way but why should we invite people to go the wrong way? Tell them how to do it right from the start and then if they know the rules they can bend them.

I personally can’t sleep well if I know I have (mis-)used a table. If I have the choice anyway I’d rather go for a different design approach (i.e. a layout where the height doesn’t matter).

Now, don’t let us slip into a flame war. We have made our points and now let’s go and have a beer. :D

[William.18]

Gee :-) Guys I am sorry i didn't know that this would end up in such a heated discussion. The site which I referred to was a lighting solutions company, I was appealed by the way they had presented their products in use, but as Stephan pointed out maybe I didn't pay much attention to the source code.

But Stephan is right in saying that "Making the important point clear to newbies before they start doing it wrong right from the start might not be the most inviting way but why should we invite people to go the wrong way? Tell them how to do it right from the start and then if they know the rules they can bend them."

I thank Richard and Stephan for their valuable inputs, I'll definitely consider them and hope for your guidance throughout.