CODEWITHSUNDEEP
htmlhyperlinkhref
vaichidrewar
vaichidrewar

Reputation: 9621

how to make a cell of table hyperlink

How can entire table cell be hyperlinked in html without javascript or jquery?

I tried to put href in td tag itself but its not working at least in chrome 18

<td href='http://www.m-w.com/dictionary/' style="cursor:pointer">

Upvotes: 41

Views: 356114

Answers (11)

Michel FW
Michel FW

Reputation: 151

I ran into this issue and used the display block method to let the a element fill the whole cell. The only issue is that when the table cells have padding not the entire cell is clickable.

I used css to remove the padding from table cells that contain anchors and added the same padding to the anchors.

So I ended up with this:

table {
  border-collapse: collapse;
}

td,
th {
  border: 1px solid #ddd;
}

td,
th,
.anchor_cell a {
    padding: 8px;
}

.anchor_cell {
  padding: 0;
}

.anchor_cell a {
  display: block;
}
<table>
        <thead>
            <tr>
                <th>Name</th>
                <th>ID</th>
            </tr>
        </thead>
        <tbody>
          <tr>
            <td class="anchor_cell"><a href="/the_url">John Doe</a></td>
            <td>1</td>
          </tr>
          <tr>
            <td class="anchor_cell"><a href="/the_url">Jane Doe</a></td>
            <td>1</td>
          </tr>
        </tbody>
    </table>

Upvotes: 1

Aref Solaimany
Aref Solaimany

Reputation: 367

If you want use this way in php Do the following

<?php 
    echo ("
        <script type = 'text/javascript'>
            function href() {
                location.href='http://localhost/dept';
            }
        </script>

        <tr onclick='href()'>
            <td>$id</td>
            <td>$deptValue</td>
            <td> $month </td>
            <td>100%</td>    
        </tr>
    ");
?>

Upvotes: 0

Ben
Ben

Reputation: 754

you can give an <a> tag the visual behavior of a table cell:

HTML:

<table>
  <tr>
    <a href="...">Cell 1</a>
    <td>Cell 2</td>
  </tr>
</table>

CSS:

tr > a {
  display: table-cell;
}

Upvotes: 2

Grextarosta
Grextarosta

Reputation: 1

Not exactly making the cell a link, but the table itself. I use this as a button in e-mails, giving me div-like controls.

<a href="https://www.foo.bar" target="_blank" style="color: white; font-weight: bolder; text-decoration: none;">
  <table style="margin-left: auto; margin-right: auto;" align="center">
    <tr>
      <td style="padding: 20px; height: 60px;" bgcolor="#00b389">Go to Foo Bar</td>
    </tr>
  </table>
</a>

Upvotes: 0

Jason
Jason

Reputation: 9

I have seen this before when people are trying to build a calendar. You want the cell linked but do not want to mess with anything else inside of it, try this and it might solve your problem.

<tr>
<td onClick="location.href='http://www.stackoverflow.com';">
Cell content goes here
</td>
</tr>

Upvotes: 0

shootz
shootz

Reputation: 59

Why not combine the onclick method with the <a> element inside the <td> for backup for non-JS? Seems to work great.

<td onclick="location.href='yourpage.html'"><a href="yourpage.html">Link</a></td>

Upvotes: 5

Mahdi Jazini
Mahdi Jazini

Reputation: 791

Problems:

(User: Kamal) It's a good way, but you forgot the vertical align problem! using this way, we can't put the link exactly at the center of the TD element! even with vertical-align:middle;

(User: Christ) Your answer is the best answer, because there is no any align problem and also today JavaScript is necessary for every one... it's in every where even in an old smart phone... and it's enable by default...

My Suggestion to complete answer of (User: Christ):

HTML:

<td style="cursor:pointer" onclick="location.href='mylink.html'"><a class="LN1 LN2 LN3 LN4 LN5" href="mylink.html" target="_top">link</a></td>

CSS:

a.LN1 {
  font-style:normal;
  font-weight:bold;
  font-size:1.0em;
}

a.LN2:link {
  color:#A4DCF5;
  text-decoration:none;
}

a.LN3:visited {
  color:#A4DCF5;
  text-decoration:none;
}

a.LN4:hover {
  color:#A4DCF5;
  text-decoration:none;
}

a.LN5:active {
  color:#A4DCF5;
  text-decoration:none;
}

Upvotes: 1

Kamal
Kamal

Reputation: 2180

Try this:

HTML:

<table width="200" border="1" class="table">
    <tr>
        <td><a href="#">&nbsp;</a></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

CSS:

.table a
{
    display:block;
    text-decoration:none;
}

I hope it will work fine.

Upvotes: 44

Philip
Philip

Reputation: 175

Easy with onclick-function and a javascript link:

<td onclick="location.href='yourpage.html'">go to yourpage</td>

Upvotes: 15

amp
amp

Reputation: 12352

Here is my solution:

<td>
   <a href="/yourURL"></a>
   <div class="item-container">
      <img class="icon" src="/iconURL" />
      <p class="name">
         SomeText
      </p>
   </div>
</td>

(LESS)

td {
  padding: 1%;
  vertical-align: bottom;
  position:relative;

     a {
        height: 100%;
        display: block;
        position: absolute;
        top:0;
        bottom:0;
        right:0;
        left:0;
       }

     .item-container {
         /*...*/
     }
}

Like this you can still benefit from some table cell properties like vertical-align.(Tested on Chrome)

Upvotes: 1

azawaza
azawaza

Reputation: 3084

Try this way:

<td><a href="..." style="display:block;">&nbsp;</a></td>

Upvotes: 23

Related Questions