Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Align image to right of table- help please

    hello
    i currently have a feedback table, and i want to add an image to the right of it,
    this is my code, i have bolded the parts that i tried to add to make the table and the image align next to each other:

    Code:
    <style type = "text/css">
    body {
    font-family: tahoma, helvetica, arial, sans-serif;
    }
    table, tr, td, th {
    text-align: center;
    font-size: .9em;
    color: white;
    border: 2px groove;
    color: black;
    padding: 5px;
    background-color: #77AB98;
    }
    </style>
    </head>
    
    <body>
    
    
    <table align="center"  style= "font-color: white;">
    <thead>
    <tr>
    <th style = "width: 100px;">Name</th>
    
    <th style = "width: 200px;">Feedback</th>
    <th style = "width: 50px;">Score</th>
    <th style = "width: 100px;">Product</th>
    </tr>
    </thead>
    
    <tbody>
    
    
    	
    
    </tbody>
    </table>
    
    <img src="http://mentalfloss.cachefly.net/wp-content/uploads/2008/12/29-Calculator-Jumbo.jpg" alt="Angry face" align="right"/>
    this is my result so far:



    any tips or help?

    ill appreciate any help or advice thanks
    Last edited by whipp; 05-12-2010 at 06:35 AM.

  • #2
    New Coder
    Join Date
    Feb 2008
    Posts
    64
    Thanks
    3
    Thanked 6 Times in 6 Posts
    Hi whipp,

    Your best bet would be to put the table and image into a container div (wrapper) this will restrict how far away from each other they can go.

    see code below
    Code:
    <style type = "text/css">
    body {
    font-family: tahoma, helvetica, arial, sans-serif;
    }
    table, tr, td, th {
    text-align: center;
    font-size: .9em;
    color: white;
    border: 2px groove;
    color: black;
    padding: 5px;
    background-color: #77AB98;
    }
    
    .wrapper {
    margin: 0 auto; /* centers the div horizontally */
    width: 900px;
    height: 300px; /* just added to show container */
    background-color: #999999;
    }
    
    </style>
    </head>
    
    <body>
    
    <div class="wrapper"><!-- wrapper to contain table and image -->
    
    <table align="left"  style= "font-color: white;">
    <thead>
    <tr>
    <th style = "width: 100px;">Name</th>
    
    <th style = "width: 200px;">Feedback</th>
    <th style = "width: 50px;">Score</th>
    <th style = "width: 100px;">Product</th>
    </tr>
    </thead>
    
    <tbody>
    </tbody>
    </table>
    <img src="http://mentalfloss.cachefly.net/wp-content/uploads/2008/12/29-Calculator-Jumbo.jpg" alt="Angry face" width="370" height="327" align="left"/>
    
    </div>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •