By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,159 Members | 1,941 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,159 IT Pros & Developers. It's quick & easy.

How can I link entire table cell?

P: n/a
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.

Jul 20 '05 #1
Share this Question
Share on Google+
9 Replies


P: n/a
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
Jul 20 '05 #2

P: n/a
> 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."

Jul 20 '05 #3

P: n/a
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>
Jul 20 '05 #4

P: n/a
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
Jul 20 '05 #5

P: n/a
> 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

Jul 20 '05 #6

P: n/a
> 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."

Jul 20 '05 #7

P: n/a
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.
Jul 20 '05 #8

P: n/a
> <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

Jul 20 '05 #9

P: n/a
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
Jul 20 '05 #10

This discussion thread is closed

Replies have been disabled for this discussion.