Solved

Placing images in a table

Posted on 2000-04-24
12
195 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 

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

Get HTML5 Certified

Want to be a web developer? You'll need to know HTML. Prepare for HTML5 certification by enrolling in July's Course of the Month! It's free for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

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.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

617 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