What is the CSS alternative for placing the table in the center.

Discussion in 'CSS' started by kslokesh, Oct 27, 2008.

0
  1. #1
    To place the table in center, we can use <table align="center"> in HTML 4, but in xHTML the 'align' is not allowed.

    So how to place the table in the center by using the CSS?

    Even the Horizontal Rule <hr> needs to be aligned in the center..

    Please help me in this regard. I am currently using xHTML Transitional which allows 'align' attributes.. But I want to try using Strict and this does not allow 'align' atribute.

    Please tell me how to place the table in center in xHTML 1 with Strict DTD..
     
    kslokesh, Oct 27, 2008 IP
  2. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You can use CSS to center things. All things presentational should be put inside your CSS, hence why things like the center tag have deprecated as it can be done inside CSS.

    To center text you use text-align:center;
    To center an element you use margin:0 auto;

    <table style="margin:0 auto;">

    Or reccomended give the table a class

    <table class="styletable">

    Then refer to it inside your external CSS sheet like so:

    .styletable { margin:0 auto; text-align:center; }

    My guess is you are using a table for a layout, which isn't reccomended as much any more as it's often reccomened to use DIV's to create your layout

    Also HR isn't reccomened any more as with padding, margins + backgrounds you can re-create anything the HR did in the first place.
    So you can add this CSS inline to your table like:
     
    wd_2k6, Oct 27, 2008 IP
  3. amazingronit

    amazingronit Well-Known Member

    Messages:
    1,334
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    130
    #3
    cant you just wrap the table in a div and style it as horizontal-align='center'?
     
    amazingronit, Oct 27, 2008 IP
  4. Colbyt

    Colbyt Notable Member

    Messages:
    3,224
    Likes Received:
    185
    Best Answers:
    0
    Trophy Points:
    210
    #4
    I'm sure it isn't correct standards but I just use <center>
     
    Colbyt, Oct 27, 2008 IP
  5. ceetoe

    ceetoe Peon

    Messages:
    29
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    As amaginegonit mentioned, wrap it in a div but maybe style the div text-align:center;
     
    ceetoe, Oct 27, 2008 IP
  6. scutari

    scutari Peon

    Messages:
    431
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #6
    You can use margin:0 auto; if you8 have a fixed width..
     
    scutari, Oct 27, 2008 IP
    kslokesh likes this.
  7. justinlorder

    justinlorder Peon

    Messages:
    4,160
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    0
    #7
    For DIV, you can write like this .

    <div id="content"> your text </div>

    #content {margin: 0 auto}
     
    justinlorder, Oct 27, 2008 IP
    kslokesh likes this.
  8. kslokesh

    kslokesh Well-Known Member

    Messages:
    153
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    105
    #8
    So 'margin:0 auto;' is the best thing to center the items using CSS..

    I had tried using horizontal-align or the text-align in a div as said by amazingronit and ceetoe long before. But it did not align a table into center position.. It will align the text inside a table into centered position.. Thats why I asked this doubt here..

    Using <center> tags and align="center" attributes is not recommended in xHTML.

    Thanks a Lot guys.. Have a great time..
     
    kslokesh, Oct 31, 2008 IP