How to vertically align a table

  • Thread starter michael_maberly
  • Start date
M

michael_maberly

I'm completely new to Frontpage, but have gone through a few of MS' opening
tutorials on creating a website in general, and on creating and managing
layout tables. So far, I haven't found any way to VERTICALLY align a table
on the page -- though it's clear that one can easily create a horizontal
alignment (left/center/right). One of the tutorials seems to hint that page
margins might be involved -- but I'd hate to think that the only mechanism by
which one could vertically align a layout table would be via page margins!

Any tips/comments would be very welcome! Thanks, in advance, for your help.
 
R

Ronx

Layout tables are supposed to fill the entire page between the margins -
so the best way to adjust the position of the table on the page is to
adjust the margins.
The easiest ways to position a table vertically are:
1) Adjust top margin - no point in setting the bottom margin because
some browsers ignore table height, which is invalid HTML anyway.
2) Nest the table inside another table cell and set the vertical
alignment of that cell to middle.

It is difficult to align a table vertically because
1) table height does not exist in HTML (even if FP sets it), and
2) Page height is not well defined - and can vary between browsers and
users as they adjust font-sizes, and browser portal size.
 
M

michael_maberly

Thanks for your detailed answer, Ron -- I appreciate it! I took your
suggestion, and nested "the table inside another table cell and set the
vertical alignment of that cell to 'middle' " -- and it worked! You also
taught me some important concepts:

1) That a layout table is normally supposed to fill the entire page (between
the margins -- but why bother with margins, in that case?)
2) That page height can vary, depending on the end-user's browser, font-size
choices and browser portal sizes.

From the second point, I would conclude that there is no way to truly
vertically centre a table (or a table cell) by adjusting the page's top
margin size: if one doesn't know the end user's page height, one can't know
what size of top margin would align the table to the center of that page.

The basic web page design I'm after would have one main cell (okay, let's
call it a 'table') -- taking up perhaps two thirds of the entire page's
horizontal space and one half of its vertical space -- centrally aligned on
the page. I could then further divide this main cell horiztonally across its
top, for page title, etc., and across its bottom, for hypertext buttons. It
seems to me that the only way to go is via the 'nested tables' technique --
would you agree?

Thanks, again, for this invaluable help! I wonder why none of this was
mentioned in the tutorials on Tables? (Maybe it is, but I just haven't gotten
that far yet!)

All the best,
Michael
 
R

Ronx

1) Every HTML element has margins. These may be set to zero, or may
have some value, but the margins exist. Layout tables go into the
<body> element. If you don't adjust the margins yourself, the browser
applies (approx) 12px to 20px (depending on browser) margins to top,
left, bottom and right, thus giving a border around the contents.
A common question is: "How do I eliminate the gap around my page
contents?"


2) As you said, setting the page's top margin is not very accurate,
unless you know the browser window size before hand.
To use a nested table you need to use CSS (unless you work in Quirks
mode, which has its own problems with different browsers.)

<style type="text/css">
html, body {height:100%;margin:0;padding:0;}
div {height:100%;border:1px solid red;}
#container {height:100%;width:100%;margin:0;padding:0;}
#container td {padding:0;vertical-align:middle;text-align:center;}
</style>

Then the HTML

<body>
<table id="container">
<tr>
<td>Page contents go here</td>
</tr>
</table>
</body>

See http://apptools.com/examples/tableheight.php for a discussion and
details.


The method is not usually mentioned in tutorials because the concepts
involved are "advanced".
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp
 
M

michael_maberly

Thank-you for this detailed reply, Ron -- it was very kind of you! I'm going
to go read the "/tableheight.php" URL in a moment, but before I do (and get
so involved in it that I forget this line of thought), I'd like to ask:

You write that:
To use a nested table you need to use CSS (unless you work in Quirks
mode, which has its own problems with different browsers.)
Click to expand...

Yet when I followed your original advice on how to nest one table within
another (not using CSS -- which I haven't yet studied), I seem to get a good
result. However, is this the 'Quirks mode', you mention? If not, are
there nevertheless still some limitations/potential problems with doing it
this non-CSS way of which I should be aware?

Thanks, again, for your valuable help.

All the best,
Michael
 
M

michael_maberly

P.S. I just looked at the "Tableheight" page you recommended, and think I
may be getting the idea why using CSS is necessary. Looks like I'd best try
to find some FP tutorial on using CSS! If you have any suggestions on an
appropriate tutorial, please fire away!

Thanks again, Ron.

- Michael
 
M

michael_maberly

P.P.S.:
Ron, if I don't need my vertically aligned table to have a height of
"100%" -- ie, if I simply want to create a table that is, eg, 500 pixels wide
by 350 pixels high, and CENTERED IN THE WEB PAGE (ie, the table's center is
the center of the web page, regardless of browser, etc) -- are these
instructions on using CSS to get a table height of 100% necessary for me?

- Thanks!
 
R

Ronx

Does your page have a complete and valid <!doctype...> as the first line
of code? If not, you are running in Quirks mode.

In Quirks mode, different browsers will render the same code in
different ways, whereas in standards mode (with a complete <!doctype..>)
all browsers will render the page the same way (at least, that's the
theory - all modern browsers adhere to the rule within a pixel or
three). In IE, Quirks mode rendering is often significantly different
than Standards mode - for example, tables may sometimes seem to be wider
in IE than in other browsers.

Some browsers may take the table height literally. 100% will be the
height of the browser portal, and a table set to that height will not be
allowed to grow any larger even if the content requires it. The
overflow may be hidden from sight or overlap any HTML elements below it.

In Standards mode, the height attribute for a table will either be
ignored, or the browser may push the page into quirks mode instead.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp
 
M

michael_maberly

Thank-you, very much, for all your great feedback, Ron.

Regarding this particular post: I'm beginning to wonder whether my problem
isn't semantic ; -) :

Yes, I want the table centred horizontally on the webpage.
I also want it centred vertically, so that its centre is equidistant
between the top and bottom of the web page. This table will only be, say,
350 pixels high, but I want its top to be as far below the top of the page as
its bottom will be from the bottom of the page.
As you suggested in an earlier post, the best way to do this is with
'nested tables' -- so that this 350-high, centrally-aligned table is nested
within a 'first table' that fills the entire web page.

From everything you've shared, and from what I've been able to understand
from the various resources I've been reading, my hunch is that there may be
three aspects to my situation that DO require the CSS solution you proposed:

1. It involves 'nested tables', which you've said requires this CSS
solution;
2. I want the first table to fill the entire web page, and filling
the web page height (on most browsers) may require the CSS solution;
3. Finding the vertical centre of the web page -- even if the centred
table is only 350 pixels high -- axiomatically requires finding the real
height of the web page, which seems to require the CSS solution.
Am I on the right track? Sorry if my explanation of what I'm after has
been unclear!

By the way, thanks for turning me on to the "using CSS to solve web page
height problem" page -- it got me thinking about CSS, which led me to the FP
tutorial on basic CSS, which led me to believe that CSS may be less complex
and intimidating than I'd thought! Thanks, also, for the URL to more
resoucres on CSS.

All the best,
Michael
 
M

michael_maberly

Ron, I just learned about "doctype" at Eric Meyer's
http://www.ericmeyeroncss.com/bonus/render-mode.html. It seems to be a very
important topic for anyone trying to ensure his/her web page displays
similarly on different browsers! I then discovered MS' page "Working with
HTML DOCTYPE declarations in FFrontPage
(http://msdn2.microsoft.com/en-us/library/aa218654(office.11).aspx), which
actually states:

"As with most modern Web development tools, FrontPage may use design-time
proprietary code and attributes for HTML tags that does not validate
according to the standards of the W3C. If you use any design-time tools in
FrontPage, your pages may not validate when submitted to a validator.

If you want to use DOCTYPE declarations in your FrontPage Web pages, you
should either avoid using FrontPage design-time tools that insert custom
markup or use the Optimize HTML feature (Tools menu) in FrontPage to remove
most or all FrontPage design-time markup. This allows you to run the pages
through a validator without receiving errors on FrontPage markup code.

For this reason, FrontPage does not include DOCTYPE declarations in new
pages by default. You can add DOCTYPE declarations to your Web pages in three
ways: You can paste the DOCTYPE declaration in Code view; you can insert a
code snippet; or you can modify the default template that FrontPage uses to
create new pages."

I'm not at all sure what kinds of "design-time proprietary code and
attributes for HTML tags" are automatically used in FP, nor which I could do
without -- I'm completely new to this wqrld of HTML! This makes me wonder:
should a neophyte like me, who would nevertheless like his webpage to display
similarly on different browsers, even use a program like FrontPage 2003?

As you can see, I've almost no perspective upon which I might be able to
make a judgement on this issue. Any wisdom on this would be very gratefully
welcomed!

Thanks!
- Michael
 
M

michael_maberly

More on Eric Meyer's article:

Wow -- I just read Meyer’s reference (in
http://www.ericmeyeroncss.com/bonus/render-mode.html) to what happens to CSS
tables when the doctype is changed from quirks to standards mode! (Under
quirks, padding, etc, is added to the content area of a table; under
standards, padding, etc, is taken away from the content area of a table,
resulting in different-sized content displays!) This is, indeed, serious
business!

Although I’m a complete beginner to web page design, I’m already confronted
with what looks like a serious dilemma: if I want my design to display
properly in IE6 and other new, standards-compliant browsers, I will have to
(manually or otherwise) change the way FP 2003 writes code. On the other
hand, if I do this, my design will NOT display the same way in pre-IE6 (and
in other older browsers, that work in quirks mode). On top of that, I will
have to find out how to convert my FP 2003’s default behaviour so as to match
a doctype that will be acceptable to a standards-compliant browser.
Questions:
1) Am I correct in my conclusions?
2) Best way -- short of buying Meyer's book (I am a beginner, after all) --
of learning what FP 2003 code to change, and how to change it, to make it
standards-complaint?
3) Is there no downloadable FP 2003 update that would make FP 2003
standards-compliant automatically??

Here are some more specifics Meyer mentioned in his article:

Eric Meyer’s article points out that the new standards require that
dimension values (eg, width) be specific in terms of units used (eg, “pxâ€),
and that while IE 5 didn’t require this, newer browser versions do. So, I
checked the code being written in my FP 2003, and see that dimension values
don’t seem to include unit specifics (eg, <table cellpadding="0"
cellspacing="0" border="0" width="400" height="300" id="table2">.
Should I therefore manually add the “px†to every bit of dimension in the
code for the entire web page, both retroactively and as I build more of the
page?


Meyer also states that while “class†and “id†used to be case insensitive,
they now must be case sensitive in order to be uniformly affected by style
directives. An older book on HTML I’ve been reading says that only that
which lies between the > and < (I can’t remember the term for this – eg, the
actual text one might add) must be case sensitive; do you know what the
situation is in FP 2003 – does it write class and id code as case sensitive?

I'm sinking deeper into the deep end, but at least (I think) I'm seeing more
clearly ; - )

Thanks, in advance, for anything you care to share!
- Michael
 
R

Ronx

Answers inline, below
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



More on Eric Meyer's article:

Wow -- I just read Meyer's reference (in
http://www.ericmeyeroncss.com/bonus/render-mode.html) to what happens to CSS
tables when the doctype is changed from quirks to standards mode! (Under
quirks, padding, etc, is added to the content area of a table; under
standards, padding, etc, is taken away from the content area of a table,
resulting in different-sized content displays!) This is, indeed, serious
business!

Although I'm a complete beginner to web page design, I'm already confronted
with what looks like a serious dilemma: if I want my design to display
properly in IE6 and other new, standards-compliant browsers, I will have to
(manually or otherwise) change the way FP 2003 writes code. On the other
hand, if I do this, my design will NOT display the same way in pre-IE6 (and
in other older browsers, that work in quirks mode). On top of that, I will
have to find out how to convert my FP 2003's default behaviour so as to match
a doctype that will be acceptable to a standards-compliant browser.
Questions:
1) Am I correct in my conclusions?
Click to expand...

Yes - but don't worry about it, too much.
I do not aim at pixel perfect layouts - they are very difficult to
achieve in ALL browsers, but easy to get very close to.
As far as ealy browsers are concerned (IE5.5 and earlier, Nettscape 4,
etc.) ignore them. There are not many of them about, and rendering in
IE5 is very similar to display in IE6 and IE7, Quirks mode or not.
2) Best way -- short of buying Meyer's book (I am a beginner, after all) --
of learning what FP 2003 code to change, and how to change it, to make it
standards-complaint?
Click to expand...

Do not use FrontPage webbots such as Navigation, Hit counter, Layout
tables.
Do not resize tables or cells by dragging the borders - this always adds
3) Is there no downloadable FP 2003 update that would make FP 2003
standards-compliant automatically??
Click to expand...

No. You could try the Expression Web trial. EW is similar to
FrontPage, and designed to produce standards compliant web pages. But
there is a little learning curve when moving to EW from FrontPage. EW
will nag you about non-compliance, but will not cure it for you, nor
stop you adding non-compliant code.

Here are some more specifics Meyer mentioned in his article:

Eric Meyer's article points out that the new standards require that
dimension values (eg, width) be specific in terms of units used (eg, "px"),
and that while IE 5 didn't require this, newer browser versions do. So, I
checked the code being written in my FP 2003, and see that dimension values
don't seem to include unit specifics (eg, <table cellpadding="0"
cellspacing="0" border="0" width="400" height="300" id="table2">.
Click to expand...

The dimensions in attributes (such as width="560") are always assumed to
be pixels. These should not have px added. However, dimensions in CSS
rules MUST have the dimension units.
Example td {width:200px;}

Should I therefore manually add the "px" to every bit of dimension in the
code for the entire web page, both retroactively and as I build more of the
page?
Click to expand...

No. See above
Meyer also states that while "class" and "id" used to be case insensitive,
they now must be case sensitive in order to be uniformly affected by style
directives. An older book on HTML I've been reading says that only that
which lies between the > and < (I can't remember the term for this - eg, the
actual text one might add) must be case sensitive; do you know what the
situation is in FP 2003 - does it write class and id code as case sensitive?
Click to expand...

Depends on the <!doctype. Best to assume case sensitive, but do not use
class="Test" and class="test". With a <!doctype for xhtml, it is case
sensitive. Remember - some browsers (such as Internet Explorer) do not
follow the rules exactly, but others do.
 
M

michael_maberly

Many more thanks, Ron!
Yes - but don't worry about it, too much. . . As far as ealy browsers are concerned (IE5.5 and >earlier, Nettscape 4, etc.) ignore them.
Click to expand...

Okay. That narrows the issues down to:

1) Which Doctype is most appropriate to produce a standards-compliant page
in FP 2003?
2) Best way to learn how to use FP 2003 / write code so that the result is
standards-compliant?
i. > Do not use FrontPage webbots such as Navigation, Hit counter,
Layout tables.
Do not resize tables or cells by dragging the borders - this always adds
the height attribute to the <table> tag, which is invalid.
Click to expand...
Anything else to avoid?
ii. Is FP's Optimize HTML an efficient approach to achieving
standards-compliance?
3) >. . . Expression Web trial. . . EW will nag you about non-compliance,
but will not cure it for you, >nor stop you adding non-compliant code.
Having it at least tell me where I'm in error would be a start.
Will it tell me how to correct my code so that it can become compliant?


I really appreciate this valuable feedback, Ron! I posted a similar
question (as you know) under a different thread, in case others out there are
asking themselves (and others) the same questions.
 
R

Ronx

Answers inline

--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/
http://www.rxs-enterprises.org/fp



Many more thanks, Ron!


Okay. That narrows the issues down to:

1) Which Doctype is most appropriate to produce a standards-compliant page
in FP 2003?
Click to expand...

HTML4 transitional is the best for FP2003.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

This gives a lot of leeway with deprecated tags, use of upper and lower
case within tags, whilst being a valid and complete <!doctype>

Note that the code snippet in FP2003 leaves off the URL part. This
makes the <!doctype incomplete, and pushes the browser into quirks mode,
though validators will work as normal.

2) Best way to learn how to use FP 2003 / write code so that the result is
standards-compliant?
i. > Do not use FrontPage webbots such as Navigation, Hit counter,
Layout tables.
Anything else to avoid?
Click to expand...



Use CSS to style text rather than <font> tags. And avoid VML graphics
(anything from the FrontPage drawing toolbar).


ii. Is FP's Optimize HTML an efficient approach to achieving
standards-compliance?
Click to expand...


Optimise HTML will do nothing useful as far as compliance is concerned,
too much optimisation may break your pages. In my opinion, the only
safe optimisation is removal of leading whitespace.

3) >. . . Expression Web trial. . . EW will nag you about non-compliance,
but will not cure it for you, >nor stop you adding non-compliant code.
Having it at least tell me where I'm in error would be a start.
Will it tell me how to correct my code so that it can become compliant?
Click to expand...


Depends on the error. Some errors give the solution "There are better
ways to do this" but your left asking "What better ways?" . (The usual
solution is CSS...)
 
M

michael_maberly

Perfect!

Please forgive my endless questions, but you are a 'lifeline' for me here --
I've no other way of learning how to use FP in a standards-compliant way.

Speaking of which, I've run into my first problem: how to create something
like a link bar, without using FP's link bar webbot. I've noticed that a
friend's website uses text .gif's for each 'button'; further, it seems that
there are related .gif's that are varied -- eg, with a bordered box around
the same text -- that are activated whenever a mouse hovers over a button.
From the code, my guess is that my friend's web designer has used something
like javascript to tell the browser to 'swap' the .gif's depending on whether
a mouse is on, off, or has clicked a button. I, too, would like to use my
own text .gif's for buttons (because I'm using a font that viewers' computers
may not have), and would like to be able to have these .gifs similarly
transform according to mouse position. I have no problem using FP's
Insert-Hyperlink to ordinary text, or to an image, but have no idea how to go
the further step, and have that image 'swap' with related images, according
to mouse position.

As always, any tips you'd care to share would be gratefully welcomed!

Thanks, Ron!

- Michael



I think I know how to add a hyperlink to
 
M

michael_maberly

Ron, in relation to my last post (re. how to create a link bar without FP's
webbot), I THINK I may have figured it out (eight hours later!!!). Here's
the script:

<a href="[URL for hyperlink]"><img src=[gif I want to use for hyperlink
button] onmouseover=this.src="[gif I want to appear when mouse is hovering
over the button]" onmouseout=this.src="[first gif, above]">

It works when I try it in FP -- both in Preview and my Browser. (After
spending five hours trying to figure out my friend's website code, and trying
to teach myself javascript from scratch, I finally found a javascript forum
comment that showed that the friend's code was probably from DreamWeaver,
with impenetrable javascript. I eventually found the above solution on a
young guy's blog!) Is this similar to what you would suggest (the code, I
mean, not the wasted hours!)?

- Michael
 
R

Ronx

A couple of years ago I would have said "Yes, that is the code".
Now I would use CSS to get the same effect with very little code, a
total of 2 images, and no Javascript.

<style type="text/css">
#nav {margin: 5px auto;width:560px;}
#nav br {clear: both; font-size: 0; line-height: 0;}
#nav ul {list-style:none;margin:0;padding:0;}
#nav ul li {width: 100px; float:left; vertical-align:middle;}
#nav a { height:30px; display: block; padding: 5px 10px;
vertical-align:middle; text-decoration: none; font-family: trebuchet,
Arial, helvetica, sans-serif; font-weight: bold; font-size: 85%; color:
blue; background: url('images/navbtnl.gif') no-repeat;}
#nav a:hover {color:green; background: url('images/navbtnh.gif')
no-repeat;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#nav" id="home">Home</a></li>
<li><a href="#nav" id="page1">Page 1</a></li>
<li><a href="#nav" id="page2">Page 2</a></li>
<li><a href="#nav" id="page3">Page 3</a></li>
</ul>
<br />
</div>
Rest of page


The above is adapted from
http://www.rxs-enterprises.org/tests/themed-css-navigation.htm
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Problem with printing a word document containing a table 0
How to change margins around bullets in list 1
Format column widths from one table to a separate table on same page 1
Move Chart with Text 0
Insert Index into a Table 1
Word doc won't center at 100% 5
How to vertically align autoshape text? 1
How to center adjust text above and image in a two column document. 1

Top