?
Solved

Table Cell As A Link

Posted on 2004-04-28
14
Medium Priority
?
3,938 Views
Last Modified: 2010-05-18
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
0
Comment
Question by:RythemRebel
  • 4
  • 2
  • 2
  • +5
14 Comments
 
LVL 10

Expert Comment

by:D_M_D
ID: 10942787
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
 
LVL 36

Expert Comment

by:Zyloch
ID: 10943058
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
 

Author Comment

by:RythemRebel
ID: 10943261
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 15

Expert Comment

by:Daydreams
ID: 10943366
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
 

Author Comment

by:RythemRebel
ID: 10943934
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
 
LVL 15

Expert Comment

by:Daydreams
ID: 10944155
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
 
LVL 14

Accepted Solution

by:
dfu23 earned 400 total points
ID: 10944668
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
 

Author Comment

by:RythemRebel
ID: 10948237
I found dfu23's answer works best for me, thank you.

I'de also like to thank everyone else who helped me.
0
 

Author Comment

by:RythemRebel
ID: 10964969
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
 
LVL 1

Expert Comment

by:daverb70
ID: 11084515
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
 

Expert Comment

by:StuartHarris
ID: 11101328
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
 

Expert Comment

by:Ashley_04
ID: 11148544
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
 
LVL 14

Expert Comment

by:dfu23
ID: 11151448
I believe the appropriate response to Ashley_04's comment is:

Ask this in a new question.
0
 

Expert Comment

by:Ashley_04
ID: 11167570
Sorry.  =(
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses
Course of the Month9 days, 10 hours left to enroll

612 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question