web-dev-qa-db-fra.com

comment faire une cellule de table hyperlien

Comment peut-on créer un lien hypertexte entre une cellule de table entière en HTML sans JavaScript ou jQuery?

J'ai essayé de mettre href dans la balise td elle-même, mais sa ne fonctionne pas au moins en chrome 18

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

Essaye ça:

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;
}

J'espère que cela fonctionnera bien.

31
Kamal

Essayez de cette façon:

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

Facile avec la fonction onclick et un lien javascript:

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

12
Philip

Je cherchais également une solution et venais de trouver ce code sur un autre site:

<td style="cursor:pointer" onclick="location.href='mylink.html'">link</td>

7
Christhofer Natalius

Pourquoi ne pas combiner la méthode onclick avec l'élément <a> dans le <td> pour la sauvegarde pour les utilisateurs autres que JS? Semble fonctionner très bien.

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

Problèmes:

(User: Kamal) C'est un bon moyen, mais vous avez oublié le problème d'alignement vertical! En utilisant cette méthode, nous ne pouvons pas placer le lien exactement au centre de l'élément TD! même avec vertical-align: middle;

(User: Christ) Votre réponse est la meilleure, car il n’ya pas de problème d’alignement et, aujourd’hui, JavaScript est nécessaire pour tout le monde ... c’est partout, même dans un vieux téléphone intelligent ... activer par défaut ...

Ma suggestion de compléter la réponse de (utilisateur: 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;
}
1
Mahdi Jazini

Voici ma solution:

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

(MOINS)

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 {
         /*...*/
     }
}

De cette manière, vous pouvez toujours bénéficier de propriétés de cellules de tableau telles que vertical-align. (Testé sur Chrome).

1
amp

J'ai déjà vu cela lorsque des gens tentent de créer un calendrier. Vous voulez que la cellule soit liée mais vous ne voulez pas vous occuper de quoi que ce soit à l'intérieur, essayez ceci et cela pourrait résoudre votre problème.

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