この章ではcellspacing属性について説明します。
cellspacing属性はセル同士の間隔を指定する属性です。
では例をみてみましょう。
セル同士の間隔を設定するためにはtable要素の属性にcellspacingを指定します。
値に”0″を指定するとセル間の間隔は無くなりますが、以下の例のように1以上の数値を入れるとセル同士の間隔が広がります。
の場合には以下の通り、セル同士の間隔は無くなります。
以下の例は
の場合の表示結果です。
セル間に間隔が生まれているのが分かります。
この章ではテーブルのセル内の文字の縦方向の位置を指定するvertical-alignについて説明します。
vertical-alignはすでに学習済みですが、復習してみましょう。
vertical-alignでは行内のテキストの縦方向の位置を指定できます。
セルの場合は以下の3種類の値を使用します。
では例をみてみましょう。
結果は以下の通りです。
この章ではセルのCSSにtext-alignプロパティを追加してみましょう。
text-alignプロパティは「ブロック要素の中の文字や画像」や「セルの中のインライン要素である文字や画像」を指定した位置に行揃え(水平方向)します。
では例をみてみましょう。
結果は以下のようになります。
CSSのthとtdに
を設定したことにより、thタグとtdタグ内の文字がすべて右寄りになっています。
この章ではセル内でのpaddingの設定方法について説明します。
paddingはpx,pt,pc,mm,cm,%などの数値で書きます。
では例をみてみましょう。
上の印を付けた箇所がpaddingですが、thとtdに対してpaddingを設定しています。もちろん、印を付けた箇所以外のthとtdにもpaddingが設定されています。