Google Answers: Making a Table Cell a Link

View Question

Q: Making a Table Cell a Link ( No Answer, 9 Comments )

Question

Subject: Making a Table Cell a Link
Category: Computers > Internet
Asked by: earthcreature-ga
List Price: $3.50

Posted: 03 Jan 2006 12:55 PST
Expires: 02 Feb 2006 12:55 PST
Question ID: 428579

My question has to do with creating websites.

I am wondering how to make a table cell hyperlinked. In other words, I
want the entire cell be clickable, not just the content inside of it.
I've found ways to do this, but it didn't work the way I wanted it to.
This is exactly how I want it:

- cross-browser compatible

- a hand to show when you move the cursor over the cell (so my
visitors know it's a link before they click it)

- not java (because apparently browsers such as Firefox do not support much java)

I already found a way to make the table cell background change color
when the cursor moves over it, so now I just need to know how to
hyperlink the cell itself. (I'm creating buttons for a link bar.)

Again, I really need it to be compatible with all (or most) browsers.
I have some knowlege of html, but not a lot (I'm using Microsoft
FrontPage.). So you can paste a code but be specific on where to
insert it.

Thank you VERY much,
Jason

Answer

There is no answer at this time.

Comments

Subject: Re: Making a Table Cell a Link
From: till-ga on 03 Jan 2006 13:43 PST

Did you consider using an image map ? I don´t see another really compatible way.

till-ga

Subject: Re: Making a Table Cell a Link
From: x1011-ga on 04 Jan 2006 13:41 PST

This can be done using css. Put this in the <head> section:

<style type="text/css">
table.cellLink td {padding:0}
table.cellLink td a {padding:10px; display:block}
</style>

(you can change the "padding:10px" depending on how much space you want)
and then make a table with the "cellLink" class. example:

<table class="cellLink" border=1><td><a href="#">cell content</a></table>

If you want the background color to change put this in the <style> tag:

table.cellLink td a:hover {background:blue}

(of course, changing "blue" to the color or html color code you want)

Subject: Re: Making a Table Cell a Link
From: padpub-ga on 06 Jan 2006 10:45 PST

Try filling the whole cell with an image with your desired
text/image/message. Then insert a hyperlink to the image.

regards,
padpub
http://www.clicktry.com/

Subject: Re: Making a Table Cell a Link
From: earthcreature-ga on 06 Jan 2006 22:39 PST

Thank you x1011-ga, the html worked! There's one problem, though. The
whole cell isn't clickable - a small portion of the top and bottom are
not hyperlinked. It just looks like padding space or something but I
don't think it is because I entered "0" for padding, etc. How would
you make the entire cell ckickable?

Thanks.

P.S. What does "CSS" mean?

Subject: Re: Making a Table Cell a Link
From: x1011-ga on 07 Jan 2006 07:28 PST

You could try setting cellspacing=0 for the table; otherwise, I would
have to see your HTML.

And css means "cascading style sheets". Wikipedia has an atricle on
it: http://en.wikipedia.org/wiki/Cascading_Style_Sheets

Subject: Re: Making a Table Cell a Link
From: earthcreature-ga on 07 Jan 2006 18:24 PST

Hello x1011-ga,

The cellspacing is already 0. Here is the html for my table (There's
going to be 9 links.) :

<table class="cellLink" border="1" cellspacing="0" width="900"
id="AutoNumber3" height="49" style="border-collapse: collapse"
bordercolor="#1366E1" cellpadding="0">
  <tr>
 <td style="border-style:solid; border-width:1.0pt; width: 99; height:
46; background: #003399" align="center"
   onmouseover="this.style.backgroundColor='#1366E1';"
onmouseout="this.style.backgroundColor='#003399';">
     <p class="MsoNormal" align="center" style="text-align: center">
       <a href="index.htm" style="text-decoration: none">
         <font size="2" color="#DDDDDD"><span style="font-family:
Verdana">Link 1</span></font></a></td>
 <td style="border-style:solid; border-width:1.0pt; width: 99; height:
46; background: #003399" align="center"
   onmouseover="this.style.backgroundColor='#1366E1';"
onmouseout="this.style.backgroundColor='#003399';">
     <p class="MsoNormal" align="center" style="text-align: center">
       <a href="index.htm" style="text-decoration: none">
         <font size="2" color="#DDDDDD"><span style="font-family:
Verdana">Link 2</span></font></a></td>
 <td style="border-style:solid; border-width:1.0pt; width: 99; height:
46; background: #003399" align="center"
   onmouseover="this.style.backgroundColor='#1366E1';"
onmouseout="this.style.backgroundColor='#003399';">
     <p class="MsoNormal" align="center" style="text-align: center">
       <a href="index.htm" style="text-decoration: none">
         <font size="2" color="#DDDDDD"><span style="font-family:
Verdana">Link 3</span></font></a></td>
 <td style="border-style:solid; border-width:1.0pt; width: 99; height:
46; background: #003399" align="center"
   onmouseover="this.style.backgroundColor='#1366E1';"
onmouseout="this.style.backgroundColor='#003399';">
     <p class="MsoNormal" align="center" style="text-align: center">
       <a href="index.htm" style="text-decoration: none">
         <font size="2" color="#DDDDDD"><span style="font-family:
Verdana">Link 4</span></font></a></td>
 <td style="border-style:solid; border-width:1.0pt; width: 99; height:
46; background: #003399" align="center"
   onmouseover="this.style.backgroundColor='#1366E1';"
onmouseout="this.style.backgroundColor='#003399';">
     <p class="MsoNormal" align="center" style="text-align: center">
       <a href="index.htm" style="text-decoration: none">
         <font size="2" color="#DDDDDD"><span style="font-family:
Verdana">Link 5</span></font></a></td>
 <td style="border-style:solid; border-width:1.0pt; width: 99; height:
46; background: #003399" align="center"
   onmouseover="this.style.backgroundColor='#1366E1';"
onmouseout="this.style.backgroundColor='#003399';">
     <p class="MsoNormal" align="center" style="text-align: center">
       <a href="index.htm" style="text-decoration: none">
         <font size="2" color="#DDDDDD"><span style="font-family:
Verdana">Link 6</span></font></a></td>
 <td style="border-style:solid; border-width:1.0pt; width: 99; height:
46; background: #003399" align="center"
   onmouseover="this.style.backgroundColor='#1366E1';"
onmouseout="this.style.backgroundColor='#003399';">
     <p class="MsoNormal" align="center" style="text-align: center">
       <a href="index.htm" style="text-decoration: none">
         <font size="2" color="#DDDDDD"><span style="font-family:
Verdana">Link 7</span></font></a></td>
 <td style="border-style:solid; border-width:1.0pt; width: 99; height:
46; background: #003399" align="center"
   onmouseover="this.style.backgroundColor='#1366E1';"
onmouseout="this.style.backgroundColor='#003399';">
     <p class="MsoNormal" align="center" style="text-align: center">
       <a href="index.htm" style="text-decoration: none">
         <font size="2" color="#DDDDDD"><span style="font-family:
Verdana">Link 8</span></font></a></td>
 <td style="border-style:solid; border-width:1.0pt; width: 99; height:
46; background: #003399" align="center"
   onmouseover="this.style.backgroundColor='#1366E1';"
onmouseout="this.style.backgroundColor='#003399';">
     <p class="MsoNormal" align="center" style="text-align: center">
       <a href="index.htm" style="text-decoration: none">
         <font size="2" color="#DDDDDD"><span style="font-family:
Verdana">Link 9</span></font></a></td>
  </tr>
</table>

Note: This code is in the <head> secion:

<style type="text/css">
table.cellLink td {padding:0}
table.cellLink td a {padding:10px; display:block}
</style>

Also, for some reason, only the first cell is hyperlinked (Link 1). I
added table class="cellLink" to the table tag only, so I thought every
cell would have a cell link, but only the first one does.

Thanks for your time.

Subject: Re: Making a Table Cell a Link
From: x1011-ga on 08 Jan 2006 08:49 PST

Take out all of these:
<p class="MsoNormal" align="center" style="text-align: center">

Then change this:
table.cellLink td a {padding:10px; display:block}

to this:
table.cellLink td a {display:block; width:99px; height:46px}

Subject: Re: Making a Table Cell a Link
From: earthcreature-ga on 08 Jan 2006 17:11 PST

Thanks, that solves the problem, but now I can't seem to be able to
vertically center the text in the cells.

Jason

Subject: Re: Making a Table Cell a Link
From: x1011-ga on 11 Jan 2006 18:06 PST

Try this:
table.cellLink td {padding:0; line-height:46px}

It will only work with one line of text, though.

Important Disclaimer: Answers and comments provided on Google Answers are general information, and are not intended to substitute for informed professional medical, psychiatric, psychological, tax, legal, investment, accounting, or other professional advice. Google does not endorse, and expressly disclaims liability for any product, manufacturer, distributor, service or service provider mentioned or any opinion expressed in answers or comments. Please read carefully the Google Answers Terms of Service.

If you feel that you have found inappropriate content, please let us know by emailing us at answers-support@google.com with the question ID listed above. Thank you.

Search Google Answers for

Google Home - Answers FAQ - Terms of Service - Privacy Policy