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-vertical-center-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-vertical-center-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/html/tagpages/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/html/tagpages/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.

[Syspira]

You seem to be thoroughly convinced that your personal tastes define good web design for everyone, and people who think that way are rarely likely to change their minds under any circumstances, so there's probably little point in my even bothering to reply to this. But on the off chance anyone else is still reading this thread, I might as well.

Different sites have different needs. Different site visitors have different tastes. Different clients are going to ask you for different things. There isn't a one-size fits all solution. Some sites need to have an immediate visual impact; others need to immediately present information. What should be on the first page of a site depends on what people are going there for, and that is not going to be the same for every site. I suspect that what I find annoying is not necessarily what you find annoying, or what any other random person we might pick to survey does.

Coming soon pages - intelligently designed ones, that is - are essential if you want to capture any of the traffic that may come to your client's site before it's finished. You don't always get to tell the client that they have to hold off on launching their business until you're finished with their web site. Again: different clients, different needs, different situations. The designer is not always in charge: at the end of the day, making your client happy is the most important thing.

If there is a chance of people attempting to visit the site before it's finished, then at a bare minimum you need to have something there that tells people what the site will be, when they can they can expect it to be up, how they can get in touch with the client in the meantime if they need to, and preferably how they can be informed when it's ready, and of any other news regarding the site. That would generally be a small signup form for an announcement list. That way, the site can start to work for the client even before it's officially launched, and when it is ready, they already have a list of interested people to announce it to, and to send periodic site announcements to thereafter. You might consider that a "gimmick"; I consider it fundamental to effectively marketing a site.

But I doubt we're likely to ever see eye-to-eye on any of this, so we might as well drop it. You do what you need to do to please your clients, and I'll do what I need to do to please mine.

[MuNKyonline]

Wow! Really didn't think that would all stem from a question about a centering something vertically! Even though you've dropped the argument, I have to agree with Dr Tandem. As I said before, you do not have a height attribute of a % value for the height of a table. Even if it does work!

If it doesn't comply with the standards then it is bad web design - not Dr Tandem's personal taste! Syspira you seem to have taken this all rather personally!

Drummin nice one! I think his javascript could be the best solution!

[Punk Rich]

thanks Syspira, i used your method, and it seems to work fine.
I dont understand why anyone would have a problem with it?

[speed]

I dont understand why anyone would have a problem with it?
When you are working to WAI, to achieve priority 2 guideline 3.2 states:

Create documents that validate to published formal grammars.
See http://www.w3.org/TR/WAI-WEBCONTENT/#tech-identify-grammar

As there is no height attribute as DrTandem1 said, the page will not validate and therefore will fail this guideline stopping you ever archiving priority 2.

Standards are created for a reason and I firmly believe we should follow those standards as it gives us the best chance of everything working now and in the future.

[Punk Rich]

so there is a risk of it not working in the future?

[speed]

In theory if it's not in the spec then there is no reason for a browser vendor to support the attribute.

In practice there are sites using height all over the place so any browser vendor that didn't support it probably wouldn't last long.

When I build a site for a client I only ever use validated code, as I:

I want to archive Priority 2 or better of WAI if at all possible, being in the UK we have to reach Priority 1 for commercial sites and Priority 2 for Government, as I've already stated 3.2 states it must be valid.
I believe that there is less risk to the client if I build validated sites, as if I use invalid code I have no idea how some new browser yet to be released will handle it, maybe I'd need to rebuild the entire site who knows.

Yes I can hear the comments on the last point, and I agree there is no guarantee that a 100% valid site will work on this new yet to be release browser, sites can work differently between today's browsers, but I feel I've got a better chance with valid code.

I have a background in the aviation industry, I had it drummed into me that standards are important and should be followed, without standards and compliance something will break it's just a matter of time.

I've not tried it but if you can archive the same using the CSS height property rather than having the height on the table then there should be no problem depending on your doctype.

[imported_richard_t]

I've been using 100% height tag for many years now and its always worked, if it ever stops working you can simply use CSS to poistion a layer in the center of the page which adjusts dynamically according to resolution and just pop a table inside.. simple!

[Punk Rich]

so basicly it works, its probly always going to work, there are no known problems with it apart from it doesnt fit to some guidelines...

can anyone give me a actual problem that may occur now or in the next few years with this?

is the only reason not to use it blind obidence/faith in the guidelines?

why do the guidelines say not to use it? what reason do they give? i had a look at the link and it didnt really give me a reason why?

[DrTandem1]

so basicly it works, its probly always going to work, there are no known problems with it apart from it doesnt fit to some guidelines...

can anyone give me a actual problem that may occur now or in the next few years with this?

is the only reason not to use it blind obidence/faith in the guidelines?

why do the guidelines say not to use it? what reason do they give? i had a look at the link and it didnt really give me a reason why?

There is really no reason to use such an attribute. As I mentioned before, there are far too many variables to guarantee that the content will be in the center of the monitor as was the implied intent of the original question. There is no control over how a visitor has their browser set to view a page nor what other windows they may have open nor what position those windows on the viewer's screen may be.

As stated, why not use valid CSS to accomplish this? The page will then validate. It has nothing to do with "blind obidence[sic]/faith." One can design a page any way one wishes. If one wants to be a rebel without a clue, that is their choice. As with language, how one presents oneself and one's work will greatly influence the impression one makes on their prospective clients as well as their peers.

[speed]

Nicely put DrTandem1.

[Punk Rich]

...and if one wishes to ask questions as to why one might choose to do a choosen task in one way or another then one must be prepaired to be put down by his 'betters' and not given a plain explantion understandable to someone who is maybe not as classicly trained in webdesign, nor familar with the guidelines.

[speed]

Try http://www.w3.org/QA/2002/07/WebAgency-Requirements and http://www.w3schools.com/site/site_standards.asp I think they might get the point over better.

It all really comes back to accessibility/usability/compatibility. The use of standards is not limited to web design they are everywhere.

[Punk Rich]

i'm not particularly against standards. I just wanted to know: why is this a standard?
the explainations i've been given i either dont understand or dont seem to be good enough reasons. I am not sure why having another window open will affect my page.
I will look at the links provided speed, thanks.
maybe i'll be able to make a more informed decision from those.

[slideri812]

Hi,

JMTC:

Like Dr and Speed stated Standards are not some arbitrary rules set forth by a clueless bunch. Standards are hashed over and agreed to so that UNIVERSAL functionality is real.

Our firm uses standards for many reasons. Two of the most important are:

1) Cross Platform Compatibility (bet you haven't checked you site with a MAC using FireFox, your welcome text is dead left and not displayed in the intended area (use CSS margin or padding to correct this)).

2) I can't stress this one enough FORWARD COMPATIBILITY. Unless you are a super insider we have no idea what the next great browser will be capable of. However, I am absolutely positive that our Standards Compliant sites will look the same then as they do now. Mean while millions of man hours will be blown correcting a wide variety of hacks and work around that have gone unchecked (don't get me started on IE being compliant either).

What does this mean? It means while others are working their asses off to catch up and get their sites "updated" so they work correctly, we'll still be plowing new ground with new clients as our sites won't require any rework.

So for s&g try viewing all of your sites in FireFox, you might be surprised at what you find doesn't work outside of IE.

[Punk Rich]

yeah, the website is still being built and some pages i havent done anything with yet.(home and about, etc).

Can anyone tell me what the actual reason is that they chose not to include this as a standard? surely if its use is so widespread it will force all future web uses to work with it.

So future compatibility is probably going to happen otherwise people will not choose to use that particular browser, if a significant amount of websites come up looking strange.
Is it possibly something to do with backward compatibility? maybe this code wont work on old browsers?

I ran a web validation....
...acording to this validation thing my website is rife with errors...

[slideri812]

Compliance is not a maybe issue.

There are many methods that were accepted practices in the early days. But as the tech advanced so did the specs. As you may or may not know one of the next huge revolutions is in handheld browsing. An issue with this is band width and how to make your site look that same on a cell phone or PDA as it looks in a browser. The answer: standards.

If the country had not agreed on standards for nuts and bolts in the 1800 then industrial revolution would not have been possible. This is no different.

Also note that standards is not a continually growing block of work. It is trimmed, pruned and often older methods and standards are supplanted (or is it fall of) by newer, better and more ubiquitous solutions.

Any one care to expand on this?

[speed]

Can anyone tell me what the actual reason is that they chose not to include this as a standard?
I can't tell you why it isn't included, but if you consider a table is really meant to hold tabular data and not define the page layout then you have to ask yourself why would you want a height.

For example you would want a table holding accounting data to expand to fit the data. I can't think of any reason for needing a table height when a table is used in this way.

If you read through the WAI Guidelines they make comment about using mark-up correctly and that tables should not be used for layout. See http://www.w3.org/TR/WCAG10/ Guide line 3 I won't say more as I don't want to start yet another argument about it.

surely if its use is so widespread it will force all future web uses to work with it.

So future compatibility is probably going to happen otherwise people will not choose to use that particular browser, if a significant amount of websites come up looking strange.

You are probably right for the foreseable future it will be supported, but one day it may not and those sites will have to be updated, maybe IE7 will be the one that causes problems with it, I don't know do you?

I ran a web validation....
...acording to this validation thing my website is rife with errors...
You've only got a few and none of them look particularly nasty, I've seen sites with over 1,000 errors on the home page.

[Syspira]

To the original poster - you're probably gathering by now that there are some serious philosophical differences on all this. :-)

Part of the background of it is that a lot of the innovation in what's possible in web design didn't come from the World Wide Web Consortium - it came from the browser companies, who, particularly once competition began to heat up when IE first came on the scene, were always in a race with each other to introduce new tags and new features. The WWWC ended up basically playing catch-up to the browser makers who were the ones that introduced most of the new features to HTML.

The clash in approaches to what the web was all about was evident pretty early on - originally it was something mainly intended for academics and scientists, and was all about presenting information - not a creative medium. In that context, tables were intended for presenting tabular data. No one had ever thought, initially, that they'd ever be used for anything else. But as the web began to spread outside its original intended audience and designers got hold of it and began treating it as a new creative medium, whether for the purposes of art, marketing, or personal expression, practically every aspect of HTML began being used in new and different ways. A lot of this was basically a manifestation of the hacker mindset: "What else can this be made to do?" And tables became the most powerful layout tool in a designer's toolbox.

This somewhat anarchistic approach to web design, with browser makers constantly introducing new tags and designers constantly finding innovative uses for the tags that already existed, far beyond what they were officially intended to do, didn't entirely sit well with the W3C. So at a certain point, in an attempt to impose order on the chaos, they came up with CSS as a way of separating document structure, which is what HTML was originally supposed to be about, from presentation, a.k.a. design.

Now, CSS is a really powerful tool, and has a lot of amazing design potential, but at this point, not all browsers support all CSS elements consistently, so in practice, many designers use a mix of the old and new approaches, keeping in mind the end goal of creating a site that works as well as possible for as many people as possible - or, more specifically, for as many as possible of the specific type of people you expect to be visiting that particular site. Different sites have different audiences who want different things.

Anyway, that should give youa bit of background to all this. If you read between the lines in this whole debate, you'll see that a lot of what's really being argued over here is philosophy and politics, more so than actual methods of vertically centering page elements. Some people are firm adherents of respecting the W3C's authority in all things; others are more tolerant of creative rule-breaking or respecting the fact that innovation can come from many different directions and that when you're talking about a creative medium, the "official" way of doing things isn't always the only way. Over time, you'll figure out where you fit into all this and what approach suites you best.

And with that, I'm about to take off for the long weekend (well, it's a long weekend in Canada, anyway - not sure about elsewhere) and have a lot of work to get done before I can go, so this'll probably be my last post on the topic.

[slideri812]

Well done. And I agree. It is the bending, breaking and pushing the limits of the rules that has always lead to new inovations.

Thanx

[speed]

Innovation is good and if that requires rules be bent and broken so be it, basically I don't have a problem with that.

If you choose to build your own site in a non-standard way breaking all the rules so be it as you probably understand the implications, and if something changes in the future that is only one site you need to fix.

When it comes to building a site for a client I believe that you should be building to the current standards, you can still push the limits within those standards and produce some stunning results. Stability is often better than having the latest greatest gizmo.

In either case you need to know what the standards are and what the likely effect of ignoring them is, if you're building a client site then the client must also understand any implications of ignoring the standards i.e. is the site still accessible, if you get hit by a bus will someone else be able to carry on supporting the site.