Centered table?

Discussion in 'HTML & Website Design' started by mini_m, May 16, 2006.

  1. #1
    Hello,
    I am currently working on a website and am not sure how to make it look in a certain way. For example, I would like it all to be centered in the middle, like this website: http://www.runescape-billions.com/

    Would it be possible to make my current website: www.botg.co.nr look like that?
    What code/strings would I need to add to my existing code? :eek:
     
    mini_m, May 16, 2006 IP
  2. jrd1mra

    jrd1mra Peon

    Messages:
    243
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You would pretty much ahve to redesign the site. If you knew what to do it wouldn't be too difficult, but for me to give you a code snippet and say go wont work.
    there are many ways to achieve thios design.
    I did it here:
    http://www.poincianaatpalmbeach.com. Simply by setting the main table width to 750 and wrapping a center tag around the entire <body> and positioning everything else with css.
     
    jrd1mra, May 16, 2006 IP
  3. mini_m

    mini_m Active Member

    Messages:
    237
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    80
    #3
    Well, I wouldn't mind re-designing the site as I've built that in a few hours. The only problem is that my CSS knowledge is poor so I wouldn't be able to use it I'm afraid. I'll try wrapping the table around the <body> and see what I can make from that =\.

    EDIT: I found another way. I tried adding this snippet:
    <body leftmargin="300" rightmargin="300">
    Code (markup):
    That made it work, but I'm not sure I will be able to fill in the outer margin which is now white?
     
    mini_m, May 16, 2006 IP
  4. stymiee

    stymiee Peon

    Messages:
    427
    Likes Received:
    22
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Bah! Use this:

    <style type="text/css">
        table
        {
            margin: auto;
        }
    </style>
    Code (markup):
    That will center every table in the page. To center just the main table give the table an id="maintable" and then use this code:

    <style type="text/css">
        #maintable
        {
            margin: auto;
        }
    </style>
    Code (markup):
    This doesn't work in IE 5. I do have a hack for that if you need it.
     
    stymiee, May 16, 2006 IP
  5. jrd1mra

    jrd1mra Peon

    Messages:
    243
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #5
    EDIT: didnt see Stymied's post. TRY That it looks good!

    the only problem with that is that its not an actual center and will look lopsided on larger browsers.
    The background color can be set by setting the background of the body to whatever. then building the tables on top of it. eg.

    body {background-color:ffffff;leftmargin="300" rightmargin="300";}
    table {background-color:something different;}

    <html>
    <body>
    <table>
    <tr><td>
    </td></tr>
    </table>
    </body>
    </HTML>
     
    jrd1mra, May 16, 2006 IP
  6. QiSoftware

    QiSoftware Well-Known Member

    Messages:
    805
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    158
    #6
    Try this for a table definition:

    <table align=center...

    Q...
     
    QiSoftware, May 16, 2006 IP
  7. mini_m

    mini_m Active Member

    Messages:
    237
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    80
    #7
    That would have helped me if I knew CSS, but unfortunately I don't. But thanks anyway :)
    What I ended up using was the <table= align "center" .. tag, thanks to Qi.. hmm, why didn't I think of that :).
    I made a 1 column table and centered it in the middle, then worked from then on. I might return with the results in a few days :).
     
    mini_m, May 16, 2006 IP
  8. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #8
    The align attribute is no longer a part of html. Neither is the center element. If you don't know css, Google for some css tutorials. W3schools is a good source of tutes.

    There is no sane reason to use deprecated elements or attributes.

    cheers,

    gary
     
    kk5st, May 16, 2006 IP
  9. scoxy

    scoxy Peon

    Messages:
    332
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #9
    #page {

    text-align: center;

    }

    Actually works with enclosing div tags around the whole page, but it's a hack really for IE. If you already have a table design the centering it is easy.

    The problem with the code I posted is that it will be inherited so you would have to make something like

    .font {

    text-align: left;

    }

    with all your text to make it look normal again.

    Dont use right margin: 300 and left margin 300, because users with different resolutions will see very different sites.
     
    scoxy, May 16, 2006 IP
  10. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #10
    That's only necessary for IE5.x. IE6 will act sanely if you put it into standards mode with a complete and proper DTD. In which case, a proper method of setting the outer container, whether it's a table or a wrapper div, is to set {margin: 0 auto;}.

    I no longer make any concession for IE<6 for the simple reason that all are dead and are rotting corpses beside the road.

    cheers,

    gary
     
    kk5st, May 16, 2006 IP
  11. mt.bum

    mt.bum Guest

    Messages:
    29
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Failing to specify the width is the most common mistake when centering blocks of stuff. The css should look like the following:

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

    That will work for div and other properties. Choose a width small enough to not create a horizontal scroll bar when viewing at 800 x 600. The width above, 774 pixels, works when there are no other properties squeezing things down. Sometimes a smaller number is needed.
     
    mt.bum, Jun 9, 2006 IP