web-dev-qa-db-fra.com

Comment puis-je créer un lien à partir d'une cellule de tableau <td>

J'ai le suivant:

<td>
  some text
  <div>a div</div>
</td>

J'aimerais que l'ensemble <td>...</td> Devienne un lien hypertexte. Je préférerais sans l'utilisation de JavaScript. Est-ce possible?

htmlcsshyperlink
58
aeq

Oui, c'est possible, mais pas littéralement le <td>, mais ce qu'il y a dedans. Le truc simple est de s’assurer que le contenu s’étend jusqu'aux bordures de la cellule (il n’inclura pas les bordures elles-mêmes).

Comme déjà expliqué, ce n'est pas sémantiquement correct. Un élément a est un élément inline et ne doit pas être utilisé en tant qu'élément de niveau bloc. Cependant, voici un exemple (mais JavaScript et un style CSS td: hover sera beaucoup plus pratique) qui fonctionne dans la plupart des navigateurs:

<td>
  <a href="http://example.com">
    <div style="height:100%;width:100%">
      hello world
    </div>
  </a>
</td>

PS: il est préférable de changer a dans un élément de niveau bloc en utilisant CSS comme expliqué dans une autre solution de ce fil . cela ne fonctionnera pas bien dans IE6 cependant, mais ce n'est pas une nouvelle;)

Solution alternative (non conseillée)

Si votre monde n’est qu’Internet Explorer (rare, de nos jours), vous pouvez enfreindre le standard HTML et écrire ceci, cela fonctionnera comme prévu, mais sera très mal vu et sera considéré comme mal avisé (je ne l’ai jamais entendu dire) ) Tout autre navigateur que IE ne rendra pas le lien, mais affichera le tableau correctement.

<table>
    <tr>
        <a href="http://example.com"><td  width="200">hello world</td></a>
    </tr>
</table>
88
Abel

Utilisez ce code. Il développe un <a> pour remplir la cellule horizontalement. Pour remplir verticalement, utilisez également la propriété height.

td a {
  width: 100%;
  display: block;
}

td {
  /* Cell styles for demonstration purposes only */
  border: 1px solid black;
  width: 10em;
}
<table><tr>
  <td>
    <a href="http://example.com">
      Hello World
    </a>
  </td>
</tr></table>
30
Uzair Bin Nisar

Je recommanderais d'utiliser un élément d'ancrage réel et de le définir en tant que bloc.

<div class="divBox">
    <a href="#">Link</a>
</div>

.divBox
{
    width: 300px;
    height: 100px;
}
.divBox a
{
    width: 100%;
    height: 100%;
    display: block;
}

Cela définira l'ancre sur les mêmes dimensions que la div parente.

13
Dustin Laine

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

Comme cela, vous pouvez toujours bénéficier de propriétés de cellules de tableau telles que vertical-align. (Testé sur Chrome)

4
amp

Je voudrais faire de la td entière un hyperlien. Je préférerais sans javascript. Est-ce possible?

Ce n'est pas possible sans JavaScript. En outre, ce ne sera pas un balisage sémantique. Vous devriez utiliser link à la place sinon il faut attacher le gestionnaire onclick à <td> pour rediriger vers une autre page.

1
Sarfraz