?
Solved

HTML - Center a Table Vertically

Posted on 2005-03-22
12
Medium Priority
?
10,716 Views
Last Modified: 2011-08-18
Is it possible to centre a table vertically in HTML code?

If not, is there another way to setter my page vertically?
0
Comment
Question by:scotMcalpine
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
  • 2
  • +3
12 Comments
 
LVL 33

Accepted Solution

by:
humeniuk earned 100 total points
ID: 13607676
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
 
LVL 4

Assisted Solution

by:armeen
armeen earned 96 total points
ID: 13608312
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
 
LVL 33

Expert Comment

by:humeniuk
ID: 13608339
Yep, there are a few variations, armeen.  Personally, I'd prefer CSS, but scotMcalpine asked about tables :)
0
Linux Academy Android App Now Supports Chromecast

We have some fantastic news for our Android fans. We’re so excited to announce that the Linux Academy Android app is now available with Chromecast support. That’s right – simply download the latest update of the Linux Academy App and start casting your favorite course videos!

 
LVL 30

Assisted Solution

by:GrandSchtroumpf
GrandSchtroumpf earned 96 total points
ID: 13611136
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
 
LVL 51

Assisted Solution

by:Ted Bouskill
Ted Bouskill earned 96 total points
ID: 13619138
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
 
LVL 19

Assisted Solution

by:RanjeetRain
RanjeetRain earned 96 total points
ID: 13621233
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
 
LVL 19

Expert Comment

by:RanjeetRain
ID: 13621251
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
 
LVL 4

Assisted Solution

by:punkstar
punkstar earned 96 total points
ID: 13660471
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
 
LVL 4

Expert Comment

by:armeen
ID: 13913668
i wouldnt give the points to me cos my answer was rubbish :)
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question