1611100 ランダム
 ホーム | 日記 | プロフィール 【フォローする】 【ログイン】

キュートチョイス

キュートチョイス

基本のテーブル

基本のテーブルタグ

ホームページ作りで、レイアウトとしてよく利用されるテーブル（表）。
アフィリエイトでも画像を並べるのに多用されています。
テーブルを制する者は、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>		 表　　　　　　　<TABLE>～</TABLE>
横一列　　　　<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.