Making entire table cell 'clickable'

liunx

Guest
Hi everyone,<br />
<br />
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"...<br />
<br />
<td bgcolor=white onmouseover="this.bgColor='#d3d3d3'" onmouseout="this.bgColor='white'"><br />
<a href=http://www.yahoo.com>Yahoo</a></td> <br />
<br />
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?<br />
<br />
Thanks in advance,<br />
Tom<!--content-->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.<br />
<br />
Thanks anyway...<br />
<br />
Tom<br />
:)<!--content-->Stop using TABLEs for layout.<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br />
"http://www.w3.org/TR/html4/strict.dtd"><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><br />
<meta name="Content-Script-Type" content="text/javascript"><br />
<title>Example</title><br />
<style type="text/css"><br />
<!-- <br />
#menu a {<br />
display:block; <br />
width:10em;<br />
margin:1ex;<br />
padding:0.5ex;<br />
text-align:center;<br />
}<br />
<br />
#menu a:link, #menu a:visited {<br />
text-decoration:none;<br />
background-color:#fff;<br />
color:#000;<br />
}<br />
<br />
#menu a:hover, a:active {<br />
text-decoration:none;<br />
background-color:#d3d3d3;<br />
color:#000;<br />
}<br />
<br />
.divider {display:none}<br />
--><br />
</style><br />
<div id="menu"><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"fee.html">Fee</a> <br />
<span class="divider">|</span><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"fie.html">Fie</a> <br />
<span class="divider">|</span><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"foe.html">Foe</a> <br />
<span class="divider">|</span><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"fum.html">Fum</a> <br />
</div><!--content-->Originally posted by TomWeinstock <br />
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.<br />
<br />
Thanks anyway...<br />
<br />
Tom<br />
:) That's invalid HTML.<!--content-->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. <br />
<br />
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.<br />
<br />
Tom<!--content-->Invalid code sometimes works in desktop browsers that are riddled with software bugs.<br />
<br />
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.<!--content-->If this is only for an intranet, and your firm is using javascript allready, why not just use JS to make the cell clickable.<br />
<br />
<td bgcolor=white onmouseover="this.bgColor='#d3d3d3'" onmouseout="this.bgColor='white'" onClick="window.location='http://www.yahoo.com'" Style="cursor:hand"><br />
Yahoo!</td><!--content-->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.<!--content-->
 
Back
Top