homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

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

HTML Forum

Table row highlight and link

 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 ]




 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


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.



 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">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<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; }
<tr class="grayrow">
<td><a href="google.com">Google</a></td>
<td><a href="example.com">Example</a></td>
<tr class="yellowrow">
<td><a href="google.com">Google</a></td>
<td><a href="example.com">Example</a></td>


 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>

Personally, I would not recommend it.


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.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved