How can I get rid of the default table formatting?

[psionicsin]

What do I need to add to this code to make sure that the images in the table butt up right against one another.Here's the table: Table TestHere's the code:

<table height="540px" border="0px" cellpadding="0px" cellspacing="0px">	<tr>		<td>			<a href="Page Location Here"><img src="./images/ataglance/test01.jpg" alt="Name Here" width="360px" height="108px"/></a>		</td>		<td>			<a href="Page Location Here"><img src="./images/ataglance/test02.jpg" alt="Name Here" width="360px" height="108px"/></a>		</td>	</tr>	<tr>		 ...	</tr></table>

[thescientist]

I'm not sure what you mean. Do you want it so that there isn't a gap between pictures for every row?

[psionicsin]

I'm not sure what you mean. Do you want it so that there isn't a gap between pictures for every row?

Yes. There should be no gaps at all. The images should be right up against one another.

[ShadowMage]

Make sure that margins on the images are at 0, margins and padding on table cells are 0, and use the border-collapse: collapse declaration for the table.

[psionicsin]

Make sure that margins on the images are at 0, margins and padding on table cells are 0, and use the border-collapse: collapse declaration for the table.

Tried adding css and unless I'm doing it wrong, it's still not working.Is there a way to do this with html coding, or does this strictly have to be done with css styling?

[ShadowMage]

Tried adding css and unless I'm doing it wrong, it's still not working.Is there a way to do this with html coding, or does this strictly have to be done with css styling?

There are deprecated/not recommended ways to do it with HTML, but I'd stick with CSS.Post your code so far, so we can see what you tried.

[psionicsin]

Ok I was EXTREMELY tired yesterday so I'm sure this is absolutely wrong.

<style>#table{border-collapse:collapse;}#table,th, td{border-collapse:collapse;margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;}</style><table height="540px" margin="0px" border="0px" cellpadding="0px" cellspacing="0px">	<tr>		<td>			<a href="Page Location Here"><img src="./images/ataglance/test01.jpg" alt="Name Here" width="360px" height="108px"/></a>		</td>		<td>			<a href="Page Location Here"><img src="./images/ataglance/test02.jpg" alt="Name Here" width="360px" height="108px"/></a>		</td>	</tr>	<tr>		<td>			<a href="Page Location Here"><img src="./images/ataglance/test03.jpg" alt="Name Here" width="360px" height="108px"/></a>		</td>		<td>			<a href="Page Location Here"><img src="./images/ataglance/test04.jpg" alt="Name Here" width="360px" height="108px"/></a>		</td>	</tr>	<tr>		<td>			<a href="Page Location Here"><img src="./images/ataglance/test05.jpg" alt="Name Here" width="360px" height="108px"/></a>		</td>		<td>			<a href="Page Location Here"><img src="./images/ataglance/test06.jpg" alt="Name Here" width="360px" height="108px"/></a>		</td>	</tr>	<tr>		<td>			<a href="Page Location Here"><img src="./images/ataglance/test07.jpg" alt="Name Here" width="360px" height="108px"/></a>		</td>		<td>			<a href="Page Location Here"><img src="./images/ataglance/test08.jpg" alt="Name Here" width="360px" height="108px"/></a>		</td>	</tr>	<tr>		<td>			<a href="Page Location Here"><img src="./images/ataglance/test09.jpg" alt="Name Here" width="360px" height="108px"/></a>		</td>		<td>			<a href="Page Location Here"><img src="./images/ataglance/test10.jpg" alt="Name Here" width="360px" height="108px"/></a>		</td>	</tr></table>

[ShadowMage]

Well, for starters:#table...is looking for an element with an id equal to 'table' which isn't what you want. Get rid of the #.Also remove the table tag and border collapse from the declaration with the td, th.Then you should really get the CSS out of your HTML tags. You can target all your anchor images with a single declaration to set their widths.

<style>table{border-collapse:collapse;margin: 0px;border-width: 0px;height: 540px;}th, td{margin: 0px;}/*Style anchor images*/td a img {width: 360px;height: 108px;}</style><table cellpadding="0px" cellspacing="0px">	<tr>		<td>			<a href="Page Location Here"><img src="./images/ataglance/test01.jpg" alt="Name Here" /></a>		</td>		<td>			<a href="Page Location Here"><img src="./images/ataglance/test02.jpg" alt="Name Here" /></a>		</td>	</tr>	...</table>

EDIT:You might also have to set margins/padding for the anchors and the images to 0.

[psionicsin]

Well, for starters:#table...is looking for an element with an id equal to 'table' which isn't what you want. Get rid of the #.Also remove the table tag and border collapse from the declaration with the td, th.Then you should really get the CSS out of your HTML tags. You can target all your anchor images with a single declaration to set their widths.

Thank you ShadowMage. That really helped. I'm learning as I go, and although I pretty much did the site from scratch, there are a lot of things I'm still learning. Thank you for being patient.

[psionicsin]

Hmm ok I tried a bunch of things, including what you suggested about setting the margins and padding...but it's still not quite there. Something I'm overlooking. And also I keep trying to break the styling for the box link, but I can't seem to not make it show/highlight as a link. I tried this:

a.NoLink2, a.NoLink2:link, a.NoLink2:visited, a.NoLink2:hover, a.NoLink2:active {	text-Decoration:none;}

But it's not getting me anywhere. That's is around the same combination I did when my navigation menu started taking on the look of my page links, and it worked for that lol.

[ShadowMage]

Hmm ok I tried a bunch of things, including what you suggested about setting the margins and padding...but it's still not quite there. Something I'm overlooking. And also I keep trying to break the styling for the box link, but I can't seem to not make it show/highlight as a link. I tried this:

Could you post your code for the table?Are you referring to the blue box around the images or the dotted border when you click on them?To remove the blue box add border: none; to the img declaration:td a img {width: 360px;height: 108px;border: none;}I can't remember for sure if it goes on the image or the anchor, but I'm 99% sure it goes on the image.To remove the dotted border add outline: none; to the anchor:td a {outline: none;}

[psionicsin]

<style>table{border-collapse:collapse;margin: 0px;border-width: 0px;height: 540px;}th, td{margin: 0px;}/*Style anchor images*/td a img {border: none;outline: none;width: 360px;height: 108px;}</style><table cellpadding="0px" cellspacing="0px">	<tr>		<td>			<a href="Page Location Here"><img src="./images/ataglance/test01.jpg" alt="Name Here" /></a>		</td>		<td>			<a href="Page Location Here"><img src="./images/ataglance/test02.jpg" alt="Name Here" /></a>		</td>	</tr>...</table>

[ShadowMage]

Try resetting margins on the anchors and images:td a img {border: none;width: 360px;height: 108px;margin: 0px;padding: 0px;}td a {outline: none;margin: 0px;padding: 0px;}Also, notice I moved the outline declaration to the anchor, which is where it should have been placed.

[psionicsin]

Try resetting margins on the anchors and images:td a img {border: none;width: 360px;height: 108px;margin: 0px;padding: 0px;}td a {outline: none;margin: 0px;padding: 0px;}Also, notice I moved the outline declaration to the anchor, which is where it should have been placed.

I did a copy/paste of what you did and it worked a bit, but there's still something that's keep them them apart. I have no idea what it is. I've been attached to the CSS section of W3S too lol.

[Ixzion]

I think the problem might be that it's counting the spaces you're giving the your img elements.Try this:

<table cellpadding="0px" cellspacing="0px">	<tr>		<td><a href="Page Location Here"><img src="./images/ataglance/test01.jpg" alt="Name Here" /></a></td>		<td><a href="Page Location Here"><img src="./images/ataglance/test02.jpg" alt="Name Here" /></a></td>	</tr>...</table>

[ShadowMage]

I think the problem might be that it's counting the spaces you're giving the your img elements.

HTML is not sensitive to whitespace. So any newlines or extra spaces in the markup won't affect the layout of the page. There are a few exceptions (textareas and the pre tag) but tables are not one of those exceptions.

[psionicsin]

HTML is not sensitive to whitespace. So any newlines or extra spaces in the markup won't affect the layout of the page. There are a few exceptions (textareas and the pre tag) but tables are not one of those exceptions.

Right.Here's my code thus far:

<style>table{border-collapse:collapse;margin: 0px;padding: 0px;border-width: 0px;height: 540px;}th, td{margin: 0px;}/*Style anchor images*/td a {outline: none;margin: 0px;padding: 0px;}td a img {border: none;width: 360px;height: 108px;margin: 0px;padding: 0px;}</style><table cellpadding="0px" cellspacing="0px">	<tr>		<td><a href="Page Location Here"><img src="./images/ataglance/test01.jpg" alt="Name Here" /></a></td>		<td><a href="Page Location Here"><img src="./images/ataglance/test02.jpg" alt="Name Here" /></a></td>	</tr>	.........</table>

Still not solution to this problem. I don't get it.

[dsonesuk]

I know this is obvious, but since I have not seen these images and don't know where you obtained them. Are you sure its not a border in the actual image, a white border would not show on white background, so although the looks as though it is not butting together, it actually is!.EDIT: are you talking about images butting side by side or top and bottom, with 1 row theres no problem, with more than 1 there is a gap between top and bottom in IE (no surprise, one of these days their get their act together fixed in IE8, but not IE8 compatible view, below IE8 this problem is still present), this can be fix using Ixzion solution, or for quickness just add float to image.

td a img { border: none; width: 360px; height: 108px; margin: 0px; padding: 0px;  float:left; /* added by dsonesuk*/ }

[psionicsin]

I know this is obvious, but since I have not seen these images and don't know where you obtained them. Are you sure its not a border in the actual image, a white border would not show on white background, so although the looks as though it is not butting together, it actually is!.EDIT: are you talking about images butting side by side or top and bottom, with 1 row theres no problem, with more than 1 there is a gap between top and bottom in IE (no surprise, one of these days their get their act together fixed in IE8, but not IE8 compatible view, below IE8 this problem is still present), this can be fix using Ixzion solution, or for quickness just add float to image.

td a img { border: none; width: 360px; height: 108px; margin: 0px; padding: 0px;  float:left; /* added by dsonesuk*/ }

There is no border on the images, no. I created the test images myself as placeholders to judge when they are touching. If they are touching, there should be nothing but a 720x540px block of white with words in each cell.New location page is here:http://rutholsonphoto.com/ataglance.php

[psionicsin]

@ dsonesukI think your solution actually worked. I can't be 100% sure yet, as I'd have liked the images to actually be touching so I know I got the measurements right...but it seems like it so far.

[dsonesuk]

There is no border on the images, no. I created the test images myself as placeholders to judge when they are touching. If they are touching, there should be nothing but a 720x540px block of white with words in each cell.

Err... I'm confused here, I must be seeing different images to you, because i just veiwed the images and there is a 2px black border in each image, you won't get a 720 x 540px block of white with text in each cell, but each cell will have a inner black borders 4px wide.

[psionicsin]

Err... I'm confused here, I must be seeing different images to you, because i just veiwed the images and there is a 2px black border in each image, you won't get a 720 x 540px block of white with text in each cell, but each cell will have a inner black borders 4px wide.

Hmm maybe............I added that border and totally forgot about it. Maybe...I'm sorry lol.