Can A Whole Table be an <a href...>table</a> Link?

[peterinwa]

I have used HTML <table> code to create a banner ad. Inside the border of the table I have placed two text gifs, one above the other:

11111111111111111111111111
2222222222222222

I put the <a... and </a> directly around the gifs. But because gif 2 is narrower than 1, the space to the side of 2 is not a link.

This may seem minor, but it doesn't operate like a normal banner where you can place the cursor over any part of the image to click.

Over the years I have tried to put whole tables inside link code, but it's never worked:

<a href....><table><tr...</table></a>

If it worked it would certainly solve the problem.

Any ideas?

Thanks, Peter

[marek]

A block elemnt (e.g. table) cant't be inside an inline element like table. There is no need to put banners into a table. Do something like this:

<div class="bannerad">
<a ...><img ...><img ...></a>
</div>

and then style:

div.bannerad {
width: 999px;
}
div.bannerad a {
display: block;
}

[BlobFisk]

onclick is a valid attribute of the table element. See here [w3.org] at the W3C.

You could use the onclick event to fire a document.location.href change.

CAVEAT: This will not be accessible to alternative browser media.

[Reid]

Maybe you could think outside the box a bit. (depending on what the gifs are for)

11111111111111222222
11111111111111

gif 1 is the link

[peterinwa]

BlobFisk, thanks and I have a couple follow-up questions:

1. By "This will not be accessible to alternative browser media." do you mean browsers that don't handle onClick in tables or don't handle JavaScript.

If it is just browsers that don't handle JavaScript, I will not care as my entire site runs on JavaScript and fails without it.

2. I don't want to change the current window to the new URL; I want to open a new window. So I suppose I would use onClick to call a function that does that.? Or can I use onClick directly to do an href to a new window?

Thanks, Peter

[BlobFisk]

Hi Peter,

1. By "This will not be accessible to alternative browser media." do you mean browsers that don't handle onClick in tables or don't handle JavaScript.

I was specifically referring to assistive technologies like text only browsers (eg Lynx) and screen readers (eg JAWS), used by people with visual difficulties. Although, people with Javascript turned off in their browsers (or browsers that don't handle Javascript) will not see this event.

If it is just browsers that don't handle JavaScript, I will not care as my entire site runs on JavaScript and fails without it.

This excludes certain groups of people from your site, but it's important to know your target audience and if you've determined that your audience all have Javascript then that is a reasonable business decision.

2. I don't want to change the current window to the new URL; I want to open a new window. So I suppose I would use onClick to call a function that does that.? Or can I use onClick directly to do an href to a new window?

In this case instead of using document.location.href you would use window.open.

HTH

[peterinwa]

Thanks again.

FYI I my site consists of calculators coded in JavaScript. I only know browser-side coding. That's why JavaScript is a must for my site.

Lastly, I got this all working then discovered something I don't like at all. onClick works fine for the table, but when you put the cursor over the table it doesn't turn into a hand or whatever to indicate that you are hovering over a link. This is not acceptable to me.

Thanks for all your help

[BlobFisk]

On the table you can use onmouseover to toggle the cursor:

onmouseover="document.getElementById('TABLEID').style.curor='pointer';"

HTH

[peterinwa]

Thanks!