高さの指定

表全体の高さ

表全体の高さは自動的に必要な量が確保されますからあまり指定したくならないと思います。

いくつかの表の高さを合わせたいなどの理由で指定するときはemをお勧めします。

table{
   height: 12em;
   width:50%;
}

全体を12文字分の高さにしました。縦には4つのセルがあるので1つのセルは3文字分になっています。

幅の時と同様に全体の高さに対する割合で % を使おうとすると mozilla 系のブラウザではうまくいかないことがあります。どうしても % を使いたい時は、スタイルシートにあらかじめ html {height:100%;}と、body {height:100%;} を入れます。

行の高さ

ここで言う「行」とは「横に並んだセル」を言います。文章の行と混同しないように

セルの罫線と文字の間が詰まって見にくいという時には padding で文字の周りに余白を作ることで、だいたい満足できる結果を得ることができます。

ただし、内容が少ない行はセルの高さが小さくなるので、高さを揃えたいということはあるかもしれません。この場合は文字の大きさに合わせるのでemが最適です。

％指定する場合は表の高さが指定されていないと無効ですが、emならば大丈夫です。

tdに指定してもいいのですが、trに指定する方が自然です。

tr {
   height: 3em;
}

指定した行だけ高さを変える

高さを変えたい行にclassを指定して、高さを指定します。

この例ではclass指定のない行に3emを指定し、class="koumoku"と指定した行を1emとしています。

tr {
   height: 3em;
}
tr.koumoku {
   height: 1em;
}

<table>
<tr class="koumoku">
<td>動物</td>
<td>鳴き声</td>
<td>好物</td>
</tr>
<tr>
<td>いぬ</td>
<td>わんわん</td>
<td>ほね</td>
</tr>
................................