テーブルタグの基本を簡単に説明します。
細かい説明をするとサイトが一つ出来てしまうくらいなのでしません。
一般的なブログのカスタマイズに必要なのはこの程度だと思います。
もしもカスタマイズの最中に「なんじゃこりゃ？」という部分が出てきたら「HTML+（そのわかんない部分のタグっぽい部分）」でキーワード検索をどこぞの検索エンジンでかけてみてください。どこかで説明しているサイトがあると思いますのでそちらでどうぞ。テーブルタグでも色や背景色を設定できますがそれもCSSでやったほうが早いのでここでの説明は省きます。
■ 基本的なテーブル
<TABLE>
<TR>
<TD>1*1</TD>
</TR>
</TABLE>
テーブル全体を表す<TABLE></TABLE>の中に、行を表す<TR></TR>と列を表す<TD></TD>が入っています。 上のタイプは１つのテーブルの中に列も行も１つずつなのです。
ではこれをさらに応用していきましょう。
■ セルの数を指定する
テーブルの１つの枠をセルといいます。
セルの行と列が２つずつの場合は次の通りになります。
<TABLE>
<TR>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
</TABLE>
どこがどこを表しているかわかりましたね。
<TR></TR>と<TD></TD>の記述を増やせばテーブルのセルを増やす事ができます。
この中に文字や画像を配置する事によって、自分の思い通りのページのデザインができます。
■ サイズを指定する
次にテーブルのサイズを決めてみましょう。
横幅はWIDTH="100"、縦幅はHEIGHT="100"と表します。
複雑なテーブルほど注意して数字の部分を入れましょう。どこか間違っていたらきちんと表示されません。
<TABLE WIDTH="90" HEIGHT="90">
<TR>
<TD WIDTH="10" HEIGHT="10">1</TD>
<TD WIDTH="30" HEIGHT="10">2</TD>
<TD WIDTH="50" HEIGHT="10">3</TD>
</TR>
<TR>
<TD WIDTH="10" HEIGHT="30">4</TD>
<TD WIDTH="30" HEIGHT="30">5</TD>
<TD WIDTH="50" HEIGHT="30">6</TD>
</TR>
<TR>
<TD WIDTH="10" HEIGHT="50">7</TD>
<TD WIDTH="30" HEIGHT="50">8</TD>
<TD WIDTH="50" HEIGHT="50">9</TD>
</TR>
</TABLE>
■ 線の幅を指定する
ではテーブルの線の幅を変えてみましょう。線の幅は次のように表します。
BORDER="1"
テーブル全体の線の幅は、
<TABLE BORDER="1">
（中略）
</TABLE>
と、なります。たとえばこんな感じです。
■ テーブルの表示位置を指定する
テーブルの表示位置を変える事が出来れば色々な事ができます。
左に寄せるには、ALIGN="LEFT"
中央に寄せるには、ALIGN="CENTER"
右に寄せるには、ALIGN="RIGHT"
と、<TABLE>の中に入れていきます。
何も入れなかった場合自動でLEFTが選択されています。
■ セルとセルの間隔を指定する
セルとセルの間や外枠とセルの間隔を指定してみましょう。
これはCELLSPACING="0"を<TABLE>の中に入れます。
<TABLE BORDER="1" BORDERCOLOR="#000000" CELLSPACING="0" WIDTH="50" HEIGHT="50">
<TR>
<TD WIDTH="25" HEIGHT="25">1</TD>
<TD WIDTH="25" HEIGHT="25">2</TD>
</TR>
<TR>
<TD WIDTH="25" HEIGHT="25">3</TD>
<TD WIDTH="25" HEIGHT="25">4</TD>
</TR>
</TABLE>
次は CELLSPACING="1"の場合
次は CELLSPACING="3"の場合
■ セル内の余白を指定する
テーブルは外枠と内枠ともいえるセルとその間に存在する余白や線の幅などで構成されています。思い通りのテーブルを作るには余白も重要なポイントです。
外枠と内枠のマージンを設定するにはCELLPADDING="0"を<TABLE>の中に入れます。
<TABLE BORDER="1" BORDERCOLOR="#000000" CELLPADDING="0" WIDTH="50" HEIGHT="50">
<TR>
<TD WIDTH="25" HEIGHT="25">1</TD>
<TD WIDTH="25" HEIGHT="25">2</TD>
</TR>
<TR>
<TD WIDTH="25" HEIGHT="25">3</TD>
<TD WIDTH="25" HEIGHT="25">4</TD>
</TR>
</TABLE>
こちらは CELLPADDING="5" の場合
このようにしてテーブルのサイズは細かく指定できます。
同じテーブルでも文字のサイズや量・画像のサイズなどのセルの中に入れたデータの大きさやマージンによってテーブルは崩れます。
自分の思ったようなテーブルにするには、細かく指定する方が良いかもしれません。
■ 基本的なテーブル
| 1*1 |
<TABLE>
<TR>
<TD>1*1</TD>
</TR>
</TABLE>
テーブル全体を表す<TABLE></TABLE>の中に、行を表す<TR></TR>と列を表す<TD></TD>が入っています。 上のタイプは１つのテーブルの中に列も行も１つずつなのです。
ではこれをさらに応用していきましょう。
■ セルの数を指定する
テーブルの１つの枠をセルといいます。
セルの行と列が２つずつの場合は次の通りになります。
| 1 | 2 |
| 3 | 4 |
<TABLE>
<TR>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
</TABLE>
どこがどこを表しているかわかりましたね。
<TR></TR>と<TD></TD>の記述を増やせばテーブルのセルを増やす事ができます。
この中に文字や画像を配置する事によって、自分の思い通りのページのデザインができます。
■ サイズを指定する
次にテーブルのサイズを決めてみましょう。
横幅はWIDTH="100"、縦幅はHEIGHT="100"と表します。
複雑なテーブルほど注意して数字の部分を入れましょう。どこか間違っていたらきちんと表示されません。
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
<TABLE WIDTH="90" HEIGHT="90">
<TR>
<TD WIDTH="10" HEIGHT="10">1</TD>
<TD WIDTH="30" HEIGHT="10">2</TD>
<TD WIDTH="50" HEIGHT="10">3</TD>
</TR>
<TR>
<TD WIDTH="10" HEIGHT="30">4</TD>
<TD WIDTH="30" HEIGHT="30">5</TD>
<TD WIDTH="50" HEIGHT="30">6</TD>
</TR>
<TR>
<TD WIDTH="10" HEIGHT="50">7</TD>
<TD WIDTH="30" HEIGHT="50">8</TD>
<TD WIDTH="50" HEIGHT="50">9</TD>
</TR>
</TABLE>
■ 線の幅を指定する
ではテーブルの線の幅を変えてみましょう。線の幅は次のように表します。
BORDER="1"
テーブル全体の線の幅は、
<TABLE BORDER="1">
（中略）
</TABLE>
と、なります。たとえばこんな感じです。
| BORDER="1" |
| BORDER="5" |
■ テーブルの表示位置を指定する
テーブルの表示位置を変える事が出来れば色々な事ができます。
左に寄せるには、ALIGN="LEFT"
中央に寄せるには、ALIGN="CENTER"
右に寄せるには、ALIGN="RIGHT"
と、<TABLE>の中に入れていきます。
何も入れなかった場合自動でLEFTが選択されています。
| ALIGN="LEFT" |
| ALIGN="CENTER" |
| ALIGN="RIGHT" |
■ セルとセルの間隔を指定する
セルとセルの間や外枠とセルの間隔を指定してみましょう。
これはCELLSPACING="0"を<TABLE>の中に入れます。
| 1 | 2 |
| 3 | 4 |
<TABLE BORDER="1" BORDERCOLOR="#000000" CELLSPACING="0" WIDTH="50" HEIGHT="50">
<TR>
<TD WIDTH="25" HEIGHT="25">1</TD>
<TD WIDTH="25" HEIGHT="25">2</TD>
</TR>
<TR>
<TD WIDTH="25" HEIGHT="25">3</TD>
<TD WIDTH="25" HEIGHT="25">4</TD>
</TR>
</TABLE>
次は CELLSPACING="1"の場合
| 1 | 2 |
| 3 | 4 |
次は CELLSPACING="3"の場合
| 1 | 2 |
| 3 | 4 |
■ セル内の余白を指定する
テーブルは外枠と内枠ともいえるセルとその間に存在する余白や線の幅などで構成されています。思い通りのテーブルを作るには余白も重要なポイントです。
外枠と内枠のマージンを設定するにはCELLPADDING="0"を<TABLE>の中に入れます。
| 1 | 2 |
| 3 | 4 |
<TABLE BORDER="1" BORDERCOLOR="#000000" CELLPADDING="0" WIDTH="50" HEIGHT="50">
<TR>
<TD WIDTH="25" HEIGHT="25">1</TD>
<TD WIDTH="25" HEIGHT="25">2</TD>
</TR>
<TR>
<TD WIDTH="25" HEIGHT="25">3</TD>
<TD WIDTH="25" HEIGHT="25">4</TD>
</TR>
</TABLE>
こちらは CELLPADDING="5" の場合
| 1 | 2 |
| 3 | 4 |
このようにしてテーブルのサイズは細かく指定できます。
同じテーブルでも文字のサイズや量・画像のサイズなどのセルの中に入れたデータの大きさやマージンによってテーブルは崩れます。
自分の思ったようなテーブルにするには、細かく指定する方が良いかもしれません。
