ホームページ作成 - テーブルのセルでリンクする

ホームページ作成ＴＯＰ > テーブル > テーブルのセルでリンクする

テーブルのセルでリンクする

テーブルのセル内の文字ではなく、セル全体でリンクを作成する方法です。

sample

下記のテーブルのセル内にマウスを移動して見てください。

セル内の文字リンク

　↓　セル全体にすると　↓　

セル全体リンク

ＨＴＭＬ　

リンクをテーブルのセル全体に設定するには、スタイルシートで行います。

ホームページ作成ＴＯＰ > テーブル > テーブルのセルでリンクする > このページのＴＯＰ　▲

スタイルシート　display:block;width:100%;height:100%

テーブルのセル内にある文字のみにリンクするのではなく、セル全体にリンクする方法です。

【考え方】
セル内の文字にリンクした範囲をセル全体に適用する。という事になり、リンク部分をブロック要素に変換し、そのブロックの範囲をセル内に広げる。

この際、セルの大きさを設定しておかないと、特にheight:100%;が適用されない状態になりますのでセルの大きさを指定する様にします。

さらに、cellpadding="0"を設定し、セル枠と内容との隙間を無くします。

使用スタイル	目的
`display:block`	要素をブロック要素に変換
`width:100%`	範囲の幅を100％
`height:100%`	範囲の高さを100％

マウスが重なった時に背景色や文字色を変更するにはa:hoverを使用しますので下記も参照して下さい。

下記は、マウスが来た時に背景色をbackground-color:#ffcccc;に変更する様にしてます。

要素に直接書く

書き方は


設定項目が多いので、ｈｅａｄに記載します。

ホームページ作成ＴＯＰ > テーブル > テーブルのセルでリンクする > このページのＴＯＰ　▲

headに書く

書き方は


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">

 <style type="text/css">
 <!--

     a       {display:block;width:100%;height:100%;}
     a:hover {background-color:#ffcccc;}

 -->
 </style>
 </head>
 <body>

<table border="1" cellpadding="0">
<tr>
<td width="200" height="30"><a href="リンク先">セル全体リンク</a></td>
</tr>
</table>

 </body>
</html>

こうなります