469,299 Members | 2,069 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,299 developers. It's quick & easy.

Making a whole table a link

Hi,
I want to make a whole table a link, so that clicking anywhere on it
takes you to another page. Unfortunately the way I initially thought of
doing this involved invalid html. I have tried a second valid way, but the
behaviour is not quite as good (at least not in firefox 1.5), with only the
actual text being links.

The examples of what I have tried can be found at

http://www.bytronic.com/tests/links.html

My question is - is there anything that can be added to the css of the
second example, to make it behave more like the whole table behaving as a
link? Would this be completely effective, or would I also need to add some
javascript?

Thanks in advance,

Martin

--
Martin Eyles
ma****@eyles.bytronic@com
try swapping dots and ats to email.
Jul 6 '06 #1
19 7592
"Martin Eyles" <ma**********@NOSPAMbytronic.comwrote:
I want to make a whole table a link, so that clicking anywhere on it
takes you to another page. Unfortunately the way I initially thought of
doing this involved invalid html.
Never mind validity for now, the problem here is more of a semantic and
UI nature. It's difficult to imagine how an entire table could be
semantically linked to another page or section. Additionally it would
likely cause users not to recognize such links.
>http://www.bytronic.com/tests/links.html
As per usual it's impossible to offer any meaningful advice if you don't
share what it is that you are actually trying to achieve. The bogus
content in the example doesn't allow us to see that.

--
Spartanicus
Jul 6 '06 #2

Martin Eyles wrote:
I want to make a whole table a link, so that clicking anywhere on it
takes you to another page.
You can't, at least if you want to use HTML links rather than JS, write
valid HTML, and expect to have it working everywhere. So instead you
need to use multiple <alinks, at least one in each <tdcell.
Boring, but basically simple.

Alternatively you can implement one (or more) through HTML links, then
add a JS link to the whole table through the relevant events. It
degrades without JS, but not unusably.

Jul 6 '06 #3
"Spartanicus" <in*****@invalid.invalidwrote in message
news:44********************************@4ax.com...
"Martin Eyles" <ma**********@NOSPAMbytronic.comwrote:
> I want to make a whole table a link, so that clicking anywhere on it
takes you to another page. Unfortunately the way I initially thought of
doing this involved invalid html.

Never mind validity for now, the problem here is more of a semantic and
UI nature. It's difficult to imagine how an entire table could be
semantically linked to another page or section. Additionally it would
likely cause users not to recognize such links.
>>http://www.bytronic.com/tests/links.html

As per usual it's impossible to offer any meaningful advice if you don't
share what it is that you are actually trying to achieve. The bogus
content in the example doesn't allow us to see that.
The table contains basic information about a machine, and there are several
machines laid out on the summary page. The target link will be a page with
more detailed information about the machine, which will include all the
table information and more. Therefore it will explain about the whole table,
which is why I felt the whole table should be a link.

Part of the reason for having the whole table clickable, even if I can't
code that semantic legally, is that I want it to be useable on touch screen
PCs, where a user might not accuratley press the centre of the table (and
thus where the second example might need several presses before the link is
followed).
Jul 6 '06 #4

<di*****@codesmiths.comwrote in message
news:11*********************@m79g2000cwm.googlegro ups.com...
>
Martin Eyles wrote:
> I want to make a whole table a link, so that clicking anywhere on it
takes you to another page.

You can't, at least if you want to use HTML links rather than JS, write
valid HTML, and expect to have it working everywhere. So instead you
need to use multiple <alinks, at least one in each <tdcell.
Boring, but basically simple.
This is what I do in the second example The problem is, that only the middle
bit of the table cell (ie. the bit with the text) is the link, not the
entire cell. If the entire cell were clickable, then the only problem would
be the borders between cells, and this would be more useable.
Alternatively you can implement one (or more) through HTML links, then
add a JS link to the whole table through the relevant events. It
degrades without JS, but not unusably.
Yes, I could do that to cover any "gaps" in the link area, but I want to get
as close to this without JS first. If I've already acheived this as well as
possible then fine. I'm just hoping I missed something.

Thanks,
Martin
Jul 6 '06 #5
Martin Eyles wrote:
I want to make a whole table a link, so that clicking anywhere on it
takes you to another page.
Just a thought: Create a transparent div with the table's dimensions and
link the div (or its contents, maybe a transparent graphic) to the new
page. Place the div over the table.

Or create a <mapelement with areas over the tables. Place it over the
page.

Since you are creating a touch-screen thing, I guess you know the
dimensions and probably the absolute positions.

- Daniel
Jul 6 '06 #6
Martin Eyles wrote:
>
The table contains basic information about a machine, and there are several
machines laid out on the summary page. The target link will be a page with
more detailed information about the machine, which will include all the
table information and more. Therefore it will explain about the whole table,
which is why I felt the whole table should be a link.

Part of the reason for having the whole table clickable, even if I can't
code that semantic legally, is that I want it to be useable on touch screen
PCs, where a user might not accuratley press the centre of the table (and
thus where the second example might need several presses before the link is
followed).
The best way to do that is to have a traditional link ("More details
about part XX3829") above or below or next to each table. Question: how
would users know to click (or touch) a table to get more information?
They know what links look like. They don't expect clicking a table to do
anything.
Jul 6 '06 #7
Martin Eyles wrote:
Hi,
I want to make a whole table a link, so that clicking anywhere on it
takes you to another page. Unfortunately the way I initially thought of
doing this involved invalid html. I have tried a second valid way, but the
behaviour is not quite as good (at least not in firefox 1.5), with only the
actual text being links.
I'd have said go with the working invalid html, but it's not working -
it's a mess in ie6/xp, mis-positioned and while hovering (sometimes)
shows you where you'll go, actually clicking does nothing.

So - not sure - perhaps a transparent gif positioned over the table, and
clickable ? But that would probably stop tooltips working within.

Probably best is js, with a <noscript><a ...>Click here for more
information about</a></noscriptpositioned below the table, or similar.

Chris
Jul 6 '06 #8
Martin Eyles wrote:
Part of the reason for having the whole table clickable, even if I can't
code that semantic legally, is that I want it to be useable on touch screen
PCs,
Important question: What control do you have over the screens (browser,
viewport etc) that are going to be touched? Are they part of the
inventory in a lobby in an entreprise or something?

You should probably go for two versions: touch screen and click screen.

- Daniel
Jul 6 '06 #9
Harlan Messinger wrote:
Question: how
would users know to click (or touch) a table to get more information?
They know what links look like. They don't expect clicking a table to do
anything.

If you take a look at the site http://www.bytronic.com/ and, e.g.,
http://www.bytronic.com/products.html, you will see right away where you
can and should click. And those are obviously buttons with finger tips
in mind (not only mouse).

So if a table has, e.g., a thick blue border, and the rest of the page
is designed with finger tips in mind, AND the user is standing in front
of a touch screen, I'd have to agree with Martin and say that a linked
table would in fact be an intuitive thing to write. Then a clicked table
would obviously be expected to do anything.

- Daniel
Jul 6 '06 #10
"Martin Eyles" <ma**********@NOSPAMbytronic.comwrote:
>>>http://www.bytronic.com/tests/links.html

As per usual it's impossible to offer any meaningful advice if you don't
share what it is that you are actually trying to achieve. The bogus
content in the example doesn't allow us to see that.

The table contains basic information about a machine, and there are several
machines laid out on the summary page. The target link will be a page with
more detailed information about the machine, which will include all the
table information and more. Therefore it will explain about the whole table,
which is why I felt the whole table should be a link.
That doesn't go anywhere near to explaining what it is that you are
actually trying to do. An URL to a page with real content is needed.

--
Spartanicus
Jul 6 '06 #11

"Daniel Jung" <ju**@uib.nowrote in message
news:44********@news.broadpark.no...
Harlan Messinger wrote:
>Question: how would users know to click (or touch) a table to get more
information? They know what links look like. They don't expect clicking a
table to do anything.
Many of the user of this system (mainly those using touch screens) will be
used to pressing on what looks like tables for more data in another system.
For those that aren't (mainly any desktop users) though, I might put in
instructions that explain where to click. Alternitivley, I may employ the
method suggested below
If you take a look at the site http://www.bytronic.com/ and, e.g.,
http://www.bytronic.com/products.html, you will see right away where you
can and should click. And those are obviously buttons with finger tips in
mind (not only mouse).

So if a table has, e.g., a thick blue border,
Thanks, may use this in some places. A blue underline on the caption, and a
blue border round the table (much the way it is done with pictures) should
help the desktop users.
and the rest of the page is designed with finger tips in mind, AND the
user is standing in front of a touch screen, I'd have to agree with Martin
and say that a linked table would in fact be an intuitive thing to write.
Then a clicked table would obviously be expected to do anything.
Thanks for "getting" what I'm trying to acheive.

Martin
Jul 6 '06 #12

"Daniel Jung" <ju**@uib.nowrote in message
news:44********@news.broadpark.no...
Martin Eyles wrote:
>Part of the reason for having the whole table clickable, even if I can't
code that semantic legally, is that I want it to be useable on touch
screen PCs,

Important question: What control do you have over the screens (browser,
viewport etc) that are going to be touched? Are they part of the inventory
in a lobby in an entreprise or something?
Grubby factory floor for some, nice offices for others, but running the same
system.
You should probably go for two versions: touch screen and click screen.
Yes, I may well do this. Starting with the touch screen stuff first, but I
will tweak for the desktop later.

Martin
Jul 6 '06 #13
"Spartanicus" <in*****@invalid.invalidwrote in message
news:28********************************@4ax.com...
"Martin Eyles" <ma**********@NOSPAMbytronic.comwrote:
>>>>http://www.bytronic.com/tests/links.html

As per usual it's impossible to offer any meaningful advice if you don't
share what it is that you are actually trying to achieve. The bogus
content in the example doesn't allow us to see that.

The table contains basic information about a machine, and there are
several
machines laid out on the summary page. The target link will be a page with
more detailed information about the machine, which will include all the
table information and more. Therefore it will explain about the whole
table,
which is why I felt the whole table should be a link.

That doesn't go anywhere near to explaining what it is that you are
actually trying to do. An URL to a page with real content is needed.
I've explained as best I can. I don't really have full content to give at
the moment for this project. I think though some others have more idea what
I want, so I'll use that to get it working. Thanks for trying to dig out
exactly what I'm trying to do - it has been useful to clarify things.

Martin
Jul 6 '06 #14

"Daniel Jung" <ju**@uib.nowrote in message
news:44********@news.broadpark.no...
Martin Eyles wrote:
> I want to make a whole table a link, so that clicking anywhere on it
takes you to another page.

Just a thought: Create a transparent div with the table's dimensions and
link the div (or its contents, maybe a transparent graphic) to the new
page. Place the div over the table.
Like this idea. I've updated the page
(http://www.bytronic.com/tests/links.html) with a third version. It's
slightly modified from this, but I think is quite neat. It works great in
firefox, but there's still an issue with internet explorer 6 (it needs to
work in this for the touchscreen PCs). The link is hiding behind the table
in IE. Any idea how to bring it in front of the table (I tried with z-index,
but failed - could have been z-indexing in the wrong way though.).
Or create a <mapelement with areas over the tables. Place it over the
page.

Since you are creating a touch-screen thing, I guess you know the
dimensions and probably the absolute positions.
Would probably work, but I think a bit fiddly, so I'll use the other idea
you suggested.

Thanks,
Martin
Jul 6 '06 #15

"Chris Sharman" <ch***********@sorry.nospamwrote in message
news:e8*******************@news.demon.co.uk...
Martin Eyles wrote:
>Hi,
I want to make a whole table a link, so that clicking anywhere on it
takes you to another page. Unfortunately the way I initially thought of
doing this involved invalid html. I have tried a second valid way, but
the behaviour is not quite as good (at least not in firefox 1.5), with
only the actual text being links.

I'd have said go with the working invalid html, but it's not working -
it's a mess in ie6/xp, mis-positioned and while hovering (sometimes) shows
you where you'll go, actually clicking does nothing.
Works in firefox 1.5, but you're right, not in IE6. That is a problem, but
hopefully the third version will work.
So - not sure - perhaps a transparent gif positioned over the table, and
clickable ? But that would probably stop tooltips working within.
Aren't any tooltips to show, so not a problem. Tried a variation on this -
see my other replies.
Probably best is js, with a <noscript><a ...>Click here for more
information about</a></noscriptpositioned below the table, or similar.
This is a last resort method. I'll consider, but only if I can't find a
better way

Thanks,
Martin
Jul 6 '06 #16
Deciding to do something for the good of humanity, Martin Eyles
<ma**********@NOSPAMbytronic.comdeclared in
comp.infosystems.www.authoring.stylesheets:
http://www.bytronic.com/tests/links.html

My question is - is there anything that can be added to the css of the
second example, to make it behave more like the whole table behaving as a
link?
#div2 a {display: block; width: 100%;} appears to do the trick in FF1.5
and IE6 - the only downside is that the borders between cells aren't
links. I haven't checked other browsers.

--
Mark Parnell
My Usenet is improved; yours could be too:
http://blinkynet.net/comp/uip5.html
Jul 6 '06 #17
Daniel Jung wrote:
Harlan Messinger wrote:
>Question: how would users know to click (or touch) a table to get more
information? They know what links look like. They don't expect
clicking a table to do anything.


If you take a look at the site http://www.bytronic.com/ and, e.g.,
http://www.bytronic.com/products.html, you will see right away where you
can and should click.
Right, there is text that says "Click here". It wasn't until the second
time I looked that I realized you might be referring to the images, and
only then did I discover that they too were clickable. I don't see why
you feel that a page that has text links that say "Click here"
demonstrates that users will know to click tables on a page that doesn't
have those.

And those are obviously buttons with finger tips
in mind (not only mouse).

So if a table has, e.g., a thick blue border, and the rest of the page
is designed with finger tips in mind, AND the user is standing in front
of a touch screen, I'd have to agree with Martin and say that a linked
table would in fact be an intuitive thing to write. Then a clicked table
would obviously be expected to do anything.
I've never seen a table on a web page that I thought ought to be
clicked. If I did think so, then I'd be spending an awful lot of time
clicking tables that aren't linked, wouldn't I, considering that tables
generally aren't linked.
Jul 7 '06 #18

"Harlan Messinger" <hm*******************@comcast.netwrote in message
news:4h*************@individual.net...
Daniel Jung wrote:
>Harlan Messinger wrote:
>>Question: how would users know to click (or touch) a table to get more
information? They know what links look like. They don't expect clicking
a table to do anything.


If you take a look at the site http://www.bytronic.com/ and, e.g.,
http://www.bytronic.com/products.html, you will see right away where you
can and should click.

Right, there is text that says "Click here". It wasn't until the second
time I looked that I realized you might be referring to the images, and
only then did I discover that they too were clickable. I don't see why you
feel that a page that has text links that say "Click here" demonstrates
that users will know to click tables on a page that doesn't have those.
This page with the images isn't part of my particular query (if you look at
the original post). Nevertheless, thanks for your comment.
>And those are obviously buttons with finger tips
in mind (not only mouse).

So if a table has, e.g., a thick blue border, and the rest of the page is
designed with finger tips in mind, AND the user is standing in front of a
touch screen, I'd have to agree with Martin and say that a linked table
would in fact be an intuitive thing to write. Then a clicked table would
obviously be expected to do anything.

I've never seen a table on a web page that I thought ought to be clicked.
If I did think so, then I'd be spending an awful lot of time clicking
tables that aren't linked, wouldn't I, considering that tables generally
aren't linked.
Re: the tables. I have a user base that _will_ be used to clicking tables
(using touch screens). I think making the caption look like a link should
help new user with different expectations (who will be using desktops, and
thus be able to click on this text).
Jul 10 '06 #19

"Mark Parnell" <we*******@clarkecomputers.com.auwrote in message
news:1s****************@markparnell.com.au...
Deciding to do something for the good of humanity, Martin Eyles
<ma**********@NOSPAMbytronic.comdeclared in
comp.infosystems.www.authoring.stylesheets:
>http://www.bytronic.com/tests/links.html

My question is - is there anything that can be added to the css of the
second example, to make it behave more like the whole table behaving as a
link?

#div2 a {display: block; width: 100%;} appears to do the trick in FF1.5
and IE6 - the only downside is that the borders between cells aren't
links. I haven't checked other browsers.
Thanks,
that now gives me two options. I'll tweak and see which one works best
for me.
Jul 10 '06 #20

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by |-|erc | last post: by
13 posts views Thread by Ben Sharvy | last post: by
3 posts views Thread by Thomas Mlynarczyk | last post: by
8 posts views Thread by Nicolás Lichtmaier | last post: by
7 posts views Thread by Sens Fan Happy In OH | last post: by
3 posts views Thread by Sandy Bremmer | last post: by
reply views Thread by suresh191 | last post: by
1 post views Thread by Geralt96 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.