Cells becoming hyperlinks

liunx · Jan 9, 2008

Hello, 
How do I make a cell link to another page when I click on it? (For example, I have a cell with no text. I want to be able to simply click on the cell and go to the HTML page of my choice)- before I used this in a frames page (coding below) but I no longer have frames and I just want the hyperlink to load in the same page (sorry if you can't understand that). 
 
<table border="1" borderColorDark="#000000" borderColorLight="#444444" cellSpacing="0" width="132" height="27"> 
<tr> 
<td bgcolor="#444444" style="color: #FFFFFF" onMouseOver="style.color='#FFFFFF'; style.backgroundColor='#992106';" onMouseOut="style.color='#FFFFFF'; style.backgroundColor='#444444';" onClick="parent.main.location.href='http://www.webdeveloper.com/forum/archive/index.php/staff.html'" target="main" height="12" width="122"><a href=http://www.webdeveloper.com/forum/archive/index.php/"staff.html" target="main">Staff</a></td> 
</tr> 
</table> 
 
 
Now, I don't even need to click on the text to go to the HTML page, but with no frames the "parent.main.location.href='http://www.webdeveloper.com/forum/archive/index.php/staff.html'" code seems to be a problem.

Please help! Thanks!This will only work if javascript is enabled: 
 
<table border="1"> 
<tr> 
<td onclick="window.location.href='http://www.w3c.org'">    </td> 
</tr> 
</table>Thanks it worked- I replaced the "parent.main.location.href" with "window.location.href". Thanks for your help!You're welcome...

Or you could just do this:<table border="1"> 
<tr> 
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3c.org">    </a></td> 
</tr> 
</table>Add a class to the link to hide the underline.And doing it that way would really be a better bet... Even if you don't have any text (like you [Rick_Garrison] said) you could add some  's to it to fake it...The beauty of a pure-HTML approach is that if users have JavaScript turned off, they are still able to use the link. I just want to know why users will be clicking on blank cells though?

I said that just to make the question simple- becuase in reality, thats all I needed- but take this for example: 
 
<table border="1" borderColorDark="#000000" borderColorLight="#444444" cellSpacing="0" width="132" height="27"> 
<tr> 
<td bgcolor="#444444" style="color: #FFFFFF" onMouseOver="style.color='#FFFFFF'; style.backgroundColor='#992106';" onMouseOut="style.color='#FFFFFF'; style.backgroundColor='#444444';" onClick="window.location.href='http://www.webdeveloper.com/forum/archive/index.php/right.html'" target="main" height="12" width="121"><a href=http://www.webdeveloper.com/forum/archive/index.php/"right.html">Latest 
News</a></td> 
</tr> 
</table> 
 
 
 
Now, sometimes, there is hardly any text in the box, and it gets annoying trying to click on the small amount of text, rather than just clicking anywhere in the cell (besides, thats just easier

)I would leave your regular link in there around your text (pointing to the same place as the onclick) so your pages work for those without javascript...I got the solution! Drum roll....<table border="1"> 
<tr> 
<td width="122"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3c.org"><div class="yeah">123</div></a></td> 
</tr> 
</table> 
Then put this in a separate stylesheet, or at the top of the file like so:<html> 
<head> 
<style> 
.yeah {width:122px; 
background-color:#fce; 
cursor:hand;} 
</style> 
</head>What I've done is put the text inside a div and made it as wide as the table cell. Then you can click anywhere in the cell!! 
 
The background colour is just to test it works. As you can see, the link itself is very small but now it doesn't matter! 
 
I also had to add "cursor:hand" because IE6 doesn't show the normal cursor for a link otherwise. 
 
So there you go. And no javascript needed!is that valid? 
 
7.5.3 of html 4.01 states 
 
Content model 
Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements. 
 
Is this a general case or not? 
Guess Charles will know!Why are we debating what's valid when the guy is using deprecated tags like FONT and inline styles instead of CSS anyway?

Divs can be inline too. Just add "display:inline;". I was going to do it, but it worked without that.oh all right then... LOLWell, isn't this just fine (the text inside ther cell is just a normal hyperlink

): 
 
<table border="1" borderColorDark="#000000" borderColorLight="#444444" cellSpacing="0" width="132" height="27"> 
<tr> 
<td bgcolor="#444444" style="color: #FFFFFF" onMouseOver="style.color='#FFFFFF'; style.backgroundColor='#992106';" onMouseOut="style.color='#FFFFFF'; style.backgroundColor='#444444';" onClick="window.location.href='http://www.webdeveloper.com/forum/archive/index.php/right.html'" height="12" width="121"><a href=http://www.webdeveloper.com/forum/archive/index.php/"right.html">Latest 
News</a></td> 
</tr> 
</table>I would think that would be ok...Why add an extra div inside the anchor

CSS: 
 
td a 
{ display: block; 
width: 200px; 
height: 100px; 
/* or whatever the size of the cell is */ 
}Or this works too:td a 
{display: inline; 
width: 200px;}

Cells becoming hyperlinks

liunx

Guest