HTML

トップ > チップス > HTML

テーブルのセルを隙間なく並べる

ページ全体のレイアウトにテーブルを使うことは無くなったとはいえ、やはり行と列を意識してデータを並べたいときにはテーブルが便利です。このテーブルのセルを隙間なく並べたい場合に、（paddingやborderなど一般的なものは省略すると）以下のようなスタイル指定が必要です。特に分かり辛いのが、imgのvertical-align指定で、これを書かないと、imgタグが最下行にある場合、その下に僅かなスペースが空いてしまいます。

table.foo{
    border-collapse: collapse;
    border-spacing: 0;
}

table.foo img{
    vertical-align: bottom;
}


参考URL

• タグ別一覧: [html]
• チップス一覧