Solved

Placing images in a table

Posted on 2000-04-24
12
190 Views
Last Modified: 2010-04-09
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.
0
Comment
Question by:redl1ne
12 Comments
 
LVL 8

Expert Comment

by:jbirk
ID: 2745301
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
 
LVL 8

Expert Comment

by:jbirk
ID: 2745305
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
 

Author Comment

by:redl1ne
ID: 2745349
I don't see any difference between your code and mine. Could you please elaborate when you say "removing white space"?
0
 

Author Comment

by:redl1ne
ID: 2745428
I don't see any difference between your code and mine. Could you please elaborate when you say "removing white space"?
0
 
LVL 8

Expert Comment

by:bebonham
ID: 2745477
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
 

Author Comment

by:redl1ne
ID: 2745510
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 1

Expert Comment

by:RAD
ID: 2745629
try adding :
cellspacing="0" cellpadding="0"
RAD
0
 

Author Comment

by:redl1ne
ID: 2745644
rad, already tried that, problem still there.
0
 
LVL 8

Accepted Solution

by:
jbirk earned 100 total points
ID: 2745662
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
 

Author Comment

by:redl1ne
ID: 2745698
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
 

Author Comment

by:redl1ne
ID: 2745699
Adjusted points from 75 to 100
0
 
LVL 8

Expert Comment

by:jbirk
ID: 2745879
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now