Vertically center a table

Forum Moderators: open

Message Too Old, No Replies

Vertically center a table

Possible?

malochio

11:43 pm on Nov 29, 2005 (gmt 0)

My table is 500px high and I'd like to know how to vertically center it on any screen. Is there a way to do this?
Thanks in advance,
Mal

iamlost

3:25 am on Nov 30, 2005 (gmt 0)

Use a negative margin that is half the table height then relatively position the table 50% from the top of the viewport:

table {position: relative; height: 500px; top: 50%; margin-top: -250px;}

gstewart

10:44 am on Nov 30, 2005 (gmt 0)

The html is courtesy of Frontpage I'm afraid, but the following does the business

<body>

<table border="0" width="100%" id="table1" cellpadding="0" style="border-collapse: collapse" height="100%">
<tr>
<td>
<div align="center">
<table border="0" width="100%" id="table2" cellpadding="0" style="border-collapse: collapse" height="500">
<tr>
<td>
<p align="center">table contents</td>
</tr>
</table>
</div>
</td>
</tr>
</table>

</body>

iamlost

7:40 pm on Nov 30, 2005 (gmt 0)

The HTML align attribute is deprecated. It can be used but should not if following good standards practice.

[w3.org ]

align = left�center�right [CI]
Deprecated. This attribute specifies the position of the table with respect to the document. Permitted values:
* left: The table is to the left of the document.
* center: The table is to the center of the document.
* right: The table is to the right of the document.

[w3.org ]

Deprecated
A deprecated element or attribute is one that has been outdated by newer constructs. Deprecated elements are defined in the reference manual in appropriate locations, but are clearly marked as deprecated. Deprecated elements may become obsolete in future versions of HTML.
User agents should continue to support deprecated elements for reasons of backward compatibility.
Definitions of elements and attributes clearly indicate which are deprecated.
This specification includes examples that illustrate how to avoid using deprecated elements. In most cases these depend on user agent support for style sheets. In general, authors should use style sheets to achieve stylistic and formatting effects rather than HTML presentational attributes. HTML presentational attributes have been deprecated when style sheet alternatives exist (see, for example, [CSS1]).