Table data trouble

create image link within table data

[error411413404]

Don't know if this is possible or not, what I am trying to do is have user click on an image that resides within a <TD> tag then another window pops open using javascript. Here's what the code initially looks like:

<A HREF="javascript: openmypage()" onMouseOver="window.status='New Flavor Apple Spice';return true;" onMouseOut="self.status=''" onclick="window.focus()"><TD VALIGN=bottom ROWSPAN=2><FONT FACE="geneva, arial, helvetica, sans-serif" SIZE="2"><TABLE BORDER="0" HEIGHT="440" WIDTH="350" CELLSPACING="0" CELLPADDING="0" BACKGROUND="images/apple_spice_announcement.jpg"></A></td>

It doesn't work if I do it that way, but if I take the image out of the table data, like so:

<TD VALIGN=bottom ROWSPAN=2><FONT FACE="geneva, arial, helvetica, sans-serif" SIZE="2"><TABLE BORDER="0" HEIGHT="440" WIDTH="350" CELLSPACING="0" CELLPADDING="0"><A HREF="javascript: openmypage()" onMouseOver="window.status='New Flavor Apple Spice';return true;" onMouseOut="self.status=''" onclick="window.focus()"><IMG SRC="images/apple_spice_announcement.jpg" Alt="Click here for more info on whatever!" BORDER="0" width="350" height="440"></A></td>

then I get desired result. The problem is, by taking the image out of the table data and setting it out on its own, another table that I use for contact info on the bottom of the page which is visible without scrolling, gets knocked way down the page so you have to scroll down to see it. Is there some way of making a background image inside of <td> a link or not? If not, I think i'll bust out some <div> tags for the contact info, unless someone has an idea...

[john_k]

The snippets of code you posted are all messed up.

In the first snippet, you have:
start A
start TD
start TABLE
close A
close TD

In the second you start a TD, start a TABLE, start an A (anchor), close the A tag, and then close the TD. What happened with the table?

To answer your question:
You can add an onclick attribute to the TD itself. With the image as a background, I think that would give you the effect you are looking for. If you do this, then you will probably also want to set the cursor using the TD's style.

[error411413404]

Well, which way is right? I didn't write the table, I don't really understand how it is set up. I just want to modify it to do what I want it to do. How do you add an onclick to the table data?

[rocknbil]

It's possible you're making this more complicated than it has to be. What john is saying is that table tags and other tags need to be correctly nested. That is, a <table> must have a paired </table>, inside the table a row <tr> must have a paired </tr>, as with <td> tags, and <td> can only live inside table rows. The abberation you mention with something being pushed all the way to the bottom is probably because IE is trying to make sense of your malformed code.

Try this:
<TABLE BORDER="0" HEIGHT="440" WIDTH="350" CELLSPACING="0" CELLPADDING="0">
<tr>
<TD VALIGN="bottom" ROWSPAN="2">
<A HREF="mypage.htm" onClick="openmypage(); return false;"
onMouseOver="window.status='New Flavor Apple Spice';return true;"
onMouseOut="self.status=''"><IMG SRC="images/apple_spice_announcement.jpg"
Alt="Click here for more info on whatever!"
BORDER="0" width="350" height="440"></A>
</td>
</tr>
<tr><td>Whatever's in the second row from rowspan=2 above</td></tr>
</table>

A couple things to mention:
1. Note the nesting. <table><tr><td><a></a></td></tr></table>

2. In your href - note that href="now your page." If Javascript is disabled, you still want them to see this page. The return false in the onClick event handler tells Javascript NOT to actually move to that page. So if JS is enabled, it won't go, but if it's disabled, the user still sees the data.

3. Note I've removed the evil font tag (which also did not have a closing </font>.) Put the following in the head of your document:

<style type="text/css">
html,body { font-family:Arial, Helvetica, Sans-Serif; }
</style>

And all your text will be in that style. Since what's in the TD is NOT text, you don't need it anyway, but in the event you do, this will set the font for you.

[error411413404]

This is how the table ends:

<TR></a>
<TD VALIGN=top><FONT FACE="Times" SIZE="2"><B>
<CENTER>
<BR><BR>
<TABLE BORDER="0" CELLSPACING="6" CELLPADDING="6">
<TR><TD><FONT FACE="times, times new roman" SIZE="2"><B>

</TD></TR>
</TABLE>

I don't know what that second TD VALIGN is doing. It doesn't look like there's anything in it.

[error411413404]

That didn't work. It sent the table shooting down to the bottom of the page. Thanks for your input. Will probably just re-build the whole table so I can understand how the H-E-double hockey sticks it is supposedly working.

[tedster]

An anchor tag is an inline element -- as such, it may only contain other inline elements. So nesting an anchor outside an table or table cell element is not valid and makes for browser troubles. rocknbil posted valid mark-up, where the entire <a></a> element is nested WITHIN the <td></td> element. So, this bit: <TR></a> -- just cannot be valid.

I don't know what that second TD VALIGN is doing. It doesn't look like there's anything in it.

If that's what your source code show, you're right -- looks like leftover debris from earlier editing, and it is doing nothing.

I strongly encourage you to use the W3C Validator for HTML [validator.w3.org] to sort things out. It can save untold aggrivation.

[g1smd]

You cannot have a table or even a single table cell inside a link. That is invalid code.

The only place inside a table that you can have user content, is inside a single <td>..</td> cell.

Get the nesting right, and it will work fine. While there, get rid of the <font> tags and invest in half a dozen lines of CSS to style the entire site.