とほほのHTMLリファレンス(テーブル)

1999年8月22日

<TABLE>のFRAME属性の説明が誤っていたのを修正。

<TABLE>～</TABLE> - テーブル - H3/e2/N2

■ 説明
<CAPTION>、<TR>、<TH>、<TD>と組み合わせてテーブルを生成します。
■ 属性

属性説明

ALIGN=... H3/e2/N2。テーブルと、テーブルの周りのテキストの配置を指定します。
centerを指定するとテーブルが左右の中央に表示されます。NNでは4.0から有効です。
leftを指定するとテーブルが左端に寄せられ、これを囲むようにテキストが表示されます。これをテキストの回り込みと呼びます。
rightを指定するとテーブルが右側に寄せられ、これを囲むようにテキストが表示されます。これをテキストの回り込みと呼びます。

BORDER=n H3/e2/N2。テーブルの外枠の太さを指定します。0を指定すると外枠、内枠を表示しません。<TR></TR> や <TD></TD>のように空の行や列を挿入することにより、特定の線を太くすることもできるようです。

WIDTH=n H3/e2/N2。テーブルの横幅を WIDTH=100 や WIDTH="80%" のように指定します。ただし、指定しても、ブラウザのアルゴリズムによって自動調整されてしまうことがあります。IE5.0あたりでは、横幅を完全に指定できるとも聞いたのですが、未確認。

HEIGHT=n e2/N2。テーブルの高さを指定します。

CELLSPACING=n H3/e2/N2。内枠の太さを指定します。0を指定すると立体感の無い枠線を表示することができます。

CELLPADDING=n H3/e2/N2。罫線とデータの隙間(縦、横共)を指定します。

HSPACE=n N2。テーブルの左右にn分のスペースをあけます。ALIGN=right|leftと組み合わせた際に有効です。

VSPACE=n N2。テーブルの上下にn分のスペースをあけます。ALIGN=right|leftと組み合わせた際に有効です。

BGCOLOR="color" H4/e2/N3。テーブルの内側の色を指定します。

BACKGROUND="url" e3/N4。テーブルの内側に表示する背景イメージを指定します。

BORDERCOLOR="color" e2/N4。枠線の色を指定します。

BORDERCOLORDARK="color" e2。枠線の暗い部分の色を指定します。

BORDERCOLORLIGHT="color" e2。枠線の明るい部分の色を指定します。

FRAME=... H4/e3。テーブルの枠線の表示の有無を指定します。border(上下左右)、box(上下左右)、void(無し)、above(上)、below(下)、lhs(左)、rhs(右)、hsides(上下)、vsides(左右)の線を表示します。

RULES=... H4/e3。テーブルの内枠の表示の有無を指定します。allはすべて表示する。noneはすべて表示しない。rowsは縦線を表示しない。colsは横線を表示しない。groupsは <THEAD>、<TBODY>、<TFOOT>で囲んだグループの境界にのみ横線を表示します。

COLS=n e3/N4。テーブルの列数を指定します。これを指定することにより、長いテーブルの表示を高速化することができます。

SUMMARY="..." H4。音声読み上げブラウザなどのために、この表の目的や構成の説明を記述します。IE4.0やNN4.0では無視されます。

■ 使用例
【HTMLソース】
<TABLE BORDER=8 WIDTH=250 HEIGHT=100>
  <CAPTION>テーブルの例</CAPTION>
  <TR>
    <TH><BR></TH>
    <TH>列-A</TH>
    <TH>列-B</TH>
    <TH>列-C</TH>
  </TR>
  <TR>
  </TR>
  <TR ALIGN=center>
    <TD>行-1</TD>
    <TD>A1</TD>
    <TD>B1</TD>
    <TD ROWSPAN=2>C1-C2</TD>
  </TR>
  <TR ALIGN=center>
    <TD>行-2</TD>
    <TD>A2</TD>
    <TD>B2</TD>
  </TR>
  <TR ALIGN=center>
    <TD>行-3</TD>
    <TD>A3</TD>
    <TD COLSPAN=2>A3-B3</TD>
  </TR>
</TABLE>
【ブラウザでの表示】

テーブルの例

列-A 列-B 列-C

行-1 A1 B1 C1-C2

行-2 A2 B2

行-3 A3 A3-B3

■ 補足
テーブルのそれぞれの桝目のことをセルと呼びます。中身が何も無いセルは、<TD><BR></TD>とすることにより窪ませることができます。
太い縦線を表示するには、<TD></TD>のように空の列を挟みます。太い横線を表示するには、<TR></TR>のように空の行を挟みます。
HSPACEとVSPACEはマニュアルには書いていないけど試してみたら使えたと報告をいただきました。でも、BORDERやCELLSPACINGを大きめにとると表示が乱れるそうです。
テーブルのセルとセルの間の隙間を無くすには、<TABLE>タグにBORDER=0 CELLSPACING=0 CELLPADDING=0 を指定し、かつ、<TD>～</TD>の間で改行を行わないようにしてください。これを怠ると、Netscape Navigatorで隙間があいてしまいます。

属性	説明
ALIGN=...	H3/e2/N2。テーブルと、テーブルの周りのテキストの配置を指定します。 centerを指定するとテーブルが左右の中央に表示されます。NNでは4.0から有効です。 leftを指定するとテーブルが左端に寄せられ、これを囲むようにテキストが表示されます。これをテキストの回り込みと呼びます。 rightを指定するとテーブルが右側に寄せられ、これを囲むようにテキストが表示されます。これをテキストの回り込みと呼びます。
BORDER=n	H3/e2/N2。テーブルの外枠の太さを指定します。0を指定すると外枠、内枠を表示しません。<TR></TR> や <TD></TD>のように空の行や列を挿入することにより、特定の線を太くすることもできるようです。
WIDTH=n	H3/e2/N2。テーブルの横幅を WIDTH=100 や WIDTH="80%" のように指定します。ただし、指定しても、ブラウザのアルゴリズムによって自動調整されてしまうことがあります。IE5.0あたりでは、横幅を完全に指定できるとも聞いたのですが、未確認。
HEIGHT=n	e2/N2。テーブルの高さを指定します。
CELLSPACING=n	H3/e2/N2。内枠の太さを指定します。0を指定すると立体感の無い枠線を表示することができます。
CELLPADDING=n	H3/e2/N2。罫線とデータの隙間(縦、横共)を指定します。
HSPACE=n	N2。テーブルの左右にn分のスペースをあけます。ALIGN=right\|leftと組み合わせた際に有効です。
VSPACE=n	N2。テーブルの上下にn分のスペースをあけます。ALIGN=right\|leftと組み合わせた際に有効です。
BGCOLOR="color"	H4/e2/N3。テーブルの内側の色を指定します。
BACKGROUND="url"	e3/N4。テーブルの内側に表示する背景イメージを指定します。
BORDERCOLOR="color"	e2/N4。枠線の色を指定します。
BORDERCOLORDARK="color"	e2。枠線の暗い部分の色を指定します。
BORDERCOLORLIGHT="color"	e2。枠線の明るい部分の色を指定します。
FRAME=...	H4/e3。テーブルの枠線の表示の有無を指定します。border(上下左右)、box(上下左右)、void(無し)、above(上)、below(下)、lhs(左)、rhs(右)、hsides(上下)、vsides(左右)の線を表示します。
RULES=...	H4/e3。テーブルの内枠の表示の有無を指定します。allはすべて表示する。noneはすべて表示しない。rowsは縦線を表示しない。colsは横線を表示しない。groupsは <THEAD>、<TBODY>、<TFOOT>で囲んだグループの境界にのみ横線を表示します。
COLS=n	e3/N4。テーブルの列数を指定します。これを指定することにより、長いテーブルの表示を高速化することができます。
SUMMARY="..."	H4。音声読み上げブラウザなどのために、この表の目的や構成の説明を記述します。IE4.0やNN4.0では無視されます。

<CAPTION>～</CAPTION> - テーブルの表題 - H3/e2/N2

■ 説明
テーブルの表題を表示します。
■ 属性

属性説明

ALIGN=... H3/e2/N2。表題の位置を指定します。...にはtop, bottomのいずれかを指定します。IEでは、left、right、centerも指定できます。

VALIGN=... e2。topもしくはbottomを指定します。表題を右下に表示したいときに、ALIGN=とVALIGN=を組み合わせて使用します。

■ 使用例
<TABLE>を参照してください。

属性	説明
ALIGN=...	H3/e2/N2。表題の位置を指定します。...にはtop, bottomのいずれかを指定します。IEでは、left、right、centerも指定できます。
VALIGN=...	e2。topもしくはbottomを指定します。表題を右下に表示したいときに、ALIGN=とVALIGN=を組み合わせて使用します。

<TR>～</TR> - テーブルの行 - H3/e2/N2

■ 説明
<TR>～</TR>でテーブルの各行を指定します。 </TR>は省略可能です。
■ 属性

属性説明

ALIGN=... H3/e2/N2。項目を表示する位置を指定します。...にはleft, center, rightのいずれかを指定します。HTML4.0ではchar, justifyも定義されていますが、IEやNNには実装されていません。

VALIGN=... H3/e2/N2。項目を表示する縦方向の位置を指定します。...にはtop, middle, bottomのいずれかを指定します。IEやNNではbaselineも使用可能です。

BGCOLOR="color" H4/e2/N3。テーブルの項目の背景色を指定します。IE2.0 以降、NN3.0以降で使用可能です。

BORDERCOLOR="color" e2。<TABLE>の項目を参照してください。

BORDERCOLORDARK="color"

BORDERCOLORLIGHT="color"

BACKGROUND="url" N4。背景画像を指定します。

■ 使用例
<TABLE>を参照してください。

属性	説明
ALIGN=...	H3/e2/N2。項目を表示する位置を指定します。...にはleft, center, rightのいずれかを指定します。HTML4.0ではchar, justifyも定義されていますが、IEやNNには実装されていません。
VALIGN=...	H3/e2/N2。項目を表示する縦方向の位置を指定します。...にはtop, middle, bottomのいずれかを指定します。IEやNNではbaselineも使用可能です。
BGCOLOR="color"	H4/e2/N3。テーブルの項目の背景色を指定します。IE2.0 以降、NN3.0以降で使用可能です。
BORDERCOLOR="color"	e2。<TABLE>の項目を参照してください。
BORDERCOLORDARK="color"
BORDERCOLORLIGHT="color"
BACKGROUND="url"	N4。背景画像を指定します。

<TH>～</TH> - テーブルの項目名 - H3/e2/N2

■ 説明
テーブルの各見出しを記述します。 </TH>は省略可能です。項目は中央に太文字で表示される点が異なる他は、ほとんど<TD>と同じ働きをします。
■ 属性
<TD>を参照してください。
■ 使用例
<TABLE>を参照してください。

<TD>～</TD> - テーブルの項目 - H3/e2/N2

■ 説明
テーブルの各項目を記述します。 </TD>は省略可能です。
■ 属性

属性説明

ALIGN=... H3/e2/N2。項目の中身の表示位置を指定します。left、right、centerのいずれかを指定します。HTML3.2ではjustify, charも定義されています。

VALIGN=... H3/e2/N2。項目の中身の表示位置を指定します。top、middle、bottomのいずれかを指定します。H4/e2/N4ではbaselineも指定可能です。

ROWSPAN=n H3/e2/N2。縦方向に項目をn個分連結します。

COLSPAN=n H3/e2/N2。横方向に項目をn個分連結します。

WIDTH=n H3/e2/N2。項目の横幅を WIDTH=100 や WIDTH="80%" のように指定します。

HEIGHT=n H3/e2/N2。項目の高さを指定します。

BGCOLOR="color" H4/e2/N3。項目の背景色を指定します。

BACKGROUND="url" e3/N4。項目の内側に表示する背景イメージを指定します。

BORDERCOLOR="color" e2。<TABLE>の項目を参照してください。

BORDERCOLORDARK="color"

BORDERCOLORLIGHT="color"

NOWRAP H3/e2/N2。項目内での改行を禁止します。

■ 使用例
<TABLE>を参照してください。

属性	説明
ALIGN=...	H3/e2/N2。項目の中身の表示位置を指定します。left、right、centerのいずれかを指定します。HTML3.2ではjustify, charも定義されています。
VALIGN=...	H3/e2/N2。項目の中身の表示位置を指定します。top、middle、bottomのいずれかを指定します。H4/e2/N4ではbaselineも指定可能です。
ROWSPAN=n	H3/e2/N2。縦方向に項目をn個分連結します。
COLSPAN=n	H3/e2/N2。横方向に項目をn個分連結します。
WIDTH=n	H3/e2/N2。項目の横幅を WIDTH=100 や WIDTH="80%" のように指定します。
HEIGHT=n	H3/e2/N2。項目の高さを指定します。
BGCOLOR="color"	H4/e2/N3。項目の背景色を指定します。
BACKGROUND="url"	e3/N4。項目の内側に表示する背景イメージを指定します。
BORDERCOLOR="color"	e2。<TABLE>の項目を参照してください。
BORDERCOLORDARK="color"
BORDERCOLORLIGHT="color"
NOWRAP	H3/e2/N2。項目内での改行を禁止します。

<COLGROUP>～</COLGROUP> - テーブルの列グループ - H4/e3

■ 説明
テーブルの列をグループ化し、列全体の項目の表示位置などを指定します。 </COLGROUP>は省略可能です。
■ 属性

属性説明

ALIGN=... H4/e3。項目の表示位置を指定します。left, right, centerのいずれかを指定します。HTML4.0ではchar, justifyも定義されています。

VALIGN=... H4/e4。baseline, bottom, middle, topのいずれかを指定します。

SPAN=n H4/e3。指定した列数まとめてひとつのグループとしてグループ化します。

WIDTH=n H4/e4。指定した列の横幅を指定します。

■ 使用例
【HTMLソース】
<TABLE WIDTH=250 BORDER=1>
<COLGROUP>
  <COL ALIGN=center>
  <COL ALIGN=left>
</COLGROUP>
<COLGROUP SPAN=2 ALIGN=center>
</COLGROUP>
<TR><TD>あ</TD><TD>あ</TD>
<TD>あ</TD><TD>あ</TD></TR>
<TR><TD>あ</TD><TD>あ</TD>
<TD>あ</TD><TD>あ</TD></TR>
<TR><TD>あ</TD><TD>あ</TD>
<TD>あ</TD><TD>あ</TD></TR>
</TABLE>
【ブラウザでの表示】

ああああ

ああああ

ああああ

この例では最初の<COLGROUP>は<COL>による2列の属性を指定し、2つ目の<COLGROUP>はSPANによって残り2列の属性を指定していますが、通常は<COLGROUP>による指定のみで事は足りると思います。

属性	説明
ALIGN=...	H4/e3。項目の表示位置を指定します。left, right, centerのいずれかを指定します。HTML4.0ではchar, justifyも定義されています。
VALIGN=...	H4/e4。baseline, bottom, middle, topのいずれかを指定します。
SPAN=n	H4/e3。指定した列数まとめてひとつのグループとしてグループ化します。
WIDTH=n	H4/e4。指定した列の横幅を指定します。

<COL> - テーブルの列属性 - H4/e3

■ 説明
<COLGROUP>の各要素を指定します。ほとんどの場合は<COLGROUP>のみで事が足りるのであまり使用することはないでしょう。<TABLE RULES=GROUPS>で縦線を制御している時に、どうしてもグループ内の列の属性を個別に指定したい時に<COL>が役立ちます。
■ 属性

属性説明

ALIGN=... H4/e3。項目の表示位置を指定します。left, right, centerのいずれかを指定します。HTML4.0ではchar, justifyも定義されています。

VALIGN=... H4/e4。baseline, bottom, middle, topのいずれかを指定します。

SPAN=n H4/e3。指定した列数まとめて同じ設定を行います。

WIDTH=n H4/e4。指定した列の横幅を指定します。

■ 使用例
<COLGROUP>を参照してください。

属性	説明
ALIGN=...	H4/e3。項目の表示位置を指定します。left, right, centerのいずれかを指定します。HTML4.0ではchar, justifyも定義されています。
VALIGN=...	H4/e4。baseline, bottom, middle, topのいずれかを指定します。
SPAN=n	H4/e3。指定した列数まとめて同じ設定を行います。
WIDTH=n	H4/e4。指定した列の横幅を指定します。

<THEAD>～</THEAD> - テーブルヘッダ - e3

<TBODY>～</TBODY> - テーブルボディ - e3

<TFOOT>～</TFOOT> - テーブルフッタ - e3

■ 説明
テーブルのいくつかの行を<THEAD>～</THEAD>などで囲むことにより、ヘッダ、本体、フッタの各グループを定義します。これらは、<TABLE RULES=groups>とした時に有効です。 </THEAD>などは省略可能です。
■ 属性

属性説明

ALIGN=... H4/e4。項目の表示位置を指定します。left, right, centerのいずれかを指定します。HTML4.0ではchar, justifyも定義されています。

VALIGN=... H4/e4。baseline, bottom, middle, topのいずれかを指定します。

■ 使用例
【HTMLソース】
<TABLE BORDER=8 WIDTH=250 HEIGHT=100>
 <THEAD>
  <TR><TD>あああ</TD><TD>いいい</TD></TR>
  <TR><TD>あああ</TD><TD>いいい</TD></TR>
 </THEAD>
 <TBODY>
  <TR><TD>あああ</TD><TD>いいい</TD></TR>
  <TR><TD>あああ</TD><TD>いいい</TD></TR>
 </TBODY>
 <TFOOT>
  <TR><TD>あああ</TD><TD>いいい</TD></TR>
  <TR><TD>あああ</TD><TD>いいい</TD></TR>
 </TFOOT>
</TABLE>
■ 補足
本当は、<THEAD>、<TFOOT>、<TBODY>の順に書くそうです。

属性	説明
ALIGN=...	H4/e4。項目の表示位置を指定します。left, right, centerのいずれかを指定します。HTML4.0ではchar, justifyも定義されています。
VALIGN=...	H4/e4。baseline, bottom, middle, topのいずれかを指定します。