...

View Full Version : How to make a whole TD a hyperlink without JavaScript?



ze0nyx
02-09-2005, 08:25 AM
I have a table and some cells in it. I want to click anywhere in the cell and it to work like a hyperlink. But without JavaScript's events. How do I do such a thing?

Capono
02-09-2005, 08:53 AM
You can make a table active like
<a href="#"><table><tr><td>&nbsp;</td></tr></table></a>. So now you can put such a table in a tablecell. It's not very nice coding, but it works.

ronaldb66
02-09-2005, 10:54 AM
Very bad coding, actually; an a element isn't supposed to contain anything but inline content, which rules out a complete table instantly.

Without a look at the actual markup and styles it remains guesswork, but if you have a link inside a table cell, you can make it display as a block level element with a style rule so it fills up the table cell, making it "hot" from side to side and top to bottom.
If you want to have multiple cells link to the same place however, you either need multiple links or you're stuck with script.

For more detail, more information is required.

coothead
02-09-2005, 02:56 PM
Hi there ze0nyx,

I believe that you require something like this example...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>javascript free td link</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
body {
background:#fef;
}
#container {
width:415px;
margin:50px auto;
}
#tbl {
border:solid 1px #666;
background:#fff;
}
.cell {
width:200px;
height:50px;
border:solid 1px #666;
}
a.goog {
display:block;
width:200px;
height:50px;
background:#99c;
text-align:center;
text-decoration:none;
padding-top:5px;
font-family:arial;
font-size:16px;
color:#669;
}
a.goog:hover {
background:#669;
color:#99c;
}
/*//]]>*/
</style>

</head>
<body>

<div id="container">
<table id="tbl"><tr>
<td class="cell">
<a class="goog"href="http://www.google.com"> click the whole cell for google</a>
</td>
<td class="cell">
<a class="goog"href="http://www.google.com"> click the whole cell for google</a>
</td>
</tr><tr>
<td class="cell">
<a class="goog"href="http://www.google.com"> click the whole cell for google</a>
</td>
<td class="cell">
<a class="goog"href="http://www.google.com"> click the whole cell for google</a>
</td>
</tr></table>
</div>

</body>
</html>

coothead

ze0nyx
02-09-2005, 06:38 PM
Thank you, coothead. The only thing I had to do was to set the width property of the link to 100% :) .



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum