テーブルのセル内の文字列からのリンクではなく、文字を含むセル全体でリンクをかける方法です。テーブルのセル内にある文字列のみにリンクをかけるときは、<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を付け加えてみます。但しご注意点1つ、セル内の余白を作るために単純に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>
セル全体にリンクにかける |
▲ 上記にマウスポインターを当ててみますと、セル全体にリンクがかかっているのが確認できます。
スポンサーリンク
スポンサーリンク
Category
BILLION WALLET Copyright©All rights reserved