| Make a table cell a link?
|
wickedthoughtz
msg:570090 | 5:08 pm on Jul 15, 2005 (gmt 0) |
Does anyone know of any way to make an entire cell be a link, and not just the content inside of it? I'd like a cell with some text inside of it to be a link (without it being an image), but for the entire cell area to be the link.
Here is the code for an example cell:
<td colspan="9" valign="top" bgcolor="#CCCCCC"><div align="center"><strong>PUBLIC SECTOR <br>
Technical Services</strong><br>
(more info)</div></td> Any help is appreciated. Thanks so much.
|
Trace
msg:570091 | 5:19 pm on Jul 15, 2005 (gmt 0) |
<td colspan="9" valign="top" bgcolor="#CCCCCC" align="center" onClick="document.location.href='http://www.google.com';"><strong>PUBLIC SECTOR <br>
Technical Services</strong><br>
(more info)</td> That should do the trick.
|
Trace
msg:570092 | 5:23 pm on Jul 15, 2005 (gmt 0) |
After trying it myself I noticed a little something; it does in fact work, but you wouldn't know it was a link unless you clicked. You'll need to change the cursor and here is how you do it. <td colspan="9" valign="top" bgcolor="#CCCCCC" align="center" onClick="document.location.href='http://www.google.com';" style="cursor:pointer;cursor:hand"><strong>PUBLIC SECTOR <br>
Technical Services</strong><br>
(more info)</td> Hope that helps.
|
birdbrain
msg:570093 | 6:11 pm on Jul 15, 2005 (gmt 0) |
Hi there wickedthoughtz, you may find this of interest, no javascript required. ;)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224">
<html>
<head>
<title>td link</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#table1 {
border:1px solid #000;
}
#table1 td {
background-color:#ccc;
border:1px solid #000;
}
a#link {
display:block;
width:100%;
height:100%;
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
color:#666;
text-decoration:none;
}
a#link #span1 {
display:block;
padding:10px;
text-decoration:underline;
}
a#link #span2 {
display:block;
padding:10px;
}
a#link:hover {
background-color:#666;
color:#ccc;
}
//-->
</style>
</head>
<body>
<table id="table1">
<tr>
<td >
<a id="link" href="http://www.webmasterworld.com/forum21/10629.htm">
<span id="span1">
PUBLIC SECTOR
</span>
<span id="span2">
<strong>Technical Services</strong><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br>
Praesent blandit venenatis purus. Integer massa libero, <br>
vehicula id, consequat sed, tincidunt nec, purus. Class <br>
aptent taciti sociosqu ad litora torquent per conubia nostra,<br>
per inceptos hymenaeos. Suspendisse potenti.
</span>
</a>
</td>
</tr>
</table>
</body>
</html> |
|
birdbrain
|
birdbrain
msg:570094 | 6:28 pm on Jul 15, 2005 (gmt 0) |
Hi there Trace, you do not actually need...
style="cursor:pointer;cursor:hand"
|
|
...you will find that...
...will surfice. ;) birdbrain
|
benni_203
msg:570095 | 12:49 pm on Jul 18, 2005 (gmt 0) |
Hi, I was looking for somthing like that for a while, too. Just included your suggestions in my website. Thanks Guys! Benni
|
|
|
