SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    uk
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    XHTML Table Centered

    I am using the XHTML standard to code a webpage (not the HTML standard) and I am trying to get a table centered, but it refuses to work properly in Mozilla, IE and Opera

    style="text-align: center;"

    I tried this, but it doesn't work in Opera or Mozilla

    style=\"text-align: middle;\"

    works in IE and Mozilla but not Opera

    <center> works, but its not an XHTML tag (its a HTML tag :-S ) and I am trying to code completely in XHTML

    Does anyone know how to get it work, any help apprieated?

  2. #2
    Also available in Large Si's Avatar
    Join Date
    Sep 2002
    Location
    Walsall, UK
    Posts
    1,911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've cheated with this before...

    Wrap another DIV around the table and set the CSS properties of that DIV to your text-align: center attribute.

    Hopefully that will work...
    Si
    Are you a Photoshop Jedi Master? Prove it!

    Is funky house your bag? You'll love this!

    Voice
    , eyes, ears, body and hands.


  3. #3
    SitePoint Addict will_'s Avatar
    Join Date
    Apr 2004
    Location
    Asheville, NC
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can also set the table margins in your style sheet as so:

    table {

    width: 500px;
    margin-left: auto;
    margin-right: auto;

    }

    That will avoid extra DIV's and still be semantic. And it will validate as XHTML.

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    uk
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bigsi
    I've cheated with this before...

    Wrap another DIV around the table and set the CSS properties of that DIV to your text-align: center attribute.

    Hopefully that will work...
    exactly what I did, but it didn't work ;-( So I tried wrapping it in another table, and still no joy ;-(

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    uk
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Will, that worked perfectly :-D)))))

  6. #6
    Also available in Large Si's Avatar
    Join Date
    Sep 2002
    Location
    Walsall, UK
    Posts
    1,911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What code did you use digital oracle? Mine isn't playing fair!
    Si
    Are you a Photoshop Jedi Master? Prove it!

    Is funky house your bag? You'll love this!

    Voice
    , eyes, ears, body and hands.


  7. #7
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    uk
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bigsi
    What code did you use digital oracle? Mine isn't playing fair!
    <table style="width: 500px; margin-left: auto; margin-right: auto;">
    <tr>
    <td>Item</td>
    <td>News Description</td>
    <td>Publish Date</td>
    <td>Item Author</td>
    <td>Modify Item</td>
    </tr>
    </table>

    Part of a CMS I am programming

  8. #8
    Also available in Large Si's Avatar
    Join Date
    Sep 2002
    Location
    Walsall, UK
    Posts
    1,911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice one - cheers!

    (I've been having a few nightmares trying to centre tables and DIV's lately - that seems to do the trick here and there!)
    Si
    Are you a Photoshop Jedi Master? Prove it!

    Is funky house your bag? You'll love this!

    Voice
    , eyes, ears, body and hands.


  9. #9
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    uk
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hope they not been keeping you up to late, bigsi Like ones I get about PHP Coding lol

  10. #10
    Also available in Large Si's Avatar
    Join Date
    Sep 2002
    Location
    Walsall, UK
    Posts
    1,911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh trust me, these nightmares are nothing compared to some of the Oracle SQL/PL scripts I've attempted to get working...

    Now they're head-scratchers!!

    Si
    Are you a Photoshop Jedi Master? Prove it!

    Is funky house your bag? You'll love this!

    Voice
    , eyes, ears, body and hands.


  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    To centre an element (tables included) you just set the left and right margins to auto on an element that has a specifie width. However ie5, ie5.5. and ie6 in quirks mode don't understand that.

    For those browsers you need to set text-align:center in a parent element (such as another div) or in most cases you can use the body.

    Therefore both methods need to be used to satisfy all these browsers.
    Code:
    body {text-align:center}
    table {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    border:1px solid #000;
    text-align:left;
    }
    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •