プロミスのサイトです。
しかも simplePopover 無理 本橋 機器 contentWindow 関係 手数料 gIsSubnavDisplayed ポリシー 中立 与える セゾン キッズウェア 期間 解除 sendYesNoRating 解除 ゴールド レディス 基づき 互い 過ごす にあたり 体験 sessionshvlNJS おもちゃ ローソン ignoreReviewHistoDiv

テーブルとは?/ プロミス

[ 384] テーブル -- ごく簡単なHTMLの説明
[引用サイト]  http://www.kanzaki.com/docs/html/htminfo16.html

いくつかの属性とそのサンプルのような、2次元で表現できる情報は「表」の形にまとめると理解しやすくなります。表計算やデータベースでは、横軸に属性(氏名、住所、電話など)をとり、縦軸にサンプル(それぞれの属性を持つメンバー)をとって表現します。リストが「列挙」という形で1次元の情報を表現していたのと対比すると、「表」がふさわしい情報のタイプがよく分かります。
簡単なテーブルを作ってみるのが理解の早道です。上の図のように、table要素の中にtr要素があり、その中にtd要素があるという形で要素(タグ)を入れ子にしていきます。
という値を設定すると、下のようなテーブルになります。色々値を変えてみて、どんな形のテーブルになるか自分で確認してください。
図表を示す場合、普通はその内容を簡潔に示した説明文(キャプション)を用意します。テーブルにこの説明を結びつける役割を果たすのがcaption要素です。caption要素は、対象となるtable要素の、開始タグの直後に1つだけ記述します。captionは比較的短い説明文を前提としており、内容はインライン要素に限られます(インライン要素が使えるということは、たとえばキャプションに出典へのリンクを埋め込むことも可能ということになります)。
テーブルとそのキャプションは、視覚的に表現できる場合は一見して全体像を捉えやすく、説明は簡潔なもので十分です(そのように情報を表現するのが「表」の役割です)。しかし、音声合成などの手段で文書を利用する場合、「表」は必ずしも理解しやすい方法ではありません。そこで、table要素にsummary属性を加えて、そのテーブルの目的・内容と、テーブルがどのように構成されているかの概略を提供することが推奨されています。なかなか実行できないことですが、ハンディのある人にも利用できるページをつくるために、大切な表にはこうした情報も加えるようにしたいものです。
最初に述べたように、「表」は横軸に属性をとり、縦軸にそのサンプルを列挙するという使い方に適しています。その場合、表の中には実際のサンプルデータを示す行の他に、それぞれの列がどんな属性を表すかという「項目名」の行が含まれます。このような項目名を示すためにth要素が用意されています。これは行単位で指定する(trの代わり)要素ではなく、tr要素の内部で、tdを置き換えて個々のセルを「項目名」として指定します。
この内容については細かな説明が必要なので、音声ブラウザの対応状況と合わせ、別のページ「テーブルとアクセシビリティ」にまとめました。
ここまででテーブルの基本的な要素をひととおり解説しました。以下はテーブルの連結、グループ化などの応用について取り上げます。
テーブルのセルの背景に色をつけてより情報を分かりやすく表現したくなることもあります。スタイルシートやスタイル属性を用いて、行単位、セル単位の色を設定できます。
行(tr)のスタイル属性を指定することで、項目名の行全体の背景色を異なったものにしています。tdにスタイルを設定すると、そのセルだけに適用されます。
このページの例では、分かりやすさのために、タグにスタイル情報を直接埋め込むインラインスタイル属性を紹介していますが、実際はクラス属性とスタイルシートを組み合わせた設定の方が合理的です。スタイルシートの章を参照してください。
古典的な手法としてはtdの属性としてbgcolorを指定するというのがありますが、この属性は使うべきでないとされていますから、できるだけスタイルシートを用いるようにしましょう。
このセルの伸張を行うと、データの再利用が難しくなります。どうしても視覚的にセルをまとめる必要がある時以外は、セルの伸張は使わず、同じ見出し項目やセルデータを繰り返しておきましょう。共通する見出しを持つ行(列)は、次に述べる行(列)のグループ化を行う方が、見た目も分かりやすく、データも有効に活用できます。
HTML 4.0以降では、行、列をグループ化する手段が定められています。複数の行、列をグループとして示すことで、情報がより理解しやすくなることがあります。見方によっては、2次元の情報を表現するテーブルに、グループ化によってもう一つの次元を加えると捉えることもできます。
最初に述べたようにHTMLのテーブルは行を単位として構成されるので、そのままでは「同じ列に共通した」属性を設定することができません。col要素を用いて、同じ列に属するセル(td要素)を一まとまりの要素として扱うことで、列単位の設定が可能になります。
tbody要素は、列のグループ化におけるcolgroup要素に対応するもので、複数のtbody要素を用いて、行単位の情報を構造的にグループ化することもできます。例えば、日本の都道府県の人口や面積などのテーブルを作る場合、都道府県を示すそれぞれの行を関東、近畿などの地域ごとtbodyでグループ化するといった使い方が可能です。

 

戻る

プロミスのサイトです。

プロミスのサイトです。