table内に画像を隙間無く敷き詰めるには注意が必要です #1

td及びth要素を使って、画像を敷き詰めたシビアなレイアウトを行おうとした場合、 MozillaではFull Standardモードを使用すると以下のような単純なソースでは意図通りに表示できません。一応、解決策まで公開しますが、tableによるレイアウトは様々なハンディキャップを持つ方に迷惑をかけることになりますので、私は推奨しません。しかし、商用サイト等では相変わらず過去との互換のために使用されることが多いので紹介することにしました。まずは実例を見てください。

<table cellpadding="0" cellspacing="0">
    <tr>
        <td><img src="screenshot/webtips0018_02.jpg"></td>
        <td><img src="screenshot/webtips0018_02.jpg"></td>
    </tr>
    <tr>
        <td><img src="screenshot/webtips0018_02.jpg"></td>
        <td><img src="screenshot/webtips0018_02.jpg"></td>
    </tr>
</table>

画像と画像の間に縦方向のみ隙間ができて配置されている図

※Mozillaでのスクリーンショット

vertical-alignプロパティとbaseline

このように縦方向に隙間ができてしまう原因はvertical-alignプロパティにあります。このvertical-alignプロパティの初期値はbaselineです。ではベースラインとは何でしょうか。これはフォントに存在する概念です。次の画像を見てください。

ベースラインの例(「gMあ」が描かれていて、Mの最下部に線が引かれている、これがベースライン)

上記画像の緑色の線、これがベースラインと呼ばれるものです。ベースラインからgの下端までの距離をディセンダと言い、ベースラインはテキストの最下部とは異なることがわかります。

このvertical-alignプロパティを適用できる要素はインライン要素と、td、th要素のみです。今回のケースではtd、th要素に対する指定は関係無いので割愛しますが、インライン要素に指定した場合は次のように考えます。

例えば高さ10pxのフォントサイズを持ったテキストと、高さ100pxの画像とを持つ行では高さ10pxのフォントは上下に余裕があることになります。この垂直方向に余った余白をどのように配分して、内容を垂直方向に配置するか、ということを設定するのがこのプロパティです。つまり、置換インライン要素である画像はその下端をベースラインに揃えて表示されるということになります。つぎの例を見てみましょう。

<span style="font-size:60px;">g</span>
<img src="screenshot/webtips0018_02.jpg">
<span style="font-size:60px;">M</span>

Mの下端と画像の下端は一致して表示されますが、gの下端と画像の下端は一致していません。ベースラインと画像の下端を合わせて配置しているためです。注意してもらいたいのは、この例で見ると行の高さイコール画像の高さではありません。行の高さはgの下端(ベースラインから更にディセンダ分下側)から、画像の最上端、ということになります。つまり、画像を表示するための行の高さには画像の高さプラス、その行で最大のフォントサイズを持つ要素のベースラインからディセンダを考慮した高さが必要ということになります。

隙間を無くすには画像の下端と、テキストの下端を一致させる

画像を隙間無く敷き詰めるには画像の下端をベースラインに揃えるのではなく、テキストの下端に揃えれば良いわけです。そうすれば高い画像がそのままその行の行高となり、テーブルのセルはその画像の高さ分の高さに抑えられます。

具体例は次の通りです。

<table cellpadding="0" cellspacing="0">
    <tr>
        <td><img src="screenshot/webtips0018_02.jpg" style="vertical-align:bottom"></td>
        <td><img src="screenshot/webtips0018_02.jpg" style="vertical-align:bottom"></td>
    </tr>
    <tr>
        <td><img src="screenshot/webtips0018_02.jpg" style="vertical-align:bottom"></td>
        <td><img src="screenshot/webtips0018_02.jpg" style="vertical-align:bottom"></td>
    </tr>
</table>

実際にはtable.layout img{ vertical-align: bottom; }といった感じで一括指定しておくと便利でしょう。

注意:この記事はかなり簡略化して書かれています。詳しくは下記リンクの仕様書で各自勉強してください。