ホームページ作成講座

ホームページ作成講座 vol.06 …テーブル


TABLE要素
テーブルの宣言。見た目のレイアウトを整えるのに重宝しますが、無闇に増やすとソースも長くなり、読み込みも遅くなるので注意が必要です。
属性:summary … テーブルの構造や意味を示す。面倒なので入れない事が多々有りますが、ビジュアル系のブラウザを使わない(使えない)人への配慮としては入れた方が良いです。
属性:border … テーブルの罫線の幅を指定します。見えなくしたければ0を指定。スタイルシートでも指定できますが、ブラウザによって見え方が異なるので現状ではテーブルに指定した方が良いように思います。
属性:bgcolor … 背景色の指定。スタイルシートで指定した方が良いです。
属性:cellpadding … セル(テーブル中の枠内=マスのこと)の中にあるオブジェクトと罫線との幅を指定します。罫線に文字や画像を密着させないためなどに使います。
属性:cellspacing … セルとセルの間隔を指定します。
属性:width/height … 幅、高さを指定します。指定しない場合、セルの中に含まれる画像やテキスト等のオブジェクト、ブラウザのサイズなどに依存して可変します。テーブルやセルのサイズを決めておきたい場合、テーブルの幅をwidthで指定し、セルの中にスペーサーとなる画像を入れて固定したりします。

TR要素
行を指定します。属性はalign/valign/bgcolorなど。

TD要素
セルを指定します。属性はalign/valign/bgcolorなど。
属性:align … セルの中のオブジェクトの左右の位置を決めます。
・属性値:left … 左寄せ。何も指定しない場合はこれになります。
・属性値:center/left … センタリング/右寄せ
属性:valign … セルの中のオブジェクトの上下の位置を決めます。
・属性値:middle … センタリング。何も指定しない場合はこれになります。
・属性値:top/bottom … 上寄せ/下寄せ。
属性:colspan … 行(横方向)のセルを結合させます。
属性:rowspan … 列(縦方向)のセルを結合させます。

<TABLE summary="テーブル" border=1 cellpadding=2 cellspacing=0>
<TR>
<TD rowspan=2 valign="top">縦に2個分のセル・上寄せ</TD>
<TD>通常セル</TD>
<TD align="right">通常セル・右寄せ</TD>
</TR>
<TR>
<TD colspan=2 align="center">横に2個分のセル・センタリング</TD>
</TR>
<TR>
<TD colspan=3 align="center">横に3個分のセル・寄せを見るために文字をたくさん入れていますよ〜〜〜</TD>
</TR>
</TABLE>


上のソースで作ったテーブルを表示させると↓こうなります。
縦に2個分のセル・上寄せ 通常セル 通常セル・右寄せ
横に2個分のセル・センタリング
横に3個分のセル・寄せを見るために文字をたくさん入れていますよ〜〜〜

今度はcellpaddingとcellspacingの違いを視覚的に表示して比べてみます。
<TABLE border=1 cellpadding=5 cellspacing=0>
<TR>
<TD bgcolor="#FFCCCC">背景色薄赤のセル</TD>
<TD bgcolor="#CCCCFF">背景色薄青のセル</TD>
</TR>
</TABLE>
背景色薄赤のセル 背景色薄青のセル

<TABLE border=1 cellpadding=0 cellspacing=5>
<TR>
<TD bgcolor="#FFCCCC">背景色薄赤のセル</TD>
<TD bgcolor="#CCCCFF">背景色薄青のセル</TD>
</TR>
</TABLE>
背景色薄赤のセル 背景色薄青のセル


Webデザイン制作
SEO:検索エンジン最適化
ホームページ作成講座
日刊運勢メールマガジン
Playstation2ゲーム攻略