【CSS:link】テーブルでセル全体をリンクする

テーブルのセル内の文字列からのリンクではなく、文字を含むセル全体でリンクをかける方法です。テーブルのセル内にある文字列のみにリンクをかけるときは、<a href="url">リンク先</a>のタグを使いますが、マウスポインターを当てた時のリンク適用範囲は以下のように文字列に限られます。

文字列だけにリンクをかける

display:block; width:100%; height:100%

テーブル内の空白にもリンクがかかるよう指定するには、display:block; width:100%; height:100%CSSを使います。

display:block;

リンクタグ<a>～</a>はインライン要素のため、直接他の要素を組み合わせてCSSを適用させることはできませんので、一旦<a>リンクタグをブロックレベル要素に変換する必要があります。

width:100%;height:100%

セル内にマウスカーソルを当てた時に、全体に隙間無く満遍なくリンクが有効になるようリンク有効範囲：幅100％・高さ100％にします。

<html>
 <head>
  <style>
　　table.sample { 
　　　width: 520px; 
　　}
	
　　table.sample td { 
	　width:100%;
	　border: 1px solid #c7c7bc; 
	　color: #404040; 
 　  }
 
　　table.sample td a{
	　display:block;
	　width:100%;
      height:100%;
 　  } 
　　table.sample td a:hover{
　　  background-color: #f49d9d;
 　  } 
  </style>     
 </head>
 <body>
　<table class="sample">
　　<tr>
　　　<td><a href="block_inline.html">セル全体にリンクをかける</a>
　　　</td>
　　</tr>
　</table> 
 </body> 
</html>

セル全体にリンクをかける

上記のリンクはセル全体にリンクがかかってないです。セル内の文字列を中央に配置し、さらに余白のあるセルにするために、新たにCSSを付け加えてみます。但しご注意点１つ、セル内の余白を作るために単純にpaddingは使わないことです。

paddingで指定されたセル内の余白は、マウスを重ねた時にリンクの有効範囲をセル全体ではなく、paddingに与えられた値だけに制限してしまします。

padding:5px;

<html>
 <head>
  <style>
　table.sample1 { 
　　　width: 520px; 
　}
	
　table.sample1 td { 
	width:100%;
	text-align: center;
	color: #404040; 
	padding:5px;
	border: 1px solid #c7c7bc; 
　}
 
　 table.sample1 td a {
	　display:block;
	　width:100%;
	　height:100%;
　} 
　 table.sample1 td a:hover {
	　background-color: #f49d9d;
　} 
  </style>     
 </head>
 <body>
　<table class="sample1">
　　<tr>
　　　<td><a href="block_inline.html">セル全体にリンクにかける</a>
　　　</td>
　　</tr>
　</table> 
 </body> 
</html>

セル全体にリンクにかける

まだ上記のほうもセル全体にリンクがかかってないです。下記のように、セル内の余白をline-heightで指定すると、paddingを使ったときの余白問題を解決できます。これでセル全体がリンク先の有効範囲になりました。

line-height；

<html>
 <head>
  <style>
　table.Tbsample { 
　　　width: 520px; 
　}
	
　table.Tbsample td { 
	　width:100%;
	　line-height: 2.5em;
	　border: 1px solid #c7c7bc; 
	　background-color: #ececec; 
	　text-align: center;
	　vertical-align:middle;
	　font-size: 12px; 
	　color: #404040; 
　}
 
　 table.Tbsample td a {
	　display:block;
	　width:100%;
	　height:100%;
　} 
　 table.Tbsample td a:hover {
	　background-color: #f49d9d;
　} 
  </style>     
 </head>
 <body>
　<table class="Tbsample">
　　<tr>
　　　<td><a href="block_inline.html">セル全体にリンクにかける</a>
　　　</td>
　　</tr>
　</table> 
 </body> 
</html>

セル全体にリンクにかける

▲　上記にマウスポインターを当ててみますと、セル全体にリンクがかかっているのが確認できます。