HTML <table> (1 Viewer)

bloody_football · Mar 16, 2006

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 · Mar 16, 2006

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;

Code:

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

Then in the body use;

Code:

<div id="graphic">
 
</div>

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

Code:

height: [i]somevalue[/i] px;
width: [i]somevalue[/i] px;

bloody_football · Mar 16, 2006

Thanks monkey, I'll play around with it and see what happens

James

bloody_football · Mar 17, 2006

I've played around a bit but now have problem with the size of the <TD>

I write

Code:

<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 · Apr 25, 2006

<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 · Apr 25, 2006

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.

HTML <table> (1 Viewer)

bloody_football

Registered User.

reclusivemonkey

Registered User.

bloody_football

Registered User.

bloody_football

Registered User.

emartel

Registered User.

Sergeant

Someone's gotta do it

Similar threads

Users who are viewing this thread