| <TABLE> |
|---|
| あいうえお | かきくけこ | さしすせそ |
| aiueo | kakikukeko | sasisuseso |
| ←テーブルの例 |
<TABLE border=1>
<TR>
<TD>あいうえお</TD>
<TD>かきくけこ</TD>
<TD>さしすせそ</TD>
</TR>
<TR>
<TD>aiueo</TD>
<TD>kakikukeko</TD>
<TD>sasisuseso</TD>
</TR>
</TABLE>
|
←ＨＴＭＬではこう記述する |
緑色の文字は 実際に表示される部分で
< > で囲まれてる部分がタグですね上の例のテーブルを
書くには上記の様なソース（記述文）になっているのです
これがもっとも基本的な書き方です
|
| あいうえおかきくけこ | さしすせそ |
| aiueo | kakikukekosasisuseso |
| ←テーブルの例 |
<TABLE border=1>
<TR>
<TD colspan=2>あいうえおかきくけこ</TD>
<TD rowspan=2>さしすせそ</TD>
</TR>
<TR>
<TD>aiueo</TD>
<TD>kakikukekosasisuseso</TD>
</TR>
</TABLE>
|
←ＨＴＭＬではこう記述する |
さて今度はマスが繋がっていますね赤い文字の部分を見て下さい。
横のマスと合体しています。これは colspan=2 という指定を入れると２マス分使うよ
よいう意味です 3 なら３つ分つながるという訳です
一方縦に繋がっているのは rowspan という指定を入れます。 この２つを使えるようになると
様々なレイアウトが可能になりますので必ず覚えたほうが良いです
出来る出来ないでは雲泥の差が・・・（笑）
|
| セルの横幅や高さを指定する |
|---|
|
| ←テーブルの例 |
<TABLE border=1 width=200 height=50>
<TR>
<TD>あいうえお</TD>
</TR>
</TABLE>
|
←ＨＴＭＬではこう記述する |
width=横幅 height=縦幅 となります <TD> や <TH> にも指定する事ができます この場合 <TD width=200> 等のようにタグの中に入れて上げます。
<TABLE> の中で指定した場合はそのテーブル全体のサイズになるという訳です
|
| セルでの文字の位置を指定 |
|---|
| あいうえお |
かきくけこ |
さしすせそ |
| あいうえお |
かきくけこ |
さしすせそ |
| ←テーブルの例 |
<TABLE border=1 width=300 height=100>
<TR>
<TD align=left>あいうえお</TD>
<TD align=center>かきくけこ</TD>
<TD align=right>さしすせそ</TD>
</TR>
<TR>
<TD valign=top>あいうえお</TD>
<TD valign=middle>かきくけこ</TD>
<TD valign=center>さしすせそ</TD>
</TR>
</TABLE>
|
←ＨＴＭＬではこう記述する |
align=*** はデータ（文字や画像）の左・右・中央を指定できます
valign=*** は上、下、中央を指定できます。
何も指定していない場合は <TD> の場合は align=left valign=middle となっています
<TH> の場合は強調センタリング が初期値で入るため align=center valign=middle となります
|
| テーブルの指定を細かくする |
|---|
|
| ←テーブルの例 |
<TABLE border=5 width=300 height=100>
<TR>
<TD bgcolor=skyblue>あいうえお</TD>
<TD background=../gray.jpg>かきくけこ</TD>
<TD>さしすせそ</TD>
</TR>
</TABLE>
|
←ＨＴＭＬではこう記述する |
上の例ではまずテーブルの枠を幅５にしています border=5
あいうえお のマスの背景色を 空色に しています bgcolor=skyblue
かきくけこ のマスの背景を画像にしています bakcground=./gray.jpg
書くパラメータをテーブル全体に反映したい場合は <TABLE> の中に記述するだけです
上のＨＴＭＬの例では 個々のTDやTHに指定する場合を書きましたが基本的には同じです
|
| テーブル全体の幅を調節する |
|---|
|
| ←テーブルの例 |
<TABLE border=1 width=300 height=100 leftmargin=0 topmargin=0 cellspacing=5 cellpadding=5>
<TR>
<TD>あいうえお</TD>
<TD>かきくけこ</TD>
<TD>さしすせそ</TD>
</TR>
</TABLE>
|
←ＨＴＭＬではこう記述する |
セルとセルの間隔やセル内の間隔を指定することができます。
leftmargin=0 はセル内の左から何ピクセル目から表示させるか（特に使わない）
topmargin=0 はセル内の上から何ピクセル目から表示させるか（特に使わない）
cellspacing=5 はセルとセルの間隔を指定
cellpadding=5 はセル内の文字行間を指定
cellspacing=* cellpadding=* は非常に便利で整形して表示するには欠かすことのできないパラメータです是非覚えて下さい
|
ざっとテーブルを使ってのパラメータを個々に解説してみました。
上に書いてあるパラメータは全部組み合わせて複雑なテーブルを作り上げることも可能です
またテーブルは入れ子（テーブルの中にテーブルを入れる）等の技を駆使すれば当サイトのよう画像なんて使わなくても様々なレイアウトを作り上げる事ができます。多少なりとも理解していただけたでしょうか？＾＾：；； 自分ではわかりやすく書いたつもりなんですけどね（汗） |
