Increasing margin between photos in table

HTML & CSS
1

I am using the following code and wondered what I can do to put space between the two photos. I have image margin set in CSS and only want to change it when needed.

<table align="center">
		<tr>		
			
			<td><img src="images/1911s.jpg" width="190" height="190">
			</td>
            
            <td><img src="images/1910d.jpg" width="190" height="190">
            </td> 
			        	
       			
			
           
			</tr>
            <tr>
            <td><center>1911S penny is 
            about</br> $40 in VG/F condition</center></td>
            
            <td><center>1910D Barber Quarter</br> in VF
            condition...now $70</center></td>
            
                  
            	
          
            
            </tr>
            </table>
2

Hey Barnum,

Can’t you just alter the width of your table cells?

<table align="center">
  <tr>    
    <td width="250"><img src="images/1911s.jpg" width="190" height="190"></td>
    <td><img src="images/1910d.jpg" width="190" height="190"></td> 
  </tr>
  <tr>
    <td><center>1911S penny is about</br> $40 in VG/F condition</center></td>
    <td><center>1910D Barber Quarter</br> in VF condition...now $70</center></td>
  </tr>
</table>
3

Thank you…how do I get the captions to center underneath now?

4

Well, if you absolutely, definitely have to use tables for your layout, I would add a middle column.
Otherwise, CSS would be a far cleaner way to go.

Here’s a comparison:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tables vs CSS</title>
    <style>
      #wrapper{
        width: 410px;
        background: red;
        margin:0 auto;
      }

      #wrapper img{ 
        width: 190px; 
        height: 190px;
      }

      #wrapper div{
        float: left;
      }

      #wrapper div.left{
        padding-right: 30px;
      }

      #wrapper div p{
        text-align: center;
        position: relative;
        top: -10px;
      }
    </style>
  </head>
  
  <body>
    <h2>Table based :(</h2>
    <table align="center">
      <tr>    
        <td><img src="images/1911s.jpg" width="190" height="190"></td>
        <td width="20"><!-- This is your spacing between the pictures --></td>
        <td><img src="images/1910d.jpg" width="190" height="190"></td> 
      </tr>
      <tr>
        <td><center>1911S penny is about</br> $40 in VG/F condition</center></td>
        <td width="20"><!-- This is your spacing between the captions --></td>
        <td><center>1910D Barber Quarter</br> in VF condition...now $70</center></td>
      </tr>
    </table>

    <h2>CSS rocks :)</h2>
    <div id="wrapper">
      <div class="left">
        <img src="images/1911s.jpg" class="imgLeft">
        <p>1911S penny is about<br>$40 in VG/F condition<p>
      </div>
      <div class="right">
        <img src="images/1911s.jpg" class="imgRight">
        <p>1910D Barber Quarter<br>in VF condition...now $70<p>
      </div>
    </div>
  </body>
</html>

HTH

5

Thanks Pullo…appreciate all your time and help. I learned something new today!!