/    Sign up×
Community /Pin to ProfileBookmark

Centering HTML table within a CSS table.

Copy linkTweet thisAlerts:
Feb 19.2004

How would i go about vertically centering an css table without distoring the html table inside.

[URL=http://bellsouthpwp.net/l/a/lamppost/withcssvcenter.htm]example of problem[/URL]
Unfortunatly when I made this page I forgot to take in account diffrent resolutions. So unless you are using 1280*1024 don’t bother with the link above.

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@pukkaFeb 19.2004 — Your positioning is totally screwed up in mozilla. May i suggest going with all-CSS?
Copy linkTweet thisAlerts:
@swatpup32authorFeb 19.2004 — I would, but the table for the images is created by adobe imageready and they can get quite complex.
Copy linkTweet thisAlerts:
@ray326Feb 19.2004 — [i]Originally posted by swatpup32 [/i]

[B]I would, but the table for the images is created by adobe imageready and they can get quite complex. [/B][/QUOTE] Also quite useless. That's just one image; it should BE just one image and it should probably just be the page background.
Copy linkTweet thisAlerts:
@swatpup32authorFeb 19.2004 — Quite true for this page, but other pages contain many more slices with animations, rollovers and such, which would make it hard to get the same results just by using html. This page was just created as a sample.

Anyways how much editing would be required to turn the html table into a css table.
Copy linkTweet thisAlerts:
@ray326Feb 19.2004 — It's not worth the time. Rote translation of tables to css do nothing for the semantic content of the site or the bandwith required to deliver it. Just leave it tables; css is not a "secret ingredient" that provides benefit just by its presence.
Copy linkTweet thisAlerts:
@swatpup32authorFeb 19.2004 — Well if i kept in html the only way I could vertically center it would be to somehow enter the screen.height information from javascript into the <Table Height=> html property.
Copy linkTweet thisAlerts:
@pukkaFeb 19.2004 — uh, ever heard of valign?

<table>

<tr>

<td valign="center">blah</td>

</tr>

</table>
Copy linkTweet thisAlerts:
@toicontienFeb 19.2004 — I've come up with a CSS-only solution that works OK in most browsers.

It fully works in:

  • - Mozilla/ Netscape 7

  • - Firebird

  • - Firefox

  • - Opera 6.04


    • Works pretty good in:

  • - Opera 7.2 - It doesn't seem to support the min-height attribute for the html and body tags

  • - IE6, 5, 5.5/PC


    • Works OK in IE 4/PC

    Doesn't work in...

    guess which browser...

    Netscape 4.x

    The TXT file is below.

    [upl-file uuid=e73fe171-70dd-4a5f-93a2-0b475739fb27 size=2kB]withcssvcenter.txt[/upl-file]
    ×

    Success!

    Help @swatpup32 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.6,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...