HTMLテーブルのすべてのセルをクリック可能にしたい、つまり、セル内の任意のポイントからアンカータグからのリンクをアクティブにしたいとします。キャッチは、セルに内容がないことです。 HTML表を使用して、各セルの背景を色付けして量を視覚的に表現しています。セルにはアンカータグが含まれていますが、アンカータグの間には内容はありません。HTMLテーブルで「空の」セルをクリック可能にする
以下は、テーブルの3つの例です。最初の表では、セルの次元は定義されていません。 2番目の表では、最小寸法が定義されています。 3番目の表では、幅と高さが明示的に定義されています。各表の最初の行の最初のセルには、単純なピリオド文字が入ります。 1番目と2番目の表では、そのセルだけがクリック可能であることに注意してください。明示的に高さと幅を設定しないようにしたいので、最初の2つのテーブルのいずれかを変更して3番目のテーブルのクリック可能な動作に合わせることができれば、それは素晴らしいでしょう。アンカータグには改行しないスペース(
)を置くことができますが、もう1つ、より洗練されたソリューションがありますか?
<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>
はい、私たちは 経路に行くと思います。富化グループの遺伝子発現の対照と値があります。すべてのコントラストやグループごとに価値があります。しかし、これらの値はテキストではなく色として表示されます。したがって、表は、データをレイアウトする正しい方法でも、そうでないこともあります。ニースのリンクも。 – gotgenes