Solved

Table Cell As A Link

Posted on 2004-04-28
14
3,925 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
 
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 100 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
Accessibility and Usability are two concepts that seem to be closely related.  But, too many people seem to have a distorted perception of them. During last five years, those two words have come to the day-to-day work of almost every web develope…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

867 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now