Jump to content

xhtml strict image table

KyleKJune

By KyleKJune
in HTML/XHTML

Recommended Posts

KyleKJune Newbie

KyleKJune

Posted
Posted

ok I am trying to figure out how to remove gap between images in table. I tried aligning bottom but that does not get rid of the gap all the way. How do I do and why?It does not have the gap in transitional.Heres a pic of it:bd370f96fffd1a9b68bacab05bc50853.pngHere is the source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>Tables</title><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><style type="text/css">body{background-color:yellow;}img{vertical-align:bottom;}</style></head><body><table border="0" cellpadding="0"><tr><td><img src="img1.jpg" alt="img1"></td></tr><tr><td><img src="img1.jpg" alt="img1"></td></tr><tr><td><img src="img1.jpg" alt="img1"></td></tr><tr><td><img src="img1.jpg" alt="img1"></td></tr></table></body></html>

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

It's likely due to the inline nature of the images. You can probably solve it with the following CSS rules:

table img { vertical-align: middle; }

I don't know if a table is the best way to organize your data.

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted
It's likely due to the inline nature of the images. You can probably solve it with the following CSS rules:
table img { vertical-align: middle; }

I don't know if a table is the best way to organize your data.

agreed. why not just have them stacked on on top of the other? You could give the image display: block so they start on new lines, and then reset the margins like fmdpa suggested so there is no gap.
Link to comment
Share on other sites
KyleKJune Newbie

KyleKJune

Posted
  • Author
Posted
It's likely due to the inline nature of the images. You can probably solve it with the following CSS rules:
table img { vertical-align: middle; }

I don't know if a table is the best way to organize your data.

I know its not, I had a project in one of my classes where we had to arrange helicopter pieces into a picture and it had that gap in strict but not in transitional. That is why I posted because I was wondering about it. Also I tried what you said and it did not work, but this did work:
tr,td,img{display:block;}

I don't really understand the whole display stuff yet but this fixes the problem.

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Guys! come on think about it, what missing from below, that will have default value to it. cell...ing, and setting this value to 0, will fix this problem.<table border="0" cellpadding="0">No! 'cellspacing'<table border="0" cellpadding="0" cellspacing="0">if you want css solution<style type="text/css">table {border-spacing:0;border-spacing: expression(cellSpacing=0) ;) /*for IE*/}table td{padding:0;}</style>using just<table border="0">

Link to comment
Share on other sites
KyleKJune Newbie

KyleKJune

Posted
  • Author
Posted
Guys! come on think about it, what missing from below, that will have default value to it. cell...ing, and setting this value to 0, will fix this problem.<table border="0" cellpadding="0">No! 'cellspacing'<table border="0" cellpadding="0" cellspacing="0">if you want css solution<style type="text/css">table {border-spacing:0;border-spacing: expression(cellSpacing=0) :) /*for IE*/}table td{padding:0;}</style>using just<table border="0">
The cellspacing barely made any effect on it. It still had a gap about the same size as in the picture. I found a solution already though. Here was the only way I found for removing the gap.
tr,td,img{display:block;}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...