Align image to right of table- help please [Archive]

whipp

05-12-2010, 06:29 AM

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:

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

http://i40.tinypic.com/2a7y9ad.jpg

any tips or help? :confused:

ill appreciate any help or advice thanks

dome90uk

05-12-2010, 05:11 PM

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 :)

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

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