Table Cell As A Link

Hi,
I have a table with each cell set to highlight on mouseOver. How do I make an entire cell as a link?

Thanks
Seb
RythemRebelAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
dfu23Connect With a Mentor Commented:
alternate solution...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>td link hover</title>
<style type="text/css">
td.clickable {
    background: orange;
    color: red;
    cursor: pointer;
}
</style>
</head>
<body>
<table><tr>
<td onclick="location.href='somelink.htm';" onmouseover="this.className='clickable';" onmouseout="this.className='';">Click here</td></tr>
<tr>
<td onclick="location.href='somelink.htm';" onmouseover="this.className='clickable';" onmouseout="this.className='';">This link has a different style</td></tr>
</table>

<table><tr>
<td>This cell is not a link and does not have the "hand" pointer </td></tr>
</table>
</body>
</html>
0
 
D_M_DCommented:
Put your <a> tag before the <td> tag like this...

<table><tr>
<a href="somelink.asp"><td>Link Here</td></a>
</tr>
<a href="somelink.asp"><td>Link Here</td></a>
</tr></table>

--------
D_M_D
0
 
ZylochCommented:
To add on to D_M_D, you should define a class for A in your stylesheet like:

a.tablecell {color:blue;background-color:white;}
a.tablecell:link {color:blue;background-color:white;}
a.tablecell:hover {color:blue;background-color:black;}

etc.etc.

This should work better because if I remember correctly, IE only knows how to support hover on a hyperlink and not on a table cell.

--Zyloch
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
RythemRebelAuthor Commented:
D_M_D's answer works, but when I place the cursor over the cell, the hand doesn't appear untill you click on it.
0
 
DaydreamsCommented:
D-M_D is correct, I just added a hover to make that clear, and added cursor:pointer to the td:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>td link hover</title>
<style type="text/css">
td {border:1pt #000 solid;cursor:pointer;}
 a:link    {color:orange;text-decoration: none;}
 a:visited {color:green;text-decoration: none;}
 a:hover   {background-color:yellow;text-decoration: none;}
</style>
</head>
<body>
<table><tr>
<td><a href="somelink.html">Click here</a></td></tr>
<table
</body>
</html>
0
 
RythemRebelAuthor Commented:
That's what I need, thank you Daydreams. However, it applys the effect to all the cells on my webpage. I don't want this to happen. How would I apply the effect to specific cells.
0
 
DaydreamsCommented:
Hi RythemRebel,

You can apply a class to those links that you would like to change. In the example below I also added another table without the link styling. Also, I forgot to add "display:block;" to the links styles (so the entire cell is a clickable link). Here it is with that added:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>td link hover</title>
<style type="text/css">
td {border:1pt #000 solid;cursor:pointer;}
.nohand {cursor: default;}
a:link    {color:orange;text-decoration: none;display:block;}
a:visited {color:green;text-decoration: none;display:block;}
a:hover   {background-color:yellow;text-decoration:none;display:block;}

a.morestyle:link {color:red;}
a.morestyle:visited {color:green;}
a.morestyle:hover  {background-color:pink;}

</style>
</head>
<body>
<table><tr>
<td><a href="somelink.html">Click here</a></td></tr>
<tr>
<td><a class="morestyle" href="somelink.html">This link has a different style</a></td></tr>
</table>

<table><tr>
<td class="nohand">This cell is not a link and does not have the "hand" pointer </td></tr>
</table>
</body>
</html>
0
 
RythemRebelAuthor Commented:
I found dfu23's answer works best for me, thank you.

I'de also like to thank everyone else who helped me.
0
 
RythemRebelAuthor Commented:
Just thought I'de let you all know where and how I used this effect I required ^_^

http://www.djsilver.co.uk/index.htm
0
 
daverb70Commented:
I just found the following site which has quite a few different CSS menus/lists:

http://css.maxdesign.com.au/listamatic

the following seems to achieve your goals.

http://css.maxdesign.com.au/listamatic/experimental02.htm

I'd recommend using CSS rather than javascript which can cause problems.

Dave
0
 
StuartHarrisCommented:
A really simple way of doing this (And imho PROPERLY) in CSS is to do something along the lines of..

 (inside <head> tags)
<style type="text/css">
<!--
   td a.fullcell { width: 100%; height: 100%}
-->
</style>

(inside <td> tags)
<td><a class="fullcell" href="/some/link.html">Some Link</a></td>

the reason why i prepended td before the 'a.fullcell' above is INCASE you put that outside of the <td> tag.. it'd make a very large clickable area ;)
0
 
Ashley_04Commented:
Hi! This is so ASAP.  I have a sub procedure that writes html tags in an asp.net page but it's not working.  Really need help!  See my code below.

<script language="vb" runat="server">
 
Dim i As Integer =  0

Sub abc(ByVal a As Object, ByVal e As EventArgs)
      
i = i + 1
 
Response.Write("hell " + i.ToString())
writeBlankLine()
             
End Sub
 
</script>


Here's the HTML

<script runat=server>
sub writeBlankLine()
</script>

<table style="WIDTH: 992px; HEIGHT: 196px" cellSpacing="0" cellPadding="0" width="992" border="2" GRIDX="10" id="Trow1">
<tr>
<td>
<table cellSpacing="0" cellPadding="0" width="740" GRIDX="10">
<tr>
<td style="WIDTH: 29px">&nbsp;<asp:label id="Label38" runat="server" Width="56px">Item No</asp:label></td>
<td>&nbsp;<asp:label id="Label37" runat="server">Pieces</asp:label></td>
<td><asp:textbox id="TextBox18" runat="server" Width="104px"></asp:textbox></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;<asp:label id="Label39" runat="server">U/Meas</asp:label></td>
<td>&nbsp;<asp:textbox id="TextBox19" runat="server" Width="80px"></asp:textbox></td>
<td>&nbsp;&nbsp;&nbsp;
<asp:label id="Label40" runat="server" Width="64px">Unit Price</asp:label></td>
<td>&nbsp;
<asp:textbox id="TextBox22" runat="server" Width="136px"></asp:textbox></td>
</tr>
</table>
<script runat=server>
end sub
</script>
                        
0
 
dfu23Commented:
I believe the appropriate response to Ashley_04's comment is:

Ask this in a new question.
0
 
Ashley_04Commented:
Sorry.  =(
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.