Placing images in a table

Ok, this is a very simple problem that is driving me insane..

Whenever I try to place an image into a table, it always ends up leaving blank space at the bottom of the image. My code is as follows:

<TABLE WIDTH=100 HEIGHT=100>
<TR VALIGN=BOTTOM>
<TD WIDTH=100 HEIGHT=100>
<IMG SRC="img.jpg" HEIGHT=100 WIDTH=100>
</TD>
</TR>
</TABLE>

No matter what I play with, I can not get the image to either take up the entire height of the table, or align to the bottom of the table as opposed to the top.

Normally, I'd use a cheesy fix and just make the table background color the same as the image's, but I can't do that in this case. Any suggestions are greatly appreciated. Thanks.
redl1neAsked:
Who is Participating?
 
jbirkConnect With a Mentor Commented:
Oh yes I forgot about the spacing as well...  Use:
<TABLE border=0 cellpadding="0" cellspacing="0">

And BE SURE NOT TO HAVE ANY WHITE SPACE BETWEEN THE IMG TAGS and the TD tags.  This is essential!

The difference in what I had and what you had is the end of lines between the td and img tags.  This will introduce white space every time.

White space in code is considered spaces, tabs, end of lines (return), and a slew of other characters which aren't visible.

-Josh
0
 
jbirkCommented:
Removing white space usually does the trick.
Try this:
<TABLE WIDTH=100 HEIGHT=100>
<TR VALIGN=BOTTOM>
<TD WIDTH=100 HEIGHT=100><IMG SRC="img.jpg" HEIGHT=100 WIDTH=100></TD>
</TR>
</TABLE>

-Josh
0
 
jbirkCommented:
Oh and valign=bottom isn't necesary.  It shouldn't do anything, but remove it just in case...

<TABLE WIDTH=100 HEIGHT=100>
<TR>
<TD WIDTH=100 HEIGHT=100><IMG SRC="img.jpg" HEIGHT=100 WIDTH=100></TD>
</TR>
</TABLE>

-Josh
0
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
redl1neAuthor Commented:
I don't see any difference between your code and mine. Could you please elaborate when you say "removing white space"?
0
 
redl1neAuthor Commented:
I don't see any difference between your code and mine. Could you please elaborate when you say "removing white space"?
0
 
bebonhamCommented:
I just don't get what you are trying to do...if your table background/bgcolor is blank, anything behind it (background/bgcolor) will show through, so no problem...
if you are using a <table background or bgcolor>, try another technique like using <body bgcolor or background> or div or something...

but, as far as I know, there is not a solution for what you ask.

If you are really bent on control, use absolute positioning, you can achieve ANYTHING with it that you can do with tables.
p.s. "jbirk" was trying to tell you that space between 2 td tags can mess with the cell itself, which I hope we all know is not the case. (unless other text is in there too, or if you are using pre)

Later,
Bob Bonham
0
 
redl1neAuthor Commented:
Let me try to explain again..

I have a table and I define it as having the same height and width of my image. The width is fine, but the height isn't. It looks like it adds about 2 or 3 pixels to the height of my table, then leaves these pixels blank. SO instead of having a 150 pixel tall image in a 150 pixel tall table, i have a 150 pixel tall image in a 153 pixel tall table even though i specify the table to be the same height as the image.

Here is an example.

Say you would like to do two tables, one under the other. The top table has nothing in it, except an image, so the code will be:

<table>...<td><img src="img.jpg">..</table>

Now, lets just say img.jpg is a gradiant image (multicolor)

Next we have the bottom table. This table has a straight background color of black.

Now here is my problem.. what I see is:

Gradiant Image
a bit of blank space
Black

I want to get rid of that blank space, I basically want the contents of the two tables to touch eachther. I'll try to draw a diagram.


_____________________________


blue/yellow gradiant


_____________________________
blank space
_____________________________


black

_____________________________

<B>what I could like is:</B>

_____________________________


blue/yellow gradiant

_____________________________


black


_____________________________

Does any of this make sense?
0
 
RADWeb DeveloperCommented:
try adding :
cellspacing="0" cellpadding="0"
RAD
0
 
redl1neAuthor Commented:
rad, already tried that, problem still there.
0
 
redl1neAuthor Commented:
Oh.. my.. god

I've been doing HTML for years now and never knew that. That solves my problem!

The reason why my code ALWAYS fails when doing what I originally questioned is because I like to organize my syntax on different lines and using tabs.. no wonder I would always have problems doing stuff like this.

Thanks a lot for the tip dude, you saved me a lot of work as I was starting to use absolute positioning as beb suggested. The points are yours.
0
 
redl1neAuthor Commented:
Adjusted points from 75 to 100
0
 
jbirkCommented:
Well, glad to have cleared that up for you.  Note that you only have to worry about the white space within the td tags.  If you have any non-white space characters between <TR> and <TD> tags, there may be some wierd effects, but other than that all other white space has no effect.  Just the stuff within the <TD> and </TD> tags.


Hopefully this will save some future headaches!  I know I had a few when I first learned about this a few years ago!


-Josh
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.