PDA

View Full Version : HTML <table>

bloody_football
03-15-2006, 06:12 PM
I have made a large table (1 * 1) in HTML but wish to know if I can put a graphic anywhere in the table; at the moment there is only align left, center or right.

For example - I wish to put a small graphic 20% in from the left hand side and 60% down from the top line.

Any suggestions would be helpful as I can't seem to google anything :(

James
reclusivemonkey
03-16-2006, 01:21 AM
Do you need to use a table? You can use a div to do this just as effectively. Use the "background image" property and you can specify the exact percentage of where you want the image to appear. In your <head> section use;


<style type="text/css">
div#graphic{
background-image: url(yourgraphic.gif);
background-repeat: no-repeat;
background-position: 20% 60%;}
</style>


Then in the body use;


<div id="graphic">
&nbsp;
</div>


That should do what you want. Depending on the size of the graphic, you may need to use


height: somevalue px;
width: somevalue px;
bloody_football
03-16-2006, 01:43 AM
Thanks monkey, I'll play around with it and see what happens :)

James
bloody_football
03-17-2006, 02:51 PM
I've played around a bit but now have problem with the size of the <TD>

I write
<td align="center" width="12" height="12">

but when I put a image in it that is larger than the <TD> then the cell is expanded, I don't want that - I would like the image to resize itself to the <TD> size that I have told it to be.

James
emartel
04-25-2006, 04:02 AM
<img scr="path/imagename.jpg" width="12">
the 'width=' restricts the image width to x pixels. You can also use 'height=xx' to restrict the height.

Inside <td> you can also use padding. Eg:

<td style="padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px"> the stuff you want inside the table here </td>

that solves your initial problem of aligning the content anywhere you want inside the table
Sergeant
04-25-2006, 12:57 PM
Just to add to that...
It is better practice to resize your picture using a graphics program. Smaller file size=faster loading. Every Kb counts.