テーブルタグ


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>項目１</TH>
　　<TH>項目２</TH>
　</TR>
　<TR>
　　<TD>あああああ</TD>
　　<TD>いいいいい</TD>
　</TR>
　<TR>
　　<TD>う</TD>
　　<TD>え<BR>お</TD>
　</TR>
</TABLE>
表示例 ：
項目１ 項目２
あああああ いいいいい
う え
お


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


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">１</TD>
　</TR>
　<TR>
　　<TD>２－１</TD>
　　<TD colspan="2">２－２</TD>
　</TR>
　<TR>
　　<TD>３－１</TD>
　　<TD>３－２</TD>
　　<TD>３－３</TD>
　</TR>
</TABLE>
表示例 ：
１
２－１ ２－２
３－１ ３－２ ３－３


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


■ <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" いいいいい
う え
お

ヘッダ１ ヘッダ２
rules="groups" <THEAD><TBODY><TFOOT>を使用していない
う え
お
フッタ１ フッタ２

ヘッダ１ ヘッダ２
rules="groups" <THEAD><TBODY><TFOOT>を使用している
う え
お
フッタ１ フッタ２