SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    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
    6,096
    Mentioned
    219 Post(s)
    Tagged
    12 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
    418
    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
    6,096
    Mentioned
    219 Post(s)
    Tagged
    12 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
    418
    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
  •