テーブルとは？
|
いくつかの属性とそのサンプルのような、2次元で表現できる情報は「表」の形にまとめると理解しやすくなります。表計算やデータベースでは、横軸に属性（氏名、住所、電話など）をとり、縦軸にサンプル（それぞれの属性を持つメンバー）をとって表現します。リストが「列挙」という形で1次元の情報を表現していたのと対比すると、「表」がふさわしい情報のタイプがよく分かります。 HTMLのテーブルはたくさんの要素や属性があって複雑ですが、XHTMLのモジュール化においてBasic Tableと分類されている範囲として、まず項目名あたりまで目を通しておくだけでもよいでしょう。 HTMLにおける表はtable要素を使って表現します。表の中には1つ以上の「行」があり、その行の中にはまた1つ以上の「セル」があるという考え方でテーブルを表現します。「行」をtr要素（Table Row）、「セル」をtd要素（Table Data）で表します。 簡単なテーブルを作ってみるのが理解の早道です。上の図のように、table要素の中にtr要素があり、その中にtd要素があるという形で要素（タグ）を入れ子にしていきます。 欧米のタイプライター文化では、単に「表」というとこのように罫線を使わずに縦の列をそろえたものを指すことが多いわけですが、日本人ならずとも、ちょっと罫線を入れてもらわないと見にくい。このあたりもスタイルシートで記述することができますが、簡便な方法としてはtableの開始タグでborder, cellspacing, cellpaddingといった属性を指定します。それぞれの属性は という値を設定すると、下のようなテーブルになります。色々値を変えてみて、どんな形のテーブルになるか自分で確認してください。 本来ならば「スタイルシートを使う」といきたいところですが、基本的な機能の割にCSS1で細かなサポートがなかったため、border, cellpadding, cellspacingを含むのテーブルの視覚表現属性はHTML 4.01でも本来の仕様の一部となっています。スタイルシートでこれらをコントロールするときは、border、paddingなどのプロパティをtable, tdそれぞれに設定します。 図表を示す場合、普通はその内容を簡潔に示した説明文（キャプション）を用意します。テーブルにこの説明を結びつける役割を果たすのがcaption要素です。caption要素は、対象となるtable要素の、開始タグの直後に1つだけ記述します。captionは比較的短い説明文を前提としており、内容はインライン要素に限られます（インライン要素が使えるということは、たとえばキャプションに出典へのリンクを埋め込むことも可能ということになります）。 テーブルとそのキャプションは、視覚的に表現できる場合は一見して全体像を捉えやすく、説明は簡潔なもので十分です（そのように情報を表現するのが「表」の役割です）。しかし、音声合成などの手段で文書を利用する場合、「表」は必ずしも理解しやすい方法ではありません。そこで、table要素にsummary属性を加えて、そのテーブルの目的・内容と、テーブルがどのように構成されているかの概略を提供することが推奨されています。なかなか実行できないことですが、ハンディのある人にも利用できるページをつくるために、大切な表にはこうした情報も加えるようにしたいものです。 summary属性の内容は、たとえばMozillaでは表の中でコンテクストメニューの「Properties」を選ぶことで、次のように表示されます。 音声ブラウザは、テーブル情報としてsummary属性を読み上げ、利用者の理解を助けることができます。 最初に述べたように、「表」は横軸に属性をとり、縦軸にそのサンプルを列挙するという使い方に適しています。その場合、表の中には実際のサンプルデータを示す行の他に、それぞれの列がどんな属性を表すかという「項目名」の行が含まれます。このような項目名を示すためにth要素が用意されています。これは行単位で指定する（trの代わり）要素ではなく、tr要素の内部で、tdを置き換えて個々のセルを「項目名」として指定します。 音声合成などで大きなテーブルを読み上げる場合、セルの値は何を意味するのか（どの見出しに対応するデータなのか）を把握するのが難しくなります。HTML4のテーブルでは、scope属性、headers属性などを用いて、見出しとデータセルの関連を示すことができます。 この内容については細かな説明が必要なので、音声ブラウザの対応状況と合わせ、別のページ「テーブルとアクセシビリティ」にまとめました。 ここまででテーブルの基本的な要素をひととおり解説しました。以下はテーブルの連結、グループ化などの応用について取り上げます。 テーブルのセルの背景に色をつけてより情報を分かりやすく表現したくなることもあります。スタイルシートやスタイル属性を用いて、行単位、セル単位の色を設定できます。 行（tr）のスタイル属性を指定することで、項目名の行全体の背景色を異なったものにしています。tdにスタイルを設定すると、そのセルだけに適用されます。 このページの例では、分かりやすさのために、タグにスタイル情報を直接埋め込むインラインスタイル属性を紹介していますが、実際はクラス属性とスタイルシートを組み合わせた設定の方が合理的です。スタイルシートの章を参照してください。 古典的な手法としてはtdの属性としてbgcolorを指定するというのがありますが、この属性は使うべきでないとされていますから、できるだけスタイルシートを用いるようにしましょう。 隣り合う複数のセルのデータが同じ場合、それらのセルを連結してまとめて表現したくなることがあります。HTMLの表でセルを結合するには、rowspan, colspanという属性を指定します。 このセルの伸張を行うと、データの再利用が難しくなります。どうしても視覚的にセルをまとめる必要がある時以外は、セルの伸張は使わず、同じ見出し項目やセルデータを繰り返しておきましょう。共通する見出しを持つ行（列）は、次に述べる行（列）のグループ化を行う方が、見た目も分かりやすく、データも有効に活用できます。 このセクションでとりあげる機能は、対応しないブラウザでは期待通りには表現できません。Netscape Navigatorの場合、バージョン6/Mozillaで行のグループ化のみ対応しているようです。 HTML 4.0以降では、行、列をグループ化する手段が定められています。複数の行、列をグループとして示すことで、情報がより理解しやすくなることがあります。見方によっては、2次元の情報を表現するテーブルに、グループ化によってもう一つの次元を加えると捉えることもできます。 最初に述べたようにHTMLのテーブルは行を単位として構成されるので、そのままでは「同じ列に共通した」属性を設定することができません。col要素を用いて、同じ列に属するセル（td要素）を一まとまりの要素として扱うことで、列単位の設定が可能になります。 col要素タイプは行を示す要素（tr要素など）の前において、テーブルがどのような列を持つかを示します（空要素なので、 />で閉じます）。col要素ごとにスタイルなどを設定することができます。 col要素タイプは単純に列単位に属性を設定するために用いますが、複数の列を構造的にグループ化する（意味的なまとまりを構成する）場合はcolgroup要素を用います。複数の列をグループ化する場合は、colgroup要素の中にcol要素を記述しますが、グループに含まれる列が全て同じ属性である場合は、col要素なしで直接colgroupに属性を設定することもできます。逆に、colgroup要素なしで直接col要素を記述することもできます。いずれも複数列にまたがる場合はspan属性で対象となる列の数を示します。 という設定を最初のtr要素の前に記述します。「果物の名称」と、その属性である「味」「色」を異なるグループに分け、それぞれをcolgroupとします。col要素、colgroup要素に対応するブラウザでは、左1列と右2列が異なる背景色でグループ化されます。 行のグループ化は、ヘッダ(thead要素)、ボディ(tbody要素)、フッタ(tfoot要素)という3つの要素を使います。ヘッダ、フッタは1つの表につき1つずつ設定されますが、ボディは必要に応じて複数設定でき、それぞれをグループとして扱うことができます。 非常に長いテーブルを表示・印刷する場合、テーブルのフッタが最初に分かっていれば、データを全て読み込まなくても、画面・用紙単位で常にフッタを表示することができます。そのため、これらの要素はthead, tfoot, tbodyの順に記述します。 thead（「名称」の行）とtfoot（「果実総括」の行）があなたのブラウザでどのように表示されるか注目してください。これらの要素に対応するブラウザの場合、それぞれのスタイルが対応する行に反映され、かつtfootは表の一番最後に表示されます。未対応のブラウザでは、単純にセルが並んでいると見なされ、スタイルも反映されなければ、tfootはtbodyよりも前に表示されてしまいます。 tbody要素は、列のグループ化におけるcolgroup要素に対応するもので、複数のtbody要素を用いて、行単位の情報を構造的にグループ化することもできます。例えば、日本の都道府県の人口や面積などのテーブルを作る場合、都道府県を示すそれぞれの行を関東、近畿などの地域ごとtbodyでグループ化するといった使い方が可能です。 ※テーブル関連要素の背景などはプレゼンテーションとマルチメディア - 仕様書に見るHTML(3)も参照してください。 |
[ 61] テーブル -- ごく簡単なHTMLの説明
[引用サイト] http://www.kanzaki.com/docs/html/htminfo16.html
