Purple town

その５

簡単タグ講座　その５　テーブルの模様替え

●テーブルの構造は判ったかな？
次にテーブルをもう少し自分好みに直してみましょう。

<TABLE>　～　</TABLE>
枠なし。
<TABLE BORDER >　～　</TABLE>
枠あり。
<TABLE BORDER =" 枠の太さ ">　～　</TABLE>
テーブルの外枠の太さを指定します。デフォルトは１です。０にすると枠なしになります。

<TABLE ALIGN =" left、right、center ">　～　</TABLE>
ALIGN属性を指定することで表の表示位置を変えます。また、表の横にテキストを表示できます。
left（左）、right（右）、center（中央）のいずれかを入れてください。

<TR ALIGN =" left、right、center " VALIGN =" top、middle、bottom ">
ALIGNの属性は<TR>と<TD>にも使えます。
<TR>と<TD>に使う場合はVALIGN属性も指定できます。
ALIGNの属性は横の指定でVALIGN属性は縦の指定です。
top（上付）、middle（下付）、bottom（中央）のいずれかを入れてください。

<TABLE WIDTH =" 表の幅 " HEIGHT =" 表の高さ ">　～　</TABLE>
テーブルのサイズを設定できます。単位はピクセルまたは％です。単位を付加しない場合はピクセルとなります。
WIDTHは表の幅、HEIGHTは表の高さを指定します。

<TABLE CELLSPACING =" すべての枠の太さ ">　～　</TABLE>
<TABLE CELLPADDING =" 枠線とセル内のテキストとの間隔 ">　～　</TABLE>
CELLSPACINGはすべての枠線の太さを指定できます。デフォルトは２です。
CELLPADDINGは枠線とセル内のテキストとの間隔を設定できます。デフォルトは１です。

これらのタグは組み合わせることが出来ます。

<TABLE border ="2" CELLSPACING ="5" CELLPADDING ="2" WIDTH ="70%" HEIGHT ="100" ALIGN ="center">
<TR>
<TD VALIGN ="top">
外枠が２、枠の太さが５、テキスト間が２、幅は70%、高さが100ピクセルの箱表示が中央の文字上揃え
</TD>
</TR>
</TABLE>

こう指定すると以下のように表示されます。

外枠が２、枠の太さが５、テキスト間が２、幅は70%、高さが100ピクセルの箱表示が中央の文字上揃え

ジャンル別一覧