Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

HTML - Center a Table Vertically

Posted on 2005-03-22
12
Medium Priority
?
10,731 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
  • 2
  • 2
  • 2
  • +3
9 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

Ready to get certified? Check out some courses that help you prepare for third-party exams.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

580 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