ＨＴＭＬタグ小辞典
目次｜基本｜BODY｜ フォント｜色｜段落｜画像｜リンク｜ 表(テーブル)｜BGM｜スクロール
表のタグ
ページは表を使うと簡単にレイアウトすることができます。表に使う主なタグは下記のようなものがあります
<TABLE>〜</TABLE>表を定義します
<TR>〜</TR>行を定義します。</TR>は省略可能です
<TD>〜</TD>表のセルを定義します
<TH>〜</TH>表の見出しのセルを定義します
表の各部のタグ
実際の表と対応するタグは下記の通りです
タグ説明
下の表のタグは ⇒
左上右上
左下右下
 
<TABLE border="1">
<TR>
<TD>左上</TD>
<TD>右上</TD>
</TR>
<TR>
<TD>左下</TD>
<TD>右下</TD>
</TR>
</TABLE>
 
表の始まり
１行目の始まり
左上のセル
右上のセル
１行目の終わり
２行目の始まり
左下のセル
右下のセル
２行目の終わり
表の終わり
TABLEタグの詳細設定
タグ内に下記の属性を指定することが出来ます
<TABLE width="幅" height="高さ" align="横位置" border="外枠の太さ"
cellpadding="枠と内容の間隔" cellspacing="セル枠の太さ">
幅　width="幅"
表の幅はwidth属性で指定します
width="100"width="200"
左上右上
左下右下
左上右上
左下右下
高さ　height="高さ"
表の高さheight属性で指定します
height="50"height="80"
左上右上
左下右下
左上右上
左下右下
横位置　align="位置"
横方向の表示位置はalign属性で指定します
align="left"align="center"align="right"
左上右上
左下右下
左上右上
左下右下
左上右上
左下右下
注意
この属性を指定すると一部の無料サーバーでは広告の位置が変わってしまうことが確認されています。
<DIV align属性>を使用すると指定どおりになります
外枠の太さ　border="太さ"
border="0"で枠を消すことができます。1以上の数値を入れると太さが指定できます
border="0"border="1"border="5"
左上右上
左下右下
左上右上
左下右下
左上右上
左下右下
枠と内容の間隔　cellpadding="間隔"
cellpaddingで枠と中身の間隔を指定できます
cellpadding="0"cellpadding="1"cellpadding="5"
左上右上
左下右下
左上右上
左下右下
左上右上
左下右下
セル枠の太さ　cellspacing="太さ"
cellspacingで枠の太さを指定できます
cellspacing="0"cellspacing="1"cellspacing="5"
左上右上
左下右下
左上右上
左下右下
左上右上
左下右下
TRタグの詳細設定
タグ内に下記の属性を指定することが出来ます
<TR height="行高さ" align="横位置" valign="縦位置">
行高さ　height="行高さ"
行単位で高さが指定できます
height="25"height="30"height="40"
左右
左右
左右
横位置　align="横位置"
行単位で横位置が指定できます（省略した場合、初期値のalign="left"になります）
align="left"align="center"align="right"
左右
左右
左右
縦位置　valign="縦位置"
行単位で縦位置が指定できます（省略した場合、初期値のvalign="middle"になります）
valign="top"valign="middle"valign="bottom"
左右
左右
左右
TDの詳細設定
タグ内に下記の属性を指定することが出来ます
<TD align="横位置" valign="縦位置">　これらは　TR　と同様に設定します
セルの結合を指定することもできます
セルの結合　縦（行）方向　rowspan="セル数"
複数セルを縦方向に結合するには、rowspan属性を指定します
セル数表示タグ
="2"
左上右上
右中
左下右下
 
<TABLE>
<TR>
<TD rowspan="2">左上</TD>
<TD>右上</TD>
</TR>
<TR>
<TD>右中</TD>
</TR>
<TR>
<TD>左下</TD>
<TD>右下</TD>
</TR>
</TABLE>
="3"
左右上
右中
右下
 
<TABLE>
<TR>
<TD rowspan="3">左</TD>
<TD>右上</TD>
</TR>
<TR>
<TD>右中</TD>
</TR>
<TR>
<TD>右下</TD>
</TR>
</TABLE>
セルの結合　横（列）方向　colspan="セル数"
複数セルを横方向に結合するには、colspan属性を指定します
セル数表示タグ
="2"
左上右上
左下中下右下
 
<TABLE>
<TR>
<TD colspan="2">左上</TD>
<TD>右上</TD>
</TR>
<TR>
<TD>左下</TD>
<TD>中下</TD>
<TD>右下</TD>
</TR>
</TABLE>
="3"
上
左下中下右下
 
<TABLE>
<TR>
<TD colspan="3">上</TD>
</TR>
<TR>
<TD>左下</TD>
<TD>中下</TD>
<TD>右下</TD>
</TR>
</TABLE>
THの詳細設定
タグ内に下記の属性を指定することが出来ます
<TH align="横位置" valign="縦位置">　これらは　TRタグ　と同様に設定します
セルの結合を指定することもできます　これらは　TDタグ　と同様に設定します
TDタグとの違いは下記のようになります
表示タグ
ＴＨＴＨ
ＴＤＴＤ
 
<TABLE>
<TR>
<TH>ＴＨ</TH>
<TH>ＴＨ</TH>
</TR>
<TR>
<TD>ＴＤ</TD>
<TD>ＴＤ</TD>
</TR>
</TABLE>
タグ違い
ＴＨ表示位置：中央、文字：太字
ＴＤ表示位置：左寄せ、文字：標準
目次｜基本｜BODY｜ フォント｜色｜段落｜画像｜リンク｜ 表(テーブル)｜BGM｜スクロール