基本のテーブル
ホームページ作りで、レイアウトとしてよく利用されるテーブル（表）。
アフィリエイトでも画像を並べるのに多用されています。
テーブルを制する者は、HPを制する！？と言っても過言ではありません。
ただテンプレを使うだけでなく、基本から勉強してみましょう♪
２行、２列、枠ありのテーブル
| ♪ | ◆ |
| △ | ☆ |
上のソースと解説
<TABLE border="1">
<TBODY>
<TR>
<TD width="150" height="50">♪</TD>
<TD width="150" height="50">◆</TD>
</TR>
<TR>
<TD width="150" height="50">△</TD>
<TD width="150" height="50">☆</TD>
</TR>
</TBODY>
</TABLE>
<TBODY>
<TR>
<TD width="150" height="50">♪</TD>
<TD width="150" height="50">◆</TD>
</TR>
<TR>
<TD width="150" height="50">△</TD>
<TD width="150" height="50">☆</TD>
</TR>
</TBODY>
</TABLE>
表
<TABLE>～</TABLE>
横一列 <TR>～</TR>
１つずつの枠 <TD>～</TD>
という構造からなりたっています。ソースを見て頂くと、上から順に入れ子状態になっているのがよく分かると思います。
（<TBODY>なしで表が作れる筈ですが、HPビルダーを使用すると自動的に生成するので、そのままにしておきます）
width は幅、 height は高さを表しています。ピクセル単位で指定のこと。幅を指定しておくと表が崩れなくてお勧め。
適当に数字を入れて、ピクセルの感覚を掴んでくださいね。
横一列 <TR>～</TR>
１つずつの枠 <TD>～</TD>
という構造からなりたっています。ソースを見て頂くと、上から順に入れ子状態になっているのがよく分かると思います。
（<TBODY>なしで表が作れる筈ですが、HPビルダーを使用すると自動的に生成するので、そのままにしておきます）
width は幅、 height は高さを表しています。ピクセル単位で指定のこと。幅を指定しておくと表が崩れなくてお勧め。
適当に数字を入れて、ピクセルの感覚を掴んでくださいね。
位置揃え
| ♪指定なし | ◆左上 |
| △右下 | ☆中央 |
| <TABLE border="1"> <TBODY> <TR> <TD width="150" height="50">♪指定なし</TD> <TD width="150" height="50" align="left" valign="top">◆左上</TD> </TR> <TR> <TD width="150" height="50" align="right" valign="bottom">△右下</TD> <TD width="150" height="50" align="center" valign="middle">☆中央</TD> </TR> </TBODY></TABLE> |
|---|
| align
横方向位置揃え
right
右寄せ
center
中央寄せ
left
左寄せ valign 縦方向位置揃え top 上寄せ middle 中央寄せ bottom 下寄せ |
なんかテーブル分かったかも！という方は
テーブルスタイル へ！
© Rakuten Group, Inc.
