リストを使ったテーブル風レイアウト

見た目のためにテーブルを使うのはよくありませんが、デザイン要素としてテーブル風の見た目にしたい場合もあると思います。そんな時には、リストを利用したＣＳＳテクニックを利用してみましょう。
方法としてはli要素のfloatを指定して、横に並べる方法が一般的です。この場合、ul要素のwidthを指定すれば、列と行を決めることができます。

また、marginやpaddingを調整すれば、上下左右の間隔を自由に変更できたり、borderを調整してレイアウトに枠のような線を指定することもできます。ただし、li要素のwidthおよびborderとmarginやpaddingなどの合計値が、ul要素のwidthの値を超えてしまうと、デザインが崩れてしまうので注意しましょう。

ちなみに、borderを指定する場合、余白を設けるなら、li要素に上下左右を指定しても構いませんが、サンプルのように余白を０にすると、borderが重なる箇所がでてしまい、きれいにborderを引くことができません。なのでここではli要素に左と下のborderを指定し、ul要素に右と上のborderを指定しています。ul要素はli要素よりも外枠となるので、li要素のレイアウトを決定した後、調整していきましょう。

デザインサンプル

サンプルCSSコード

* {
margin: 0;
padding: 0;
}

ul {
　　list-style: none;
　　width: 555px;
　　height: 210px;
　　margin: 0px;
　　padding: 0px;
　　border-top: solid 5px #81c3e2;
　　border-right: solid 5px #81c3e2;
}

li {
　　float: left;
　　border-bottom: solid 5px #81c3e2;
　　border-left: solid 5px #81c3e2;
　　margin: 0px;
}

.itemlist img {
　　vertical-align: bottom;
}

＊vertical-align: bottom;は、インターネットエクスプローラーの表示を修正するために記述します。

スタイルシートデザインガイド