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>

Try this:


<table style='margin:20px auto 42px'>

Thanks but that didn’t seem to do anything…?

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

I am at a loss…any other suggestions?

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:


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


<table id="main">
.....
</table>

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


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


<table class="main">
.....
</table>

Try this:



<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.

The page I am referring to…

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>
<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.

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.

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>
  <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.

Thank you all…best site, bar none, for learning this very confusing process.

If you want to place pics side by side, you can use.

<center><table>
<tr><td><img src=http://www.eobcards.com/corey.gif&gt;&lt;/td&gt;
<td><img src=http://www.eobcards.com/kelly.gif&gt;&lt;/td&gt;
<td><img src=http://www.eobcards.com/robin.gif&gt;&lt;/td&gt;&lt;/tr&gt;
</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.


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


.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;
}