How can I link entire table cell?

[michael]

Anyone knows if it is possible to make the complete area of a table cell a
link onmousover or by hover?
In other words, I'd like to link, not only the text within the cell, but
the entire cell as well as the text within, to bla.html:

<table>
<tr><td> <br><br><a href="bla.html">bla</a><br><br> </td></tr>
</table>

How could this be done in pure HTML/CSS or/and with help of Javascript?

And what's the most backward compatible way vs. the proper CSS way?

Many thanks for any tips!

michael

Naeser's Law:
You can make it foolproof, but you can't make it
damnfoolproof.

[Knud Gert Ellentoft]

michael skrev:

Anyone knows if it is possible to make the complete area of a table cell a
link onmousover or by hover?
In other words, I'd like to link, not only the text within the cell, but
the entire cell as well as the text within, to bla.html:

a.link {display: block; width: 100%}
--
Knud

[michael]

> a.link {display: block; width: 100%}

Thanks for the tip! Could you however make it a functional example based on
the below:

<table>
<tr><td> <br><br><a href="bla.html">bla</a><br><br> </td></tr>
</table>

Thanks again!
michael

"Deliver yesterday, code today, think tomorrow."

[Neal]

On Thu, 9 Sep 2004 19:21:55 +0200, michael <no****@example.com> wrote:

a.link {display: block; width: 100%}

Who wrote this? Please attribute.

I'd style a alone rather than the pseudoclass. I reserve .link .visited
..hover and .active for things which I want to change when these states
exist.
Thanks for the tip! Could you however make it a functional example based
on
the below:

<table>
<tr><td> <br><br><a href="bla.html">bla</a><br><br> </td></tr>
</table>

Don't use <br> so much. Only when you need to break a line
in the middle
like this.

a {display: block; width: 100%; margin: 2em auto;}

<table>
<tr><td><a href="bla.html">bla</a></td></tr>
</table>

[David Dorward]

michael wrote:

Anyone knows if it is possible to make the complete area of a table cell a
link onmousover or by hover?

Most people who wish to do this are using the a single column or row table
as a menu. This is not tabular data, this is list data. Try:

<http://css.maxdesign.com.au/listamatic/>

If it really is tabular data, then the principle is the same and the CSS
should be easy to adapt.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[michael]

> Don't use <br> so much. Only when you need to break a line

It was just to fake some spacing above and below the link for a simplified
example sake, but it isn't going to be used at all on the actual page.

like this.

a {display: block; width: 100%; margin: 2em auto;}
How do I get that working with the below code? Sorry, but I've been on
holiday for the last couple of years....

Thanks!
michael
<table>
<tr><td><a href="bla.html">bla</a></td></tr>
</table>

--
A man said to the Universe: "Sir, I exist!"

"However," replied the Universe, "the fact has not created in me a
sense of obligation."
-- Stephen Crane

[michael]

> Most people who wish to do this are using the a single column or row table

as a menu. This is not tabular data, this is list data. Try:

Nice examples! However, I'm stuck in tables, and its not really a nav-bar
I'm doing, I'm spiffing up some pre-coded cms-generated pricing tables and
I'm not in a position to change the structure to list formats.
But thanks for the example site - I'll bookmark it for later.

--
"Speed is subsittute fo accurancy."

[Neal]

On Thu, 9 Sep 2004 20:53:31 +0200, michael <no****@example.com> wrote:

Don't use <br> so much. Only when you need to break a line

It was just to fake some spacing above and below the link for a
simplified
example sake, but it isn't going to be used at all on the actual page.

Ok, my example below sets a margin (which probably ought to be padding
instead) to replace that, you can omit that part.

like this.

a {display: block; width: 100%; margin: 2em auto;}

How do I get that working with the below code? Sorry, but I've been on
holiday for the last couple of years....

Easy. It's CSS. One choice is to put this in the head element of the
document:

<style type="text/css">
table a {display: block; width: 100%;}
</style>

There are other ways. Check out the CSS tutorial at w3schools.com or at
htmldog.com (ignore the XHTML claptrap there). It'll explain all of this.

[michael]

> <style type="text/css">

table a {display: block; width: 100%;}
</style>

Thanks - that does it fine and is easier than js/css combination.

michael

--
The shortest distance between two points is under construction.
-- Noelie Alito

[Andrew Thompson]

On Thu, 9 Sep 2004 21:13:14 +0200, michael wrote:

(David D.)

Most people who wish to do this are using the a single column or row table
as a menu. This is not tabular data, this is list data. Try:
Nice examples! However, I'm stuck in tables, and its not really a nav-bar
I'm doing, I'm spiffing up some pre-coded cms-generated pricing tables and
I'm not in a position to change the structure to list formats.

Don't, even if you have the chance.

David made a good suggestion when he warned
you not to use a table for something that should
be a list (or, more generally, using tables for
*layout*).

OTOH, tables were designed for tabular data,
and 'pricing tables' sounds ..exactly like
tabular data.

If the HTML fits, use it..
Many thanks for any tips!

BTW. It is always a good idea to describe
an actual situation. If you had, responders
would not need to try and guess what you might
be doing. For further tips..
<http://www.spartanicus.utvinternet.ie/help_us_help_you.htm>

HTH

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology