1. Home
  2. Forums Index
  3. Browser Side / HTML 7:11 am May 1, 2026

Forum Moderators: open

Message Too Old, No Replies

link with preview

=link around table?

         

Skier88

6:37 pm on Dec 5, 2010 (gmt 0)

10+ Year Member



I have a page that turns up a list of results, which I would like to display as a link to the page along with a short preview of several parts of the page. The format that makes the most sense to me is using a table, where the first column (width:40%;) contains the name, the second (width:30%;) stats 1 and 2, and the third (width:30%;) stats 3 and 4, with the entire table being two lines high plus padding/margins. There's no problem if I only want the title to link to the page, but since the consecutive tables (maybe 20 clearly separated 2-line results per page) create a row-like effect I want the user to be able to click anywhere on the table.

Wrapping a table or row in <a> validates only in html5, which means most older browsers have a problem with it. Putting the table in a button works, but doesn't have link functionality. Replacing the table with styled divs also doesn't validate before html5. Replacing the table with styled spans (float:left; and width/height/padding) works in most browsers and validates for the html versions I've tested, but IE decided not to support it. I don't want to use javascript because that breaks browser functionality.

I'm running out of ideas ... I'm about to just link the title and use javascript to link the table if the browser supports it. Does anybody have any other ideas?

[edited by: tedster at 7:28 pm (utc) on Dec 5, 2010]
[edit reason] turned off graphic smile faces [/edit]

tedster

7:32 pm on Dec 5, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The reason the HTML 5 allows that kind of anchor tag is that most browsers have supported that kind of mark-up for a long time. The did this because many web authors write their mark-up that way - even though it didn't validate. So HTML 5 just makes it official.

I'd say just use the HTML 5 doctype and wrap the row inside an anchor element.

Skier88

12:51 am on Dec 6, 2010 (gmt 0)

10+ Year Member



Thanks for your input - I agree that it's good enough if it only works on reasonably recent browsers, although I do try to use more compatible methods where possible. The problem is, when each row is its own table surrounded by an anchor even the latest version of IE (for XP) won't let you follow the link. It makes it the correct size, but when you click on it the table blocks your cursor. And putting anchors around rows doesn't validate anywhere and after a few minutes I haven't been able to get it to work with my styling, although the latter could probably be fixed.

I'm also thinking I could put links in every cell, but I'd like to avoid feeding the browser one piece of information five times.

tedster

1:29 am on Dec 6, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



That should teach me - I posted advice without actually checking to see how IE handles the mark-up. Sorry. Yes, looks like the best you're going to get is using JavaScript.

kaled

1:31 am on Dec 7, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Replacing the table with styled spans (float:left; and width/height/padding) works in most browsers and validates for the html versions I've tested, but IE decided not to support it.

I had a play and IE8, Opera 11 and Firefox 3.5 seem happy with this approach (unless I misunderstood your requirements).

Kaled. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test Page</title>

<style type="text/css">
a.table_links   { text-decoration:none }
a.table_links:hover { background-color:yellow }
a.table_links span { background-color:inherit; display:block; float:left}
a.table_links span.h { width:100%; text-align:center; padding-top:8px; font:bold 20px Sans-Serif }
a.table_links span.c1 { width:40% }
a.table_links span.c2 { width:30% }
a.table_links span.c3 { width:30% }
</style>

</head>

<body>

<div>
Some Text<br>
<br>
</div>

<div style="width:30%">
<a href="target.html" class="table_links">
<span class="c1">Do I</span>
<span class="c2">win a</span>
<span class="c3">prize</span></a>
 
<a href="target2.html" class="table_links">
<span class="h">Link Title</span>
<span class="c1">Or</span>
<span class="c2">merely</span>
<span class="c3">admiration</span></a>
</div>

<div style="clear:left; background-color:silver"> <!-- may need to use clear:both in some circumstances -->
<br>
<br>
Some More text
</div>

</body>
</html>

Skier88

6:26 am on Dec 9, 2010 (gmt 0)

10+ Year Member



lol ... merely admiration, with gratitude on the side. But a limited quantity, because that doesn't actually solve the entire problem as it doesn't work in IE7 (I should really try for 6 too, but my site is already a mess in that browser). However, your design made me realize I can definitely expand that idea further, and now I've got new code, partially based on yours, that works with all modern browsers and back through IE7, with two minor bugs: the "table"'s padding isn't part of the link, and IE opens the wrong context menu. I think I can live with it for now, although I still hope to hear from somebody with a better method.

Here's my new code - it's a bit puffed up to allow for an outline in IE7, a single background image, and the specific cell format I described in the OP. 


<!doctype html>
<html>
<head>
<title>I don't know why I want this to validate</title>
<style type='text/css'>
#results>div {border:2px solid #eee;}
#results>div:hover {border-color:#0689d4;}
#results>div:hover * {cursor:pointer;} /*IE7*/
#results a {color:black; text-decoration:none;}
#results h2 {position:relative; bottom:2px;}
#results a>span {display:block; float:left; width:30%; height:50%;}
#results a>span:first-child {width:40%; height:100%;}
</style>
</head>
<body>

<div id='results'>
<div><div><a href='/light:%s'>
<span><h2>title</h2></span>
<span>stat1</span>
<span>stat2</span>
<span>stat3</span>
<span>stat4</span>
</a></div></div>

<div><div><a href='/light:%s'>
<span><h2>title</h2></span>
<span>stat1</span>
<span>stat2</span>
<span>stat3</span>
<span>stat4</span>
</a></div></div>

<div><div><a href='/light:%s'>
<span><h2>title</h2></span>
<span>stat1</span>
<span>stat2</span>
<span>stat3</span>
<span>stat4</span>
</a></div></div>
</div>

</body>
</html>
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / HTML 7:11 am May 1, 2026