Discussion :

[dev14]

Bonjour, la question est simple, je n'arrive pas à rendre cliquable ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<tr>
   <a href="#">
      <td><span>...</span><div>...</div></td>
   </a>
</tr>

et je veux éviter ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<tr>
   <td>
      <a href="#"><span>...</span><div>...</div></a>
   </td>
</tr>

Est ce qu'il y a un moyen html, est ce que je m'y prends mal.

Je précise que je veux éviter de passer par du javascript. J'aimerais y arriver en html. Merci

[thelvin]

et je veux éviter ça

Hum, pourquoi ? Tu as trouvé un vieux parchemin au fond de la grotte gardée par le dragon millénaire de la sagesse HTML, qui indique que les balises <a> ne doivent jamais se trouver à l'intérieur des <td>, mais à l'extérieur, sous peine de courroucer les dieux ancestraux d'Internet ?

Enfin bref, que je sache, non, on ne peut pas mettre de balise <a> autour de balises <td>. (Ce qui n'est pas justifié plus rationnellement qu'au-dessus, mais en gros un lien est supposé être attaché à un élément sémantique représentant ce lien, et qu'une telle sémantique n'a rien à faire dans plus d'une cellule. S'il y a plusieurs cellules avec lien, alors il y a plusieurs liens.)

[Bovino]

C'est surtout dû à la structure d'une table.
Tu ne peux avoir aucun contenu en dehors des balises <td> ou <th>, c'est tout, ni balise <a> ni <div> ni rien du tout.

[Torgar]

Bonjour,

Pour compléter et apporter une solution autre que de mettre un lien sur chaque valeur de la cellule de ton tableau, tu peux mettre un évènement onclick javascript sur le <td></td> qui fera la "redirection" vers la page souhaitée.

Pour l'esthétique, tu peux afficher le curseur correspondant à une main au survol du <td></td>Solution à double tranchant : si le javascript n'est pas activé sur le poste client, ça ne fonctionne pas, donc, et je pense, à l'avis général, le mieux reste quand même un lien englobant chaque valeur de tes cellules. Mais cette solution te permet de faire ce que tu souhaitais avec le <a></a> autour du <td></td>

[dev14]

ok merci à tous.

je retiendrai qu'il faut éviter de mettre des éléments entre les tr et td.

Oui je voulais éviter le javascript au cas où il serait désactivé.

merci à tous et bonne journée

[Bovino]

Tu peux toujours mettre un style adapté à tes balises <a> :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
td > a{
    display: inline-block;
    width: 100%;
    height: 100%;
}

[dev14]

C'est à peu près ce que j'ai fait.