centering a table vertically

[Punk Rich]

I need the table to appear in the middle of the screen in the vertical sense and to move depending on the res of the user. I know how to center things horizontally, but not vertically.

e.g i dont want a big gap beneath the table when the user has a high res monitor. and i dont want the user to have to scroll up and down if they are using a low res monitor.

the website in question is www.sloanstyle.co.uk
and the page is the portfolio page (click 'a whiter shade of pale')
(which scrolls left to right -strange i know, but she was very specific that it should do this!)

please help!

[MuNKyonline]

I dont think it can be done! There is no 100% height attribute for a table. The only thing that could do it is a script that changed the height of the table in pixels depending on what resolution they are running their desktop in. Any other ideas people? I'd be interested in how to do this too!

[Punk Rich]

any examples of the code to do something like that? how do you find out what the resolution of the users desktop is?

[drummin]

You could use JS to open different CSS file based on resolution. Then postion table for each.

<script language="Javascript"><!--
if (screen.width <= 800) {
var pc_css='style1.css';
document.write('<link rel="stylesheet" type="text/css" href="'+ (pc_css) +'">')
}
else if (screen.width <= 1024) {
var pc_css='style2.css';
document.write('<link rel="stylesheet" type="text/css" href="'+ (pc_css) +'">')
}
else {
var pc_css='style1.css';
document.write('<link rel="stylesheet" type="text/css" href="'+ (pc_css) +'">')
}
-->
</script>

I haven't played with this JS for checking height, but I know it works for width and you could make CSS accordingly.

[Syspira]

I dont think it can be done! There is no 100% height attribute for a table.

Yes, there is - I've been using it for years, and it works in the vast majority of browsers.

You just create a table around the table you want to vertically centre, with only one row and one cell in it, set the table height to 100% and the cell to align=center and valign=middle, and put your table in that. Works in most browsers I've ever tested it in.

There's also a potential CSS solution here:
http://www.jakpsatweb.cz/css/css-ver...-solution.html

[DrTandem1]

I dont think it can be done! There is no 100% height attribute for a table.

Yes, there is - I've been using it for years, and it works in the vast majority of browsers.

You just create a table around the table you want to vertically centre, with only one row and one cell in it, set the table height to 100% and the cell to align=center and valign=middle, and put your table in that. Works in most browsers I've ever tested it in.

There's also a potential CSS solution here:
http://www.jakpsatweb.cz/css/css-ver...-solution.html

There is no legitimate attribute for height in the table tag. You can vertically (valign=) set a cell's attribute with "top," "middle" and "bottom." Horizontally (align=), in the cell it is "left," "right" and "center." Using "height" as a table attribute will not validate. Use CSS to achieve the desired effect.

Also, regardless of the viewer's resolution or browser, you have no control over other windows they may have open or the size of monitor they are using. So, even if you center the content on the page, there is no way to guarantee it will be in the center of their monitor.

[Syspira]

I don't really care that much whether it's regarded as "legitimate" - it works in most browsers, and in any that it doesn't work in, it's just invisible, and doesn't hurt anything. According to Index Dot Html (http://www.blooberry.com/indexdot/ht...es/t/table.htm), the height attribute for tables may not be part of the official specification, but it's been supported in practice ever since IE 2, Netscape 1.1 and Opera 2.1. And from personal experience I can add Safari to that list.

CSS doesn't have any "legitimate" way of doing it either - the CSS solution that I linked to is kind of kludgy and awkward and involves trying to do things differently for every browser.

There isn't a perfect solution for this, but between the two approaches you've got one that's easy and works in virtually all browsers, and one that's more complicated but more technically "correct", so I guess there's something for everyone there.

[DrTandem1]

I don't really care that much whether it's regarded as "legitimate" - it works in most browsers, and in any that it doesn't work in, it's just invisible, and doesn't hurt anything. According to Index Dot Html (http://www.blooberry.com/indexdot/ht...es/t/table.htm), the height attribute for tables may not be part of the official specification, but it's been supported in practice ever since IE 2, Netscape 1.1 and Opera 2.1. And from personal experience I can add Safari to that list.

CSS doesn't have any "legitimate" way of doing it either - the CSS solution that I linked to is kind of kludgy and awkward and involves trying to do things differently for every browser.

There isn't a perfect solution for this, but between the two approaches you've got one that's easy and works in virtually all browsers, and one that's more complicated but more technically "correct", so I guess there's something for everyone there.

It only "works," if you don't have any other content on the page and no other windows open. Using such attributes that appear to "work" is how site design starts to degenerate. If you want to use bogus attributes, no one will stop you. Just be aware that you are using tags that are not currently recognized by the WWWC.

Just curious, what's the point of doing it?

[Syspira]

Well, it's not something there'd be any point in if there was any other content on the page. :-) Vertical centering is usually only something people want when they've got just one strong element on a page and want to display it prominently, with the negative space spread evenly around it, instead of having the content wedged up at the top with a sea of empty space underneath it. Examples: a coming soon page that's just a logo, a line or two of text, and maybe an announcement list signup. A photo display page on an art site. An opening splash page for a site.

And I don't think of an attribute that's been supported by all major browsers for years as "bogus" - it's not like I made it up! Whether or not the W3C has ever gotten around to recognizing it (and admittedly, they probably never will at this point since their focus now is separating structure and presentation and using CSS for the latter), it's been a de facto standard for years.

My pragmatism in terms of caring more about whether something actually works than whether it has the official stamp of approval is based on the fact that I do this for a living. The vast majority of my clients have never heard of the W3C, much less worried about whether they've personally approved every last bit of my code. If a paying client wants something done, I'm not about to tell them "Sorry, I could do that for you, but some organization you've never heard of would consider it morally wrong," or lie and tell them it can't be done when they see it all the time on other people's sites. They'd just drop me and go to someone else who would do it.

Being fanatical about web standards is great in theory, but it's not so easy to uphold in the real world when you're trying to earn a living. :-/

[DrTandem1]

Professionals follow professional standards. Just because a home owner doesn't know the NEC standards doesn't mean an electrician should wire their house any which way just because it "works."

No, a person's house will not burn down because one doesn't follow the W3C standards. However, their site may fail to perform due to any number of reasons when not following W3C standards.

Will it fail because a "height" attribute in the table tag is non-standard? Doubtful. Then again, most of the reasons stated for using such a gimmick (splash pages, coming soon pages, etc.) suggests one may not fully grasp the concept of good web design.

When I say "good" I'm not speaking of a moral value nor whether or not the page will perform. I am speaking of the visitors' experience. Next to "Coming Soon" pages, "Splash" pages are one of the most annoying features one could incorporate into a web site.

Again, speaking from a visitor's point of view, not the designer's nor the client's. I, of course, am assuming that the client wants a site that a visitor will not find annoying just as an electrician probably assumes that the home owner does not want the house to burn.