テーブルタグ


1.テーブル全体
2.行
3.セル
4.チップス
5.IEのみ

1.テーブル全体


■ <TABLE>〜</TABLE>
説明 何も指定しないテーブル。
表記例 <TABLE>
 <TR>
  <TD>あああああ</TD>
  <TD>いいいいい</TD>
 </TR>
 <TR>
  <TD>う</TD>
  <TD>え<BR>お</TD>
 </TR>
</TABLE>
表示例
あああああ いいいいい



■ <TABLE border="...">
説明 表の外枠の太さ。
表記例 <TABLE border="1">
 <TR>
  <TD>border="1"</TD>
  <TD>いいいいい</TD>
 </TR>
 <TR>
  <TD>う</TD>
  <TD>え<BR>お</TD>
 </TR>
</TABLE>
表示例
border="1" いいいいい


border="2" いいいいい


border="10" いいいいい



■ <TABLE align="...">
説明 表の水平位置。
種類 <TABLE align="left"> 左に表示(デフォルト)。
<TABLE align="center"> 中央に表示。
<TABLE align="right"> 右に表示。
表記例 <TABLE border="1" align="left">
 <TR>
  <TD>align="left"</TD>
  <TD>いいいいい</TD>
 </TR>
 <TR>
  <TD>う</TD>
  <TD>え<BR>お</TD>
 </TR>
</TABLE>

表示例:

align="left" いいいいい




align="center" いいいいい

align="right" いいいいい







■ <TABLE width="...">
説明 表の横幅。
ピクセル値、またはパーセント。
表記例 <TABLE border="1" width="300">
 <TR>
  <TD>width="300"</TD>
  <TD>いいいいい</TD>
 </TR>
 <TR>
  <TD>う</TD>
  <TD>え<BR>お</TD>
 </TR>
</TABLE>

表示例:

width="300" いいいいい


width="50%" いいいいい


width="100%" いいいいい




■ <TABLE height="...">
説明 表の縦幅。
ピクセル値、またはパーセント。
表記例 <TABLE border="1" height="100">
 <TR>
  <TD>height="100"</TD>
  <TD>いいいいい</TD>
 </TR>
 <TR>
  <TD>う</TD>
  <TD>え<BR>お</TD>
 </TR>
</TABLE>

表示例:


height="100" いいいいい



height="50%" いいいいい




■ <TABLE cellspacing="...">
説明 セルの間隔。
ピクセル値。デフォルトは"1"。
この値を0にすることで罫線を一重線にできる。
表記例 <TABLE border="1" cellspacing="0">
 <TR>
  <TD>cellspacing="0"</TD>
  <TD>いいいいい</TD>
 </TR>
 <TR>
  <TD>う</TD>
  <TD>え<BR>お</TD>
 </TR>
</TABLE>
表示例
cellspacing="0" いいいいい


cellspacing="1" いいいいい


cellspacing="2" いいいいい


cellspacing="10" いいいいい




■ <TABLE cellpadding="...">
説明 セル枠と文字の間隔。
ピクセル値。デフォルトは"1"。
表記例 <TABLE border="1" cellpadding="0">
 <TR>
  <TD>cellpadding="0"</TD>
  <TD>いいいいい</TD>
 </TR>
 <TR>
  <TD>う</TD>
  <TD>え<BR>お</TD>
 </TR>
</TABLE>
表示例
cellpadding="0" いいいいい


cellpadding="1" いいいいい


cellpadding="2" いいいいい


cellpadding="10" いいいいい




■ <TABLE bgcolor="...">
説明 表全体の背景色。
表記例 <TABLE border="1" bgcolor="#0000ff">
 <TR>
  <TD>bgcolor="#0000b0"</TD>
  <TD>いいいいい</TD>
 </TR>
 <TR>
  <TD>う</TD>
  <TD>え<BR>お</TD>
 </TR>
</TABLE>
表示例
bgcolor="#0000b0" いいいいい




■ <TABLE background="...">
説明 表全体の背景画像。
URLで指定。
表記例 <TABLE border="1" background="tablebg.gif">
 <TR>
  <TD>background="tablebg.gif"</TD>
  <TD>いいいいい</TD>
 </TR>
 <TR>
  <TD>う</TD>
  <TD>え<BR>お</TD>
 </TR>
</TABLE>
表示例
background="tablebg.gif" いいいいい




■ <TABLE bordercolor="...">
説明 表の外枠の色。
表記例 <TABLE border="1" bordercolor="#00ff00">
 <TR>
  <TD>bordercolor="#00ff00"</TD>
  <TD>いいいいい</TD>
 </TR>
 <TR>
  <TD>う</TD>
  <TD>え<BR>お</TD>
 </TR>
</TABLE>
表示例
bordercolor="#00ff00" いいいいい




■ <CAPTION>〜</CAPTION>
説明 表の題名。
位置 <CAPTION align="top"> 上部に表示。
<CAPTION align="left"> 上部の左側に表示。
<CAPTION align="right"> 上部の右側に表示。
<CAPTION align="center"> 上部の中央に表示。
<CAPTION align="bottom"> 下部に表示。
表記例 <TABLE border="1">
 <CAPTION>タイトルalign="top"</CAPTION>
 <TR>
  <TD>ああああああああああ</TD>
  <TD>いいいいいいいいいい</TD>
 </TR>
 <TR>
  <TD>う</TD>
  <TD>え<BR>お</TD>
 </TR>
</TABLE>
表示例
タイトルalign="top"
ああああああああああ いいいいいいいいいい


タイトルalign="left"
ああああああああああ いいいいいいいいいい


タイトルalign="center"
ああああああああああ いいいいいいいいいい


タイトルalign="right"
ああああああああああ いいいいいいいいいい


タイトルalign="bottom"
ああああああああああ いいいいいいいいいい





■ <TH>〜</TH>
説明 表の項目名。
太字で中央揃えになる。
表記例 <TABLE border="1">
 <TR>
  <TH>項目1</TH>
  <TH>項目2</TH>

 </TR>
 <TR>
  <TD>あああああ</TD>
  <TD>いいいいい</TD>
 </TR>
 <TR>
  <TD>う</TD>
  <TD>え<BR>お</TD>
 </TR>
</TABLE>
表示例
項目1 項目2
あああああ いいいいい




■ <THEAD>〜</THEAD>
■ <TBODY>〜</TBODY>
■ <TFOOT>〜</TFOOT>
説明 ヘッダ・ボディ・フッタ。
分ける場合に使用する。
表記例 <TABLE border="1">
 <THEAD>
 <TR>
  <TH>項目1</TH>
  <TH>項目2</TH>
 </TR>
 </THEAD>
 <TFOOT>
 <TR>
  <TH>フッタ1</TH>
  <TH>フッタ2</TH>
 </TR>
 </TFOOT>
 <TBODY>
 <TR>
  <TD>あああああ</TD>
  <TD>いいいいい</TD>
 </TR>
 <TR>
  <TD>う</TD>
  <TD>え<BR>
  お</TD>
 </TR>
 </TBODY>
</TABLE>
表示例
項目1 項目2
フッタ1 フッタ2
あああああ いいいいい



2.行


■ <TR bgcolor="...">
説明 行の背景色。
表記例 <TABLE border="1">
 <TR bgcolor="#00a000">
  <TD>あああああ</TD>
  <TD>いいいいい</TD>
 </TR>
 <TR bgcolor="#0000a0">
  <TD>う</TD>
  <TD>え<BR>お</TD>
 </TR>
</TABLE>
表示例
bgcolor="#00a000" いいいいい
bgcolor="#0000a0"



■ <TR background="...">
説明 行の背景画像。
URLで指定。
表記例 <TABLE border="1">
 <TR background="tablebg.gif">
  <TD>あああああ</TD>
  <TD>いいいいい</TD>
 </TR>
 <TR background="tablebg2.gif">
  <TD>う</TD>
  <TD>え<BR>お</TD>
 </TR>
</TABLE>
表示例
background="tablebg.gif" いいいいい
background="tablebg2.gif"


3.セル


■ <TD align="...">
説明 セル内の横の表示位置。
種類 <TD align="left"> 左寄せ。(デフォルト)
<TD align="center"> 中央。
<TD align="right"> 右寄せ。
表記例 <TABLE border="1">
 <TR>
  <TD>あああああああああああああああ</TD>
  <TD>いいいいい</TD>
 </TR>
 <TR>
  <TD align="left">align="center"</TD>
  <TD>え<BR>お</TD>
 </TR>
 <TR>
  <TD align="center">align="center"</TD>
  <TD>か<BR>き</TD>
 </TR> <TR>
  <TD align="right">align="center"</TD>
  <TD>く<BR>け</TD>
 </TR>
</TABLE>
表示例
あああああああああああああああ いいいいい
align="left"
align="center"
align="right"



■ <TD valign="...">
説明 セル内の縦の表示位置。
種類 <TD align="top"> 上寄せ。
<TD align="middle"> 中央。(デフォルト)
<TD align="center"> 中央。
<TD align="baseline"> ベースライン揃え。
<TD align="bottom"> 下寄せ。
表記例 <TABLE border="1">
 <TR>
  <TD>あ<BR>い<BR>う<BR>え<BR>お</TD>
  <TD valign="top">valign="top"</TD>
  <TD valign="middle">valign="middle"</TD>
  <TD valign="center">valign="center"</TD>
  <TD valign="baseline">valign="baseline"</TD>
  <TD valign="bottom">valign="bottom"</TD>
 </TR>
</TABLE>
表示例




valign="left" valign="left" valign="left" valign="left" valign="left"



■ <TD width="...">
説明 セルの横幅。
ピクセル値、またはパーセント。
表記例 <TABLE border="1">
 <TR>
  <TD width="200">width="200"</TD>
  <TD>いいいいい</TD>
 </TR>
 <TR>
  <TD>う</TD>
  <TD>え<BR>お</TD>
 </TR>
</TABLE>
表示例
width="200" いいいいい


width="30%" いいいいい


width="70%" いいいいい




■ <TD height="...">
説明 セルの縦幅。
ピクセル値。
表記例 <TABLE border="1">
 <TR>
  <TD height="100">height="100"</TD>
  <TD>いいいいい</TD>
 </TR>
 <TR>
  <TDheight="50">height="50"</TD>
  <TD>え<BR>お</TD>
 </TR>
</TABLE>
表示例
height="100" いいいいい
height="50"



■ <TD colspan="...">
説明 セルの列の結合。
列数で指定。
表全体で列数が合っていないと表がくずれる。
表記例 <TABLE border="1">
 <TR>
  <TD colspan="3">1</TD>
 </TR>
 <TR>
  <TD>2−1</TD>
  <TD colspan="2">2−2</TD>
 </TR>
 <TR>
  <TD>3−1</TD>
  <TD>3−2</TD>
  <TD>3−3</TD>
 </TR>
</TABLE>
表示例
2−1 2−2
3−1 3−2 3−3



■ <TD rowspan="...">
説明 セルの行の結合。
行数で指定。
表全体で行数が合っていないと表がくずれる。
表記例 <TABLE border="1">
 <TR>
  <TD rowspan="3">1</TD>
  <TD>1−1</TD>
  <TD>1−1−1</TD>
 </TR>
 <TR>
  <TD rowspan="2">1−2</TD>
  <TD>1−2−1</TD>
 </TR>
 <TR>
  <TD>1−2−2</TD>
 </TR>
</TABLE>
表示例
1−1 1−1−1
1−2 1−2−1
1−2−2



■ <TD bgcolor="...">
説明 セルの背景色。
表記例 <TABLE border="1">
 <TR>
  <TD>あああああ</TD>
  <TD bgcolor="#a00000">いいいいい</TD>
 </TR>
 <TR>
  <TD bgcolor="#00a000">う</TD>
  <TD bgcolor="0000a0">え<BR>お</TD>
 </TR>
</TABLE>
表示例
あああああ いいいいい




■ <TD background="...">
説明 セルの背景画像。
URLで指定。
表記例 <TABLE border="1">
 <TR>
  <TD>あああああ</TD>
  <TD>いいいいい</TD>
 </TR>
 <TR>
  <TD background="tablebg.gif">う</TD>
  <TD background="tablebg2.gif">え<BR>お</TD>
 </TR>
</TABLE>
表示例
あああああ いいいいい




■ <TD nowrap>
説明 自動改行させない。
表記例 <TABLE border="1">
 <TR>
  <TD width="10%" nowrap>ああああああああああ</TD>
  <TD width="10%">いいいいいいいいいい</TD>
  <TD>う</TD>
 </TR>
 <TR>
  <TD>え</TD>
  <TD>お</TD>
  <TD>か</TD>
 </TR>
</TABLE>
表示例
ああああああああああ いいいいいいいいいい


4.チップス


■ 罫線を一重線にする。
説明 セルの間隔を0にする。<TABLE cellspacing="0">。
指定しないと"1"になる。
表記例 <TABLE border="1" cellspacing="0">
 <TR>
  <TD>cellspacing="0"</TD>
  <TD>いいいいい</TD>
 </TR>
 <TR>
  <TD>う</TD>
  <TD>え<BR>お</TD>
 </TR>
</TABLE>
表示例
cellspacing="0" いいいいい



■ セルに何も入っていない時、罫線が表示されないのを防ぐ。
説明 <BR>を入れる。または全角スペースでもよい。
セルに何も入っていないと罫線が表示されなくなる。
表記例 <TABLE border="1">
 <TR>
  <TD nowrap>あああああ</TD>
  <TD nowrap>いいいいい</TD>
  <TD>ううううう</TD>
 </TR>
 <TR>
  <TD>え</TD>
  <TD></TD>
  <TD>お</TD>
 </TR>
 <TR>
  <TD>か</TD>
  <TD>き</TD>
  <TD>く</TD>
 </TR>
 <TR>
  <TD>け</TD>
  <TD><BR></TD>
  <TD>こ</TD>
 </TR>
 <TR>
  <TD>さ</TD>
  <TD>し</TD>
  <TD>す</TD>
 </TR>
</TABLE>
表示例
あああああ いいいいい ううううう



5.IEのみ


■ <TABLE bordercolorlight="...">
■ <TABLE bordercolordark="...">
説明 表に立体的に色をつける。
bordercolorlight は上枠と左枠、bordercolordark は下枠と右枠。
表記例 <TABLE border="10" bordercolorlight="#00ffff" bordercolordark="#ff0000">
 <TR>
  <TD>bordercolorlight="#0000ff" bordercolordark="#ff0000"</TD>
  <TD>いいいいい</TD>
 </TR>
 <TR>
  <TD>う</TD>
  <TD>え<BR>お</TD>
 </TR>
</TABLE>
表示例
bordercolorlight="#ff0000"
bordercolordark="#00ff00"
いいいいい


bordercolorlight="#ff0000"
bordercolordark="#00ff00"
いいいいい



■ <COLGROUP>〜</COLGROUP>
説明 列全体の設定。
<COLGROUP align="..."> セル内の横の表示位置。
<COLGROUP align="left"> 左寄せ。
<COLGROUP align="center"> 中央。
<COLGROUP align="right"> 右寄せ。
<COLGROUP bgcolor="..."> 背景色。
<COLGROUP span="..."> n列分の指定を一度に行なう。
<COLGROUP valign="..."> セル内の縦の表示位置。
<COLGROUP valign="top"> 上寄せ。
<COLGROUP valign="middle"> 中央。
<COLGROUP valign="baseline"> ベースライン揃え。
<COLGROUP valign="bottom"> 下寄せ。
<COLGROUP width="..."> セルの横幅。ピクセル値、またはパーセント。
表記例 <TABLE border="1">
 <COLGROUP span="2" align="center" bgcolor="#008000" valign="top"></COLGROUP>
 <TR>
  <TD>あああああ</TD>
  <TD>いいいいい</TD>
  <TD>ううううう</TD>
  <TD>えええええ</TD>
 </TR>
 <TR>
  <TD>え</TD>
  <TD>お</TD>
  <TD>か</TD>
  <TD>き<BR>く</TD>
 </TR>
</TABLE>
表示例
あああああ いいいいい ううううう えええええ



■ <COL>〜</COL>
説明 列全体の設定。
<COLGROUP>は表の論理列に対して行なうもので、<COL>は表の論理列に依存しない・・・らしいのですがよくわかりません。
<COL align="..."> セル内の横の表示位置。
<COL align="left"> 左寄せ。
<COL align="center"> 中央。
<COL align="right"> 右寄せ。
<COL bgcolor="..."> 背景色。
<COL span="..."> n列分の指定を一度に行なう。
<COL valign="..."> セル内の縦の表示位置。
<COL valign="top"> 上寄せ。
<COL valign="middle"> 中央。
<COL valign="baseline"> ベースライン揃え。
<COL valign="bottom"> 下寄せ。
<COL width="..."> セルの横幅。ピクセル値、またはパーセント。
表記例 <TABLE border="1">
 <COL span="2" align="right" bgcolor="#000080" valign="bottom"></COLGROUP>
 <TR>
  <TD>あああああ</TD>
  <TD>いいいいい</TD>
  <TD>ううううう</TD>
  <TD>えええええ</TD>
 </TR>
 <TR>
  <TD>え</TD>
  <TD>お</TD>
  <TD>か</TD>
  <TD>き<BR>く</TD>
 </TR>
</TABLE>
表示例
あああああ いいいいい ううううう えええええ



■ <TABLE frame="...">
説明 表の上下左右の枠線の表示/非表示。
<TABLE frame="void"> 表示しない。
<TABLE frame="above"> 上のみ。
<TABLE frame="below"> 下のみ。
<TABLE frame="lhs"> 左のみ。
<TABLE frame="rhs"> 右のみ。
<TABLE frame="vsides"> 上下のみ。
<TABLE frame="hsides"> 左右のみ。
<TABLE frame="box"> 上下左右。(デフォルト)
<TABLE frame="border"> 上下左右。
表記例 <TABLE border="1" frame="void">
 <TR>
  <TD>frame="void"</TD>
  <TD>いいいいい</TD>
 </TR>
 <TR>
  <TD>う</TD>
  <TD>え<BR>お</TD>
 </TR>
</TABLE>
表示例
frame="void" いいいいい


frame="above" いいいいい


frame="below" いいいいい


frame="lhs" いいいいい


frame="rhs" いいいいい


frame="vsides" いいいいい


frame="hsides" いいいいい


frame="box" いいいいい


frame="border" いいいいい



■ <TABLE rules="...">
説明 表の内側の枠線の表示/非表示。
<TABLE rules="none"> 表示しない。
<TABLE rules="rows"> 横線のみ。
<TABLE rules="cols"> 縦線のみ。
<TABLE rules="all"> すべて。(デフォルト)
<TABLE rules="groups"> <THEAD><TBODY><TFOOT>で指定したグループの境界のみ。
表記例 <TABLE border="1" rules="none">
 <TR>
  <TD>frame="void"</TD>
  <TD>いいいいい</TD>
 </TR>
 <TR>
  <TD>う</TD>
  <TD>え<BR>お</TD>
 </TR>
</TABLE>
表示例
rules="none" いいいいい


rules="rows" いいいいい


rules="cols" いいいいい


rules="all" いいいいい


ヘッダ1 ヘッダ2
rules="groups" <THEAD><TBODY><TFOOT>を使用していない

フッタ1 フッタ2

ヘッダ1 ヘッダ2
rules="groups" <THEAD><TBODY><TFOOT>を使用している

フッタ1 フッタ2