homepage Welcome to WebmasterWorld Guest from 50.17.107.233
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Table row highlight and link
hcuypers




msg:4414332
 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




msg:4414349
 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




msg:4414735
 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




msg:4414745
 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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved