The Web Design Group

TABLE−テーブル

構  文 <TABLE>...</TABLE>
属性仕様
  • SUMMARY=Text (テーブルの目的/構造)
  • WIDTH=Length (テーブルの幅)
  • BORDER=Pixels (境界線の幅)
  • FRAME=[ void | above | below | hsides | lhs | rhs | vsides |
    box | border ](外枠)
  • RULES=[ none | groups | rows | cols | all ] (inner borders)
  • CELLSPACING=Length(セル間の空白)
  • CELLPADDING=Length (セル内の空白)
  • ALIGN=[ left | center | right ]
    (テーブルの配置)
  • BGCOLOR=Color (table background color)
  • common attributes
取る内容 選択性の CAPTIONに続いて、一つ以上の COLCOLGROUP要素、
さらに続いて、選択性の THEAD要素、選択性の TFOOT要素、
それから一つ以上の TBODY要素
内容になる APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

 TABLE要素は、行と列に配列した多次元のデータの表を設定します。 TABLEはレイアウト装置としてよく使われますが、出来るだけこの使い方は避けるべきです。テーブルは画面が小さいユーザーやテキスト・ブラウザのユーザーに問題を引き起こす原因になりますし、この問題はテーブルが唯レイアウト目的で使われている場合によくおこります。また、ブラウザはテーブルを全部読み込むまで画面に表示せず、これはテーブル内に文書全体を置いている場合に顕著にあらわれます。レイアウトのためには TABLEでなく、 スタイル・シートを試みるべきですが、まだブラウザのスタイル・シート装備にバグあり、うまくいきません。

 TABLEはテーブルに豊富な構造を提供するために、色々な要素が選択できます。選択性の CAPTION要素は、テーブルの表題をつくり、それに続いて COLCOLGROUP要素が来て列の幅やグループ化を設定します。引き続いて、 THEADTFOOTTBODY要素は、行のグループ化を設定します。選択性の THEADTFOOT要素は頭部や末尾部の行を内容にとり、一方 TBODY要素はテーブルの主行のグループ化を提供します。行グループには各行の TR要素を内容にとり、個々の TR要素はヘッダーとデーター・セルをそれぞれ内容にとります。

 少なくとも一つの TBODY要素はTABLEに要求します。 TBODYが一つしかなく、 THEADTFOOTもない場合 TBODYの開始と終了タグは両者とも選択性です。簡単なテーブルは以下の様に表わします:

<TABLE>
  <TR>
    <TH>Abbreviation</TH>
    <TH>Long Form</TH>
  </TR>
  <TR>
    <TD>AFAIK</TD>
    <TD>As Far As I Know</TD>
  </TR>
  <TR>
    <TD>IMHO</TD>
    <TD>In My Humble Opinion</TD>
  </TR>
  <TR>
    <TD>OTOH</TD>
    <TD>On The Other Hand</TD>
  </TR>
</TABLE>

 次の例の様に、このテーブルに行のグループ化と表題によってより豊富な構造にしてみます。構造の追加は、 スタイル・シートTABLE体裁用の属性 を使って容易にできます。

<TABLE>
  <CAPTION>Common Usenet Abbreviations</CAPTION>
  <THEAD>
    <TR>
      <TH>Abbreviation</TH>
      <TH>Long Form</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD>AFAIK</TD>
      <TD>As Far As I Know</TD>
    </TR>
    <TR>
      <TD>IMHO</TD>
      <TD>In My Humble Opinion</TD>
    </TR>
    <TR>
      <TD>OTOH</TD>
      <TD>On The Other Hand</TD>
    </TR>
  </TBODY>
</TABLE>

 The TABLE要素は、テーブルの目的や構造についての説明を記載する選択性の SUMMARY属性があります。 SUMMARY属性が提供する概要は、非ビジュアル・ブラウザのユーザーにとって特に助けになります。簡潔なテーブルでは CAPTIONが概要として十分ですが、複雑なテーブルでは SUMMARY属性でのより詳しい概要が有効です。以下の例は、テーブルの説明にSUMMARYを使っています。 概要は、テーブルの前でパラグラフ内に記載することもできることに注意してしてください、ブラウザのなかにはSUMMARYをサポートしていないものもありますのでこのやり方は有効です。

<TABLE SUMMARY="このテーブルは、シンボルやギリシャ文字の
         文字符号実体参照・十進法文字符号参照
         そして十六進法文字符号参照の表です。">
  <COLGROUP>
  <COLGROUP SPAN=3>
  <THEAD>
    <TR>
      <TH SCOPE=col>Character</TH>
      <TH SCOPE=col>Entity</TH>
      <TH SCOPE=col>Decimal</TH>
      <TH SCOPE=col>Hex</TH>
    </TR>
  </THEAD>
  <TBODY>
    <TR>
      <TD SCOPE=row>Latin small f with hook</TD>
      <TD>&amp;fnof;</TD>
      <TD>&amp;#402;</TD>
      <TD>&amp;#x192;</TD>
    </TR>
    ...
  </TBODY>
</TABLE>

 また、 このTABLE要素には、視覚的なブラウザでの体裁描写のヒントを設定する幾つかの選択性の属性があります。 カスケード・スタイルシートの属性と同じものが、 開発中ですが、まだ広くブラウザがサポートしていません。

その他の情報