I would like to have a table centered on the screen and at the same time to have its dimensions independent of the screen settings of the user (so the table should look more or less the same with 800x600 and 1024x768). I thougth it should be done with a HTML like this:<br />
<br />
<html> <br />
<head> <br />
</head> <br />
<body> <br />
<table border="2" width="100%" height="100%"> <br />
<tr> <br />
<td align="center" valign="middle"> <br />
<table border="2" bordercolor="red" width="75%" height="75%"> <br />
<tr> <br />
<td></td> <br />
</tr> <br />
</table> <br />
</td> <br />
</tr> <br />
</table> <br />
</body> <br />
</html> <br />
<br />
But the vertical alignment fails. What do I do wrong?<br />
Kippie<!--content-->its defenitley the height="75%" attribute of the embedded table that is causing the problem. The browser does not seem to be able to valign="middle" using a percentage value for the height of the embedded table. Remove the height="75%" or change to a fixed pixel value instead: height="200".<br />
<br />
Kevin<!--content-->This is bad news. But thanks anyhow.<br />
Kippie<!--content-->Take out the width="75%" height="75%" parts. The table will automatically grow just big enough to surround whatever picture or text you have inside it. If your testing that exact code you typed, throw in some content, a picture or words, in the middle. If you want a certain minimum thickness around said content, fiddle with the border="#" property.<br />
<br />
As I poorly understand it, %ages inside %ages mean different things to IE and NS. To avoid the this buffudling, just let the browser autosize it. Yeah, it's a bit slower than hardcoded pixel widhts an' heights, but not really different from coded percentages.<br />
<br />
When I pulled this Table In Table "trick" a while ago, some of my pages still do, for example at <!-- w --><a class="postlink" href="http://www.geocities.com/postitlord/maps">www.geocities.com/postitlord/maps</a><!-- w -->, I found some DIV code helped... It was auto inserted when I long ago used FrontPage, so it's a tag i'm not too familiar with, but i 绺痟ink?it helps center stuff in older browsers.<br />
PS, if you go to my geocities site, the advertisment might change the height of the page, so you'll have to ignore that.<br />
<br />
<table border="0" height="100%" width="100%"><br />
<tr><br />
<td><br />
<div align="center"><br />
<center><br />
<table border="0" cellpadding="5" no height code><br />
<tr><br />
<td> main content </td><br />
</tr><br />
</table><br />
</center><br />
</div><br />
</td><br />
</tr><br />
</table>I italisized the <center> tags because I heard of mixed interpretation by IE and NS. I think one of them will continue to center all stuff INSIDE the table too, and one doesn't.<!--content-->Comparing our two codes, I notice I don't have align="center" valign="middle" in the first <TD here >. I guess the defaults took care of that for me, I'll have to hard code it
<!--content-->Ok postilord,<br />
thanks, but finally I want to set the percentage of the screen to be used by a centered table. So for example width=75% and height=75%. I have played around with your code but I can't fix it.<br />
Kippie<!--content-->
<br />
<html> <br />
<head> <br />
</head> <br />
<body> <br />
<table border="2" width="100%" height="100%"> <br />
<tr> <br />
<td align="center" valign="middle"> <br />
<table border="2" bordercolor="red" width="75%" height="75%"> <br />
<tr> <br />
<td></td> <br />
</tr> <br />
</table> <br />
</td> <br />
</tr> <br />
</table> <br />
</body> <br />
</html> <br />
<br />
But the vertical alignment fails. What do I do wrong?<br />
Kippie<!--content-->its defenitley the height="75%" attribute of the embedded table that is causing the problem. The browser does not seem to be able to valign="middle" using a percentage value for the height of the embedded table. Remove the height="75%" or change to a fixed pixel value instead: height="200".<br />
<br />
Kevin<!--content-->This is bad news. But thanks anyhow.<br />
Kippie<!--content-->Take out the width="75%" height="75%" parts. The table will automatically grow just big enough to surround whatever picture or text you have inside it. If your testing that exact code you typed, throw in some content, a picture or words, in the middle. If you want a certain minimum thickness around said content, fiddle with the border="#" property.<br />
<br />
As I poorly understand it, %ages inside %ages mean different things to IE and NS. To avoid the this buffudling, just let the browser autosize it. Yeah, it's a bit slower than hardcoded pixel widhts an' heights, but not really different from coded percentages.<br />
<br />
When I pulled this Table In Table "trick" a while ago, some of my pages still do, for example at <!-- w --><a class="postlink" href="http://www.geocities.com/postitlord/maps">www.geocities.com/postitlord/maps</a><!-- w -->, I found some DIV code helped... It was auto inserted when I long ago used FrontPage, so it's a tag i'm not too familiar with, but i 绺痟ink?it helps center stuff in older browsers.<br />
PS, if you go to my geocities site, the advertisment might change the height of the page, so you'll have to ignore that.<br />
<br />
<table border="0" height="100%" width="100%"><br />
<tr><br />
<td><br />
<div align="center"><br />
<center><br />
<table border="0" cellpadding="5" no height code><br />
<tr><br />
<td> main content </td><br />
</tr><br />
</table><br />
</center><br />
</div><br />
</td><br />
</tr><br />
</table>I italisized the <center> tags because I heard of mixed interpretation by IE and NS. I think one of them will continue to center all stuff INSIDE the table too, and one doesn't.<!--content-->Comparing our two codes, I notice I don't have align="center" valign="middle" in the first <TD here >. I guess the defaults took care of that for me, I'll have to hard code it
<!--content-->Ok postilord,<br />thanks, but finally I want to set the percentage of the screen to be used by a centered table. So for example width=75% and height=75%. I have played around with your code but I can't fix it.<br />
Kippie<!--content-->