CSSを使ってテーブルでセル全体をリンクしたい

質問

CSSを使ってテーブルでセル全体をリンクしたい

CSSを使ってテーブルでセル全体をリンクしたい・・・と思っています。
４つのセル？を横並びにして（２段目は説明書き）、一つ一つ違うところに飛べるようにしたいのですけど、文字だけしかリンクできません。。。
block要素？を使うらしい？ということはわかったのですが、テーブル要素と組み合わせて使う場合どうしたらいいのでしょう？
色々やってみたのですが、セルが縦並べになってしまったりメインのcolorがなくなってしまったり、形が大幅に崩れたりしてしまいました。

ホームページ作りもＣＳＳも初めてなので、なにをどうしたらよいか教えていただけると嬉しいです
ソースをのっけておきます

＜ｃｓｓの方＞
table#table-01 {
width: 600px;
border: 0px #E3E3E3 solid;
border-collapse: separate;
border-spacing: 20px 0;
}

table#table-01 th {
width: 130px;
height: 70px;
padding: 5px;
border: #E3E3E3 solid;
border-width: 1px 0 0 1px;
background: #F5F5F5;
font-weight: bold;
line-height: 120%;
text-align: center;
}

table#table-01 td {
vertical-align: top;
padding: 1px 3px 20px 0;
border: 0px #E3E3E3 solid;
border-width: 0;
text-align: center;
}

＜ｈｔｍｌの方＞

<table id="table-01" cellspacing="20px">
<tr><th>●●●●</th><th>▲▲▲</th><th>■■■</th><th>○○○</th></tr>
<tr><td>●の説明</td><td>▲の説明</td><td>■の説明</td><td>○の説明</td></tr>

よろしくお願いします

回答No.2

nekomikekamo · ベストアンサー

>>私の参考にしたホームページは全てＣＳＳで作成されていますが。
テーブルをあえて不要なdivを多用して作成する理由はないと思います。

>>リンクしたい・・・
とのことなので、おそらくth以下にaタグがあると思いますので、
下記cssを追加すれば行けるのではないでしょうか？
(line-heightを固定すると文字サイズ拡大時にはみ出す等の問題はありますが)

[css追加]
th a{
width: 130px;
line-height: 70px;
display:block;
}

お礼

ありがとうございました

補足

やってみたらセル全体リンクできるようになりました。
ありがとうございます

ただ th内に入れた文字が２段になるときは、高さが勝手に変わって２倍になってしまいます
（セル内の文字も上下大きく離れてしまいます）

line-heightをただのheightに変えてみたら高さはバッチリなのですが、セル内の文字が上に寄ってしまいました
th内の文字を２段になる長さの時でも中央に配置するようには出来るでしょうか？

回答No.1

k0021

私の参考にしたホームページは全てＣＳＳで作成されていますが。

補足

これだと、ほとんど最初から作り直さなくてはならなくなってしまうので、今回は違う方法で出来たらいいな・・・と思っています。

でも、参考にさせていただきます。
ありがとうございました