テーブルのセル間隔とセル余白

テーブルのセル間隔とセル余白は、珍しくCSS推奨とはなっていません。HTMLで指定してもよいようです。

セル間隔とセル余白とは

セル間隔とセル余白
テーブルのセル間隔とは、セルの外枠線とその隣り合うセルの外枠線との間の間隔です。tableタグでcellspacing属性として指定します。セル余白とは、例えばセル中の文字のような、コンテンツの占める領域の辺とセルの罫線との間の間隔です。tableタグでcellpadding属性で指定します。

Dreamweaverで設定

テーブル全体を選択することで、プロパティインスペクタから設定することができます。

HTMLで設定

<table cellspacing="1" cellpadding="5">

セル間隔を1ピクセル、セル余白を5ピクセルにしました。

CSSで設定

table {                       /*テーブルタグについて指定*/
    border-spacing:1px;       /*セル間隔を1ピクセル*/
    background-color:#000000; /*背景色を黒にする*/
}
td,th {                       /*通常セルと見出しセルについて指定*/
    padding:5px;              /*セル余白5ピクセル*/
    border:0px;               /*セルボーダー0ピクセル*/
    background-color:#ffffff; /*セル背景色を白*/
}

こちらもセル間隔を1ピクセル、セル余白を5ピクセルにしました。

広告