Tables and spaces

[creative craig]

I have never come across this myself and I cant have a go now as I am at work.

When a table is written in Notepad for example and you have hit return after a <td> tag like:

<td>
<img src="logo.jpg">
</td>

Will that break in line after the <td> tag show up as white space around the image. I have heard some one calling it "White space in your code." Just all the books, tutorials, sites and forums that I have ever read, it has never mentioned anything like this at all.

Hope some one can clear this up for me!

:)

[Rhys]

I don't believe it does - however any un-needed spaces in your code show up as extra bytes(and slow the loading) in your file size.

[creative craig]

I thougt so to, wouldnt there have to be a &nbsp; to make a gap around the image?

[Sinner_G]

Would that be a frame-like gap around the whole image or just before the image?

[creative craig]

Well the way that I took it to mean is there would be a border like gap around the whole of the image if there were line breaks after the <img src="logo.jpg">.

[Sinner_G]

The only way I can figure how this can happen has nothing really to do with the line break. The border would only come if you defined a cellspacing or cellpadding for your table.

[creative craig]

<td>
<img src="logo.jpg">
</td>

I have read on a forum that the above would cause a gap around the image, but the code below wouldnt have the gaps, as there are no line breaks. Nothing to do with the cellpadding in the <table> tag.

<td><img src="logo.jpg"></td>

[Sinner_G]

Just tried it and it's true, there is a space under the image with this version:

<td>
<img src="logo.jpg">
</td>

Don't know where it comes from though.

[creative craig]

Is this maybe something to do with the browser and the way that it dislpay or interprets the code or is this in built into HTML to do this?

I just had ago myself and its only the closing tag </td> that has to be on the same line, not the opening one <td> as well.

Well I learn something new everyday... the adventure continues!

[Captaffy]

See this thread I started for more information:

CSS & image gaps [webmasterworld.com]

[pageoneresults]

Anytime the </td> or </p> tags are not on the same line as the rest of the code, you'll get the gap. Haven't quite figured out why this happens but caught on to it years ago.

[keyplyr]

In addition to what pageoneresults said, it is also poor syntax to "hit return" when writing any code. Not only does this habit add white space, but most editors (and thusly the browser) terminate the line. This can cause scripting errors and other problems, including those spaces around images.

Instead of hitting the return key, use your space bar.

[g1smd]

Using a space still occupies 1 byte in the file, however this is preferable to the two characters used with a new line... on Windows systems this is a Carriage Return and a Line Feed character, two characters/bytes in total.

[Pushycat]

Sometimes I prefer to put the closing td tag on a new line because it makes it easier for me to work on the HTML in NoteTab Pro. I work around this issue you all are discussing by putting a <br> at the end of the line above. It seems to work on all the browsers I've tested it on.

<td>
<img src="logo.jpg"><br>
</td>

[rewboss]

This is a known issue with Netscape browsers. It can be argued whether Netscape is at fault for rendering the white space where it shouldn't be, or Microsoft for not rendering the white space where it should be.

A similar thing happens with code like this:

<a href="index.html">
Home
</a>

Netscape browsers will make the space after the text part of the link. This is especially ugly with code like:

<a href="index.html">
<img src="home.gif" alt="Home" />
</a>

Here, you get the button with a little clickable _ next to it -- a blemish on your otherwise beautiful site.

[creative craig]

Thanx for all the info people :)