Table row highlight and link

Forum Moderators: open

Message Too Old, No Replies

Table row highlight and link

hcuypers

11:03 pm on Feb 4, 2012 (gmt 0)

I've found an old post about highligh a table row and create a link.
However, it not clear where to add which code.
Old post --> [webmasterworld.com ]

Exaple of request --> [homegate.ch ]

Hans

lucy24

12:40 am on Feb 5, 2012 (gmt 0)

I hope when you said "table row" you meant "table cell" because that's what the original thread was about. You wouldn't be able to do it for a whole row-- at least not if you want the page to validate ;) --because once you are in a table, everything has to be inside a cell.

However, it not clear where to add which code.

Birdbrain's post in that thread lays it out pretty clearly. You can ignore most of the CSS; it doesn't apply to the link itself. The :hover section is useful as a diagnostic. It shows you where the active link is without having to follow the link.

The key part is

{width:100%;
height:100%;}

This means-- or should mean-- that the link uses the entire width and height of the cell. The cell content then goes inside the <a> tags. Again, this means the content cannot contain any block-level elements or the validator will scream at you. Only spans.

Now the bad news: The posted code works because the table contains only one cell, which therefore contains no unused space. It's only as wide and tall as its own text. If you add a second cell and pack in some content so it is taller than the first cell, you will see that only the content of the first cell acts as a link. I tried it in six browsers, plus the text editor's html preview, and it doesn't work in any of them.

:(

rocknbil

4:45 pm on Feb 6, 2012 (gmt 0)

Note BirdBrain's advice in that thread. It's a really bad idea to make an element that is not a natural navigation element a link. It fails without Javascript.

Use anchors. The highlighting part is easy.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01  
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 <title>Untitled</title> 
 <style type="text/css"> 
 body { font family:arial, helvetica, sans-serif; text-align: center; } 
 table { width: 50%; margin: auto; } 
 .grayrow:hover { background-color:#c0c0c0; } 
 .yellowrow:hover { background-color: #ffff00; } 
 </style> 
</head> 
<body> 
<table> 
 <tr class="grayrow"> 
 <td><a href="google.com">Google</a></td> 
 <td><a href="example.com">Example</a></td> 
 </tr> 
 <tr class="yellowrow"> 
 <td><a href="google.com">Google</a></td> 
 <td><a href="example.com">Example</a></td> 
 </tr> 
</table> 
</body> 
</html>

Marshall

5:09 pm on Feb 6, 2012 (gmt 0)

Having looked at the link you provided, the pages use a combination of CSS for the hover effect and a JavaScript with an onclick event for the link. Each <tr> and <td> within the <tr> have the same link, thus the link is repeated 5 times per row: once for the <tr> and 4 times for the <td>'s. IMO, this is rather redundant coding. Using this method, I believe you could probably just assign the link to the <tr> rather than repeating it in every <td>. However, I did notice in the <td>'s they do have a normal href which I assume is a precaution in case JavaScript is disabled.

How they are doing it:
<tr onclick="callDetailPage('LINK-A')">
<td><a href="LINK-A" onclick="callDetailPage('LINK-A')"></td>
<td><a href="LINK-A" onclick="callDetailPage('LINK-A')"></td>
<td><a href="LINK-A" onclick="callDetailPage('LINK-A')"></td>
<td><a href="LINK-A" onclick="callDetailPage('LINK-A')"></td>
</tr>

Personally, I would not recommend it.

Marshall