SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How do center this table

    Have put together photos by using table, and wondered how do I keep the margins the same on both left and right. They appear equal on my 22 inch screen, but on smaller 17 the right margin is much smaller.

    <table align="center">
    <tr>
    <td>

    <a href="thumbs/AbeGlennthumb.jpg"><img src="images/AbeGlenn.jpg" width="280" height="200" alt="Gang at Expo"></a>

    </td>
    <td>

    <a href="thumbs/DickBobthumb.jpg"><img src="images/DickBob.jpg" width="285" height="200" border="0" alt="Dick Stout/Bob Podrasky"></a>

    <td>
    </td>

    <a href="thumbs/HensonLookingthumb.jpg"><img src="images/HensonLooking.jpg" width="285" height="200" border="0" alt="Michael Paul Henson"></a>

    </td>
    </tr>

    <tr>
    <td>

    <center><b>l to r: Phils Uncle, Phil Caldwell, Paul</center>
    <center>Tainter, Abe Lincoln and Glenn Carson</center>

    </td>
    <td>

    <center><b>Dick Stout and Bob Podrasky</center>
    <center>Garrett Electronics</center>

    </td>
    <td>


    <center><b>Michael Paul Henson</center>
    <center>checking out bourse</center>

    </td>
    <br>

    </tr>
    </table>

  2. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,880
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    Try this:

    PHP Code:
    <table style='margin:20px auto 42px'
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  3. #3
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks but that didn't seem to do anything....?

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'll need to also give it a width

    Also you might want to reconsider using a table (it's not tabular data so isn't the appropriate tag), and the center and b tags which are now either depreciated or inappropriate in this case

  5. #5
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I am at a loss...any other suggestions?

  6. #6
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    actually what John_Betong suggested should work. I would only suggest to to declare an id or class (CSS) and apply the id/class to the table:

    Code CSS:
    #main {
      width: 800px;
      margin: 0 auto;
    }

    Code HTML4Strict:
    <table id="main">
    .....
    </table>

    if you use more than one table on the same page use a class instead

    Code CSS:
    .main {
      width: 800px;
      margin: 0 auto;
    }

    Code HTML4Strict:
    <table class="main">
    .....
    </table>
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  7. #7
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,880
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    Try this:

    HTML Code:
    <table style='width:88%; max-width:888px; margin:20px auto 42px; text-align:center;border:dotted 4px red'>  
    The border element can be removed after final adjustments are made,

    If that does not work then please supply a link.

    As mentioned by donboe it is better to use a CLASS and/or ID stored in a separate CSS file.
    The CSS file is cached and subsequent pages load quicker.
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  8. #8
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The page I am referring to....


    http://www.stoutstandards.com/Latest.html

  9. #9
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,880
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Barnum View Post
    The page I am referring to....


    http://www.stoutstandards.com/Latest.html

    There are errors in your CSS style which over-ride the CSS script used to center the table. Please use the following code to replace everything up to and including the new <body> statement

    HTML Code:
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
      <title>Latest News</title>
      <style type="text/css">
        a:hover {color:blue; text-decoration:none; font-weight:none}
        img {border:4px solid black; padding-left:50px; padding-right:50px; margin:10px}
        h1 {font-size: 25px}
        h2,h3 {font-size: 35px}
        h4 {font-size: 27px}
        h5 {font-size: 21px}
        text {font-weight:bold}
        p:first-letter {font-size: large;color: black;}
        body{font-family: Verdana; impress; background-color:#deb887;width:98%;margin:100px auto}
      </style>
    </head>
    <body>
    I would also suggest splitting the page into smaller separate pages with links to the smaller pages.

    I have a slow connection and your page size of 39.3 MB took an awful long time to load.
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  10. #10
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    John, thank you....wasn't aware of my detrimental code. Your suggestion did the trick, and I appreciate your help.

  11. #11
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,880
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Barnum View Post
    John, thank you....wasn't aware of my detrimental code. Your suggestion did the trick, and I appreciate your help.
    Glad I was able to help. You really must reduce your file size so that it is easier to find errors.
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  12. #12
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,053
    Mentioned
    66 Post(s)
    Tagged
    0 Thread(s)
    Barnum, one thing I've found that helps is to create a separate HTML file and test exactly what's being advised, get it to work in that simplified state then from there see why it isn't working in the context of the page. So this is the simplest possible centered table using CSS rules only.

    HTML Code:
    <html>
      <body>
        <table style="width: 50%; margin: 0px auto;">
          <tr>
            <td>Hello</td>
          </tr>
        </table>
      </body>
    </html>
    The width is 50% of the parent, in this case the body. Margin declarations are trickier. If you give one value it's applied to all sides. If you give two values the first will be applied to the top & bottom margins, and the second to the left & right. Finally you can give all 4 values in order top, right, bottom, left (They are in clockwise order). So if we want to center a table with a top margin of 10 and a bottom of 20 we'd go

    10em, auto, 20em, auto.

    Margins can be given in various units, but that's another discussion.

  13. #13
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you all....best site, bar none, for learning this very confusing process.

  14. #14
    Non-Member
    Join Date
    Aug 2010
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to place pics side by side, you can use.

    <center><table>
    <tr><td><img src=http://www.eobcards.com/corey.gif></td>
    <td><img src=http://www.eobcards.com/kelly.gif></td>
    <td><img src=http://www.eobcards.com/robin.gif></td></tr>
    </table></center>

  15. #15
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,053
    Mentioned
    66 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by syed2011 View Post
    If you want to place pics side by side, you can use.

    <center><table>
    <tr><td><img src=http://www.eobcards.com/corey.gif></td>
    <td><img src=http://www.eobcards.com/kelly.gif></td>
    <td><img src=http://www.eobcards.com/robin.gif></td></tr>
    </table></center>
    Either you are trolling, you didn't read any post of the thread or you have the reading comprehension skills of a 5 year old.

    Tables are not for page layout. They are for tabular data.

    This thread has been about how to center a table using CSS. It is not about using tables to position objects. It is certainly not about using the deprecated <center> tag.

    Centering two pictures in CSS.

    Code html:
    <img class="left" src="sample.gif">
    <Img class="right" src="sample2.gif">

    Code css:
    .left {
      display: inline-block;
      margin: 10px 5px 10px auto;
      height: 100px;
      width: 100px;
    }
     
    .right {
      display: inline-block;
      margin: 10px auto 10px 10px;
      height: 100px;
      width: 100px;
    }


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
  •