2014年10月2日木曜日

<td> を丸ごと <a> でリンクにする

テーブルのセルを丸ごとリンクにする場合は少しコツが要ります。

そのまま囲むと動かない
<table style="width: 200px; height:200px;">
    <tr>
        <a href="http://yokano-jp.blogspot.jp/">
            <td>まるごとリンク</td>
        </a>
    </tr>
</table>

--
追記:2018/01/04
そもそも tr の下には、th または td しか置けないため、
上記のコードは HTML として誤りです。
参考:https://www.w3.org/TR/2017/REC-html52-20171214/tabular-data.html#the-tr-element
--

セル内を覆う <a> を <td> の直下に入れると動く
<table style="width: 200px; height:200px;">
    <tr>
        <td>
            <a style="width:100%; height:100%; display:block;" href="http://yokano-jp.blogspot.jp/">
                まるごとリンク
            </a>
        </td>
    </tr>
</table>

<a> に幅・高さを設定するため display:block; でブロック要素にしています。

ただし、セル内のコンテンツにリンクの色や下線が付くので、
text-decoration や color などで別途スタイルの修正が必要になります。


参考
テーブルのtd全体にリンクをかける | ホームページ作成の備忘録
http://ppaso.net/archives/430

0 件のコメント:

コメントを投稿