HTML - Center a Table Vertically

Is it possible to centre a table vertically in HTML code?

If not, is there another way to setter my page vertically?
LVL 1
scotMcalpineAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

humeniukCommented:
Start with this & let me know if it's what you're looking for:

<html>
<head>
<title>Page Title</title>
</head>

<body>
<table width="100%" height="100%" align="center">
  <tr>
    <td><div align="center">
        <table width="200">
          <tr>
            <td>Content centered vertically and horizontally.</td>
          </tr>
        </table>
      </div></td>
  </tr>
</table>
</body>
</html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
armeenCommented:
or maybe <table style="top: 50%; position: absolute"><TR><TD>Hello</TD></TR></table>  - but it will break the flow layout and you might have trouble placing other elements, it might be easier with humeniuk - it depends on what you are doing.
0
humeniukCommented:
Yep, there are a few variations, armeen.  Personally, I'd prefer CSS, but scotMcalpine asked about tables :)
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

GrandSchtroumpfCommented:
The question is about centering a table, not the content of a table.
If you use a table-based layout (not recommended), you can use a table to center your table.

If you use a table-free layout, it's better to avoid vertical centering...  Most good table-free liquid layouts should not need any vertical centering in the first place.

There are css solutions for vertical centering, but none of them are good IMHO.  The only solution I find acceptable is the use of the "display: table" css attribute, which is not supported by IE and can be considered as a hack (purists consider any change of the "display" attribute as a hack).  Some (including me) will say that if you want an element to behave like a table, you should use a table in your html... but we need to stay pragmatic ;°).

Here is an article about a css technique:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Note that the technique discribed uses "display:table" for borwsers that support it and use complicated, hard to maintain css junk to get an equivalent in IE...  Why not simply using a table then???  IMHO, there is no point in using a table-free layout just for the heck of it.  The article is still an interesting exercise.
0
Ted BouskillSenior Software DeveloperCommented:
Here is a technique that works for all the browsers I've tried without using "display:table"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
      <title>Vertical + Horizontal Centered Table</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

      <style type="text/css">
      <!--
      BODY
      {
            background-color: White;
            margin: 0px;
            padding: 0px;
      }
      DIV.outer
      {
            position:absolute;
            left:50%;
            top:50%;
            width:100px;
            height:100px;
            margin-left:-50px;
            margin-top:-50px;
      }
      DIV.inner
      {
            position:absolute;
            left:50%;
            top:50%;
            width:100px;
            height:100px;
            margin-left:-50px;
            margin-top:-50px;
      }
      -->
      </style>
</head>

<body>
<div class="outer">
      <div class="inner">
            <table width="100" height="100" style="border-collapse: collapse;">
            <tr>
            <td width="50px" style="border-right: solid Red; border-bottom: solid Red;">&nbsp;</td>
            <td width="50px" style="border-left: solid Red; border-bottom: solid Red;">&nbsp;</td>
            </tr>
            <tr>
            <td width="50px" style="border-right: solid Red; border-top: solid Red;">&nbsp;</td>
            <td width="50px" style="border-left: solid Red; border-top: solid Red;">&nbsp;</td>
            </tr>
            </table>
      </div>
</div>
</body>

</html>
0
RanjeetRainCommented:
I use a little trick to do this and successfully. I create a dummy table with its height set to 100% and then in a TD set its VAlign to center and just stuff my main table inside it. Works for me.


<table WIDTH="100%" HEIGHT="100%" BGCOLOR="#ffffcc" STYLE="POSITION: absolute; left: 0; top: 0; Z-INDEX: -1">
<tr>
<td align=middle valign=center>
<!-- Your main table goes here -->
</td>
</tr>
</table>


0
RanjeetRainCommented:
As found on http://ranjeetrain.s5.com/



<html><head><title></title></head><body>
<table WIDTH="100%" HEIGHT="100%">
<tr>
<td align=middle valign=center>
<b><font face="Arial,Helvetica" size=+2>Hello folks,</font></b>
<br>&nbsp;
<b><font face="Arial,Helvetica" size=4>This site is
yet not ready for everyone because I am still working on it. But I promise,
the day I open it for you, you will have more than one reasons to come
here. Do come back again and check. There may be some surprises for

you.</font></font></b>
</td>
</tr>
</table>
</body>
</html>
0
punkstarCommented:
on my site i have used it for a login area...

http://www.interviewmyass.co.uk/home/admin

and I think it looks pretty dam nice.

if you just put all of the table that you want to be centered into another table and in its own cell, then tell is to center its contents to the middle and to the center then it should all work.

<table width="100%" height="100%">
</tr>
<td align="center" valign="center">
  <table>
  <tr>
  <td>
    There we be...
  </td>
  </tr>
</td>
</tr>
</table>

I think that is what you are looking for.
0
armeenCommented:
i wouldnt give the points to me cos my answer was rubbish :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.