SitePoint Sponsor

User Tag List

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

    Increasing margin between photos in table

    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.

    Code:
    <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>
    Last edited by Pullo; Dec 13, 2013 at 01:24. Reason: Added code tags

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hey Barnum,

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

    Code:
    <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. #3
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    413
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you...how do I get the captions to center underneath now?

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    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:

    Code:
    <!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. #5
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    413
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Pullo...appreciate all your time and help. I learned something new today!!


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
  •