Solved

Placing images in a table

Posted on 2000-04-24
12
186 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 1

Expert Comment

by:RAD
Comment Utility
try adding :
cellspacing="0" cellpadding="0"
RAD
0
 

Author Comment

by:redl1ne
Comment Utility
rad, already tried that, problem still there.
0
 
LVL 8

Accepted Solution

by:
jbirk earned 100 total points
Comment Utility
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
Comment Utility
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
Comment Utility
Adjusted points from 75 to 100
0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

772 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

11 Experts available now in Live!

Get 1:1 Help Now