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

HOME > とほほのWWW入門 > とほほのHTMLリファレンス > テーブル
1998年7月19日
<TABLE>〜</TABLE> テーブル H3/N2/e2
説明
<CAPTION> <TR>, <TH>, <TD>と組み合わせてテーブルを生成します。

属性
ALIGN=... H3/N2/e2。 テーブルと、テーブルの周りのテキストの配置を指定します。

centerを指定するとテーブルが左右の中央に表示されます。NNでは4.0から有効です。

leftを指定するとテーブルが左端に寄せられ、 これを囲むようにテキストが表示されます。 これをテキストの回り込みと呼びます。

rightを指定するとテーブルが右側に寄せられ、 これを囲むようにテキストが表示されます。 これをテキストの回り込みと呼びます。

BORDER=n H3/N2/e2。 テーブルの外枠の太さを指定します。 0を指定すると外枠、内枠を表示しません。 <TR></TR> や <TD></TD> のように空の行や列を挿入することにより、特定の線を太くすることもできるようです。
WIDTH=n H3/N2/e2。 テーブルの横幅を WIDTH=100 や WIDTH="80%" のように指定します。指定しても、ブラウザのアルゴリズムによって自動調整されてしまうことがあります。
HEIGHT=n N2/e2。 テーブルの高さを指定します。
CELLSPACING=n H3/N2/e2。 内枠の太さを指定します。 0を指定すると立体感の無い枠線を表示することができます。
CELLPADDING=n H3/N2/e2。 罫線とデータの隙間(縦、横共)を指定します。
HSPACE=n N2。 テーブルの左右にn分のスペースをあけます。
VSPACE=n N2。 テーブルの上下にn分のスペースをあけます。
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 N4/e3。 テーブルの列数を指定します。 これを指定することにより、長いテーブルの表示を高速化することができます。

使用例
<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を大きめにとると表示が乱れるそうです。


<CAPTION>〜</CAPTION> テーブルの表題 H3/N2/e2
説明
テーブルの表題を表示します。

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

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

<TR>〜</TR> テーブルの行 H3/N2/e2
説明
<TR>〜</TR>でテーブルの各行を指定します。 </TR>は省略可能です。

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

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

<TH>〜</TH> テーブルの項目名 H3/N2/e2
説明
テーブルの各見出しを記述します。 </TH>は省略可能です。 項目は中央に太文字で表示される点が異なる他は、ほとんど<TD>と同じ働きをします。

属性
<TD>を参照してください。

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

<TD>〜</TD> テーブルの項目 H3/N2/e2
説明
テーブルの各項目を記述します。 </TD>は省略可能です。

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

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

<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。 指定した列の横幅を指定します。

使用例
<TABLE WIDTH=250 BORDER=1>
<COLGROUP>
  <COL ALIGN=center>
  <COL ALIGN=left>
<COLGROUP SPAN=2 ALIGN=center>
<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>を2回使用しているので、 2個のグループに分けられています。 このグループは<TABLE>タグでRULES=GROUPS属性を指定した時に意味を持ちます。


<COL> テーブルの列属性 H4/e3
説明
<COLGROUP>の各要素を指定します。

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

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

<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のいずれかを指定します。

使用例
<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>

Copyright(C) とほほ ( http://www2e.biglobe.ne.jp/~s-hasei/ )