PDA

Click to See Complete Forum and Search --> : Making entire table cell 'clickable'

BrainDonor
06-26-2003, 04:16 PM
Hi everyone,

I am wondering if it's possible to have an entire table cell be clickable and act as a hyperlink. Here's one of my "TD's"...

<td bgcolor=white onmouseover="this.bgColor='#d3d3d3'" onmouseout="this.bgColor='white'">
<a href=http://www.yahoo.com>Yahoo</a></td>

So, when you mouseover, it turns the whole cell light gray. I'd also like to make the whole cell work as the hyperlink, not just the <A> part. Is this possible?

Thanks in advance,
Tom
BrainDonor
06-26-2003, 04:31 PM
I feel like a lame-o now. Never mind...was able to figure this out pretty easily. I had to remove my head from my butt...err...I mean the "A" tag from inside the <td> and wrap it around the <td> instead.

Thanks anyway...

Tom
:)
Charles
06-26-2003, 04:32 PM
Stop using TABLEs for layout.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>
<style type="text/css">
<!--
#menu a {
display:block;
width:10em;
margin:1ex;
padding:0.5ex;
text-align:center;
}

#menu a:link, #menu a:visited {
text-decoration:none;
background-color:#fff;
color:#000;
}

#menu a:hover, a:active {
text-decoration:none;
background-color:#d3d3d3;
color:#000;
}

.divider {display:none}
-->
</style>
<div id="menu">
<a href="fee.html">Fee</a>
<span class="divider">|</span>
<a href="fie.html">Fie</a>
<span class="divider">|</span>
<a href="foe.html">Foe</a>
<span class="divider">|</span>
<a href="fum.html">Fum</a>
</div>
Charles
06-26-2003, 04:34 PM
Originally posted by TomWeinstock
I feel like a lame-o now. Never mind...was able to figure this out pretty easily. I had to remove my head from my butt...err...I mean the "A" tag from inside the <td> and wrap it around the <td> instead.

Thanks anyway...

Tom
:) That's invalid HTML.
BrainDonor
06-26-2003, 04:48 PM
Thanks for the replies Charles. I think for my puroses, using tables for layout is just fine. We're an IE only firm and the tables are just displaying some financial info.

Also, if it's invalid code, then you wouldn't think it would work, right? Well, it does. I added a style attribute to the td to change the cursor to a hand so the user will see that the <td> is clickable.

Tom
Robert Wellock
06-27-2003, 07:47 AM
Invalid code sometimes works in desktop browsers that are riddled with software bugs.

Furthermore the anchor element is an inline element and cannot legally enclose a table division - it may work in Micro$oft IE though the syntax is still wrong.
hastx
06-27-2003, 08:53 AM
If this is only for an intranet, and your firm is using javascript allready, why not just use JS to make the cell clickable.

<td bgcolor=white onmouseover="this.bgColor='#d3d3d3'" onmouseout="this.bgColor='white'" onClick="window.location='http://www.yahoo.com'" Style="cursor:hand">
Yahoo!</td>
David Harrison
06-27-2003, 01:42 PM
Or, he could set the cellpadding to 0 and make the link the same size as the table cell so as to give the appearence that it's is the cell that is being clicked.