Je souhaite que toutes les cellules d'une table HTML soient cliquables - c'est-à-dire que le lien de la balise d'ancrage soit active - depuis n'importe quel point d'une cellule. Le hic, c'est que les cellules n'ont pas de contenu. Nous utilisons simplement le tableau HTML pour représenter visuellement les quantités en coloriant les arrière-plans de chaque cellule. Les cellules doivent contenir des balises d'ancrage, mais pas de contenu entre les balises d'ancrage.Rendre les cellules "vides" cliquables dans les tables HTML
Voici trois exemples de tables. Dans la première table, aucune dimension pour les cellules n'est définie. Dans la deuxième table, les dimensions minimales sont définies. Dans la troisième table, la largeur et la hauteur sont définies explicitement. Dans la première cellule de la première rangée de chaque table est un simple caractère de période. Notez que dans les première et deuxième tables, seule cette cellule est cliquable. Nous aimerions éviter de définir explicitement la hauteur et la largeur, et donc si nous pouvions modifier l'une ou l'autre des deux premières tables pour correspondre au comportement cliquable du troisième, ce serait fantastique. Nous pourrions placer un espace insécable ( ) dans les étiquettes d'ancrage, mais y a-t-il une autre solution plus élégante?
<html>
<head>
<style>
td.min {min-width: 1px; min-height: 1px;}
td.defined {width: 50px; height: 50px;}
td a.fullcell {width: 100%; height: 100%; display: block;}
</style>
</head>
<body>
<h1>No dimension defined</h1>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>A</td>
<td bgcolor="#ffbbbb"><a class="fullcell" href="#">.</a></td>
<td bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td>
</tr>
<tr>
<td>B</td>
<td bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td>
<td bgcolor="#ffbbff"><a class="fullcell" href="#"></a></td>
</tr>
</table>
<h1>Min-dimension defined</h1>
<table border="1">
<tr>
<td class="min">1</td>
<td class="min">2</td>
<td class="min">3</td>
</tr>
<tr>
<td class="min">A</td>
<td class="min" bgcolor="#ffbbbb"><a class="fullcell" href="#">.</a></td>
<td class="min" bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td>
</tr>
<tr>
<td class="min">B</td>
<td class="min" bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td>
<td class="min" bgcolor="#ffbbff"><a class="fullcell" href="#"></a></td>
</tr>
</table>
<h1>Dimensions defined</h1>
<table border="1">
<tr>
<td class="defined">1</td>
<td class="defined">2</td>
<td class="defined">3</td>
</tr>
<tr>
<td class="defined">A</td>
<td class="defined" bgcolor="#ffbbbb"><a class="fullcell" href="#">.</a></td>
<td class="defined" bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td>
</tr>
<tr>
<td class="defined">B</td>
<td class="defined" bgcolor="#bbffbb"><a class="fullcell" href="#"></a></td>
<td class="defined" bgcolor="#ffbbff"><a class="fullcell" href="#"></a></td>
</tr>
</table>
</body>
</html>
Oui, je pense que nous allons la voie Nous avons des contrastes d'expression de gène et des valeurs pour les groupes d'enrichissement. Pour chaque contraste et pour chaque groupe, il y a une valeur. Nous montrons ces valeurs comme des couleurs plutôt que du texte, cependant. Donc, une table est et n'est pas la bonne façon de disposer les données. Beau lien, aussi. – gotgenes