CSSにできること―リスト・テーブル編

CSSにできること第四弾。今回はリストとテーブルに関する装飾です。
前作：CSSにできること―背景編

CSSでは、HTMLでつくるリスト（ul系タグ）と、テーブル（tableタグ）に関する装飾や、見栄えを調節することが可能です。

１．リスト

リストのマーカーを変える

HTMLでは、リストタグを使うと、項目の左に●が現れます。これをマーカーというのですが、list-style-typeでこの形を四角や白丸に変えることができます。
また、このマーカーを消すこともできます。（Webサイトではこのマーカーを消して、ナビゲーションボタンを作ることがほとんどです）

また、list-style-imageを指定すると●や■などのマーカーを画像にすることができます。
ただし、このプロパティでリストのマーカーを画像にすると、微妙にマーカーと文章がずれてしまうため、現実的にはリストのマーカーを非表示にし、liタグの背景に画像を指定するのが一般的です。

２．テーブル

空のセルのボーダーを表示する

テーブルタグにおいては、trやtdのタグの中に何も文字が入っていないと、その部分だけ枠線が表示されません。これをempty-cellsというプロパティで表示することができます。
表示させたい場合は、テーブルタグに対してempty-cells: show;と指定します。

セル間の幅を指定する。

HTMLではcellspacingという属性で、セルとセルの間（tdタグとtdタグの間）の間隔を調整していましたが、CSSではborder-spacingというプロパティでその間隔を指定することができます。

テーブルのボーダーを1本にする

テーブルは基本、

たとえばこれは	テーブルの線が
分離している	例です。

このように線が二重になっています。

CSSのborder-collapseというプロパティに対し、collapseという値を指定すると、下記のように枠線を1本にまとめることができます。

そして、これは	テーブルの線が
結合している	例です。

やっていることとしては、ボーダー間の空間を分けるか、閉じるかを指定しています。

ちなみに、cellpaddingは、次回説明するプロパティpaddingで指定することになります。

以上、リスト・テーブル編でした。
レイアウト基礎の基礎編へ続きます。