/    Sign up×
Community /Pin to ProfileBookmark

How do I center a table on a page?

If I decrease the size of a table (ie width=70%), how do I center it on the page?

Thanks, BJB ?

to post a comment
HTML

14 Comments(s)

Copy linkTweet thisAlerts:
@winawanusAug 20.2005 — Use a div tag like below.

<div align="center"><img src="/image.gif" width="100" height="100"></div>

? Wina
Copy linkTweet thisAlerts:
@BJBauthorAug 20.2005 — Thanks Wina, you are great! I used it and it worked. I can't say I understand it, but it worked. I am definitely a rookie!

Thanks again!, BJB ? ? ?
Copy linkTweet thisAlerts:
@NogDogAug 20.2005 — <table style="margin: 0 auto; width: 70%;">
Copy linkTweet thisAlerts:
@poiuyAug 20.2005 — Darn it and all this time I adjusted the monitor settings!!! :mad:

<div align="center"> tells it to align the image in the center

Frontpage (and yes, to the bashers, I said Frontpage) says

<div align="center">

<center>

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="70%">

<tr>

<td width="100%">&nbsp;</td>

</tr>

</table>

</center>

</div>
Copy linkTweet thisAlerts:
@poiuyAug 20.2005 — Oh yeah. One draw back. Depending on what you're doing 70% will apply to the users screen resolution settings and will look different on an 800 x 600 vs 1024 x 768. If you want to keep it looking the same on different screen don't use % use pixels.

<div align="center">

<center>

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="400">

<tr>

<td width="100%">&nbsp;</td>

</tr>

</table>

</center>

</div>

Of course the CSS people will have a whole other issue with using tables
Copy linkTweet thisAlerts:
@NogDogAug 20.2005 — Oh yeah. One draw back. Depending on what you're doing 70% will apply to the users screen resolution settings and will look different on an 800 x 600 vs 1024 x 768. If you want to keep it looking the same on different screen don't use % use pixels.

<div align="center">

<center>

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="400">

<tr>

<td width="100%">&nbsp;</td>

</tr>

</table>

</center>

</div>

Of course the CSS people will have a whole other issue with using tables[/QUOTE]


Not only the use of tables for visual presentation, but the use of deprecated tags and attributes. If using a HTML 4.01 Strict doctype, here are the errors that bit of code will produce:
[list=1]
  • [*]Error Line 14 column 11: there is no attribute "ALIGN".

    <div align="center">

    You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

    This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

    How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.



  • [*] Error Line 15 column 7: element "CENTER" undefined.

    <center>

    You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:
    [list]
  • [*] incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),

  • [*] by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).

  • [*] by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case.

  • [/list]



  • [*] Error Line 18 column 10: there is no attribute "WIDTH".

    <td width="100%">&nbsp;</td>

  • [/list]
    [/quote]

    Thus I was trying to point the original poster in the more up-to-date direction of using CSS for visual presentation instead of outdated techniques.
    Copy linkTweet thisAlerts:
    @poiuyAug 20.2005 — Thus I was trying to point the original poster in the more up-to-date direction of using CSS for visual presentation instead of outdated techniques.[/QUOTE]

    Oh I know where you were coming from. Question though at the end of the day if I made that table and you did it your way does it look any different to the website visitor.

    Keep in mind I use WYSIWYG editors all the time. I don't buy into the textpad debates and I don't really judge my websites success based on if they are HTML 4.01 Strict doctype compliant but rather how many visitors I can turn into customers.

    Sorry if I'm getting of topic! I think I caused another thread to close because we go way off topic. Sorry can't turn down a good debate.
    Copy linkTweet thisAlerts:
    @NogDogAug 21.2005 — As long as you don't care how text-to-speach readers handle your page and don't plan on keeping the pages around long enough that they'll become truly obsolete and don't care how non-graphical browsers handle your web page, then by all means do whatever works most easily for you. And I don't mean that as a put-down: there are many sites where the above issues are not a serious problem. But if you ever get called on to create a site which [i]is[/i] standards compliant and as accessible as possible to all users and all media, it's good to take some time now to learn how to do it. I mean, if an old dog like me can learn CSS, all you young folks should have no problem. ?

    Hopefully some day someone will come up with a WYSIWYG web authoring tool that is truly WYSIWYG [i]and[/i] able to create a page that is table-less (except for tabular data) and validates as [X]HTML Strict.
    Copy linkTweet thisAlerts:
    @MsLisa2005Aug 21.2005 — I have just started learning html, I am taking classes on webdesign. I need to find out how to make my navigational menu, not have any spaces underneith the form button. Thanks. Here's my website, I've been working on it for a while, I'm just on html, I haven't done any java or anyother coding. I am using a free server for now, till my sight gets up and running, then I'll upgrade to a domain. It's not a professional sight yet, just a personal one. I appreciated any help, thanks.

    http://www.angelfire.com/alt2/para_chronicles/para2.html
    Copy linkTweet thisAlerts:
    @poiuyAug 21.2005 — I mean, if an old dog like me can learn CSS, all you young folks should have no problem. ?

    Hopefully some day someone will come up with a WYSIWYG web authoring tool that is truly WYSIWYG [i]and[/i] able to create a page that is table-less (except for tabular data) and validates as [X]HTML Strict.[/QUOTE]


    Hey man I agree and you may have convinced me to move forward. My problem is a huge site to do it to.

    That would have been my next question is -- Is their a WYSIWYG editor to do CSS.

    I thought you were NogDog -- what do you mean by old dog. I'm curious. 20+ 30+ 40+ 50+ more? On this site I feel I'm way up there but curious to see what you think "old dog" is.

    Of course by the time someone comes up with that WYSIWYG editor it will be out dated
    Copy linkTweet thisAlerts:
    @poiuyAug 21.2005 — OK if your profile birthday is right then I understand.

    I'm not far from there but I am still in the 30+ range.

    I was curious because it seems like 25+ is "to old" for this site
    Copy linkTweet thisAlerts:
    @poiuyAug 21.2005 — I need to find out how to make my navigational menu, not have any spaces underneith the form button.[/QUOTE]

    Use <br>

    Never used Angel fire though. Of course why use form buttons vs. pics with hyperlinks???
    Copy linkTweet thisAlerts:
    @eminem1409Aug 22.2005 — or if u are usin html code just put <center>your html code here</center> it is eisier
    Copy linkTweet thisAlerts:
    @rhsundergroundAug 22.2005 — it may be easier but the <center> tag is being phased in preference of css.
    ×

    Success!

    Help @BJB 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.24,
    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: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

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