表を構成する要素
出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2022/06/18 17:03 UTC 版)
表形式のデータを表す要素群。その特性からレイアウトに使用されることがあるが間違いである。 また正しくマークアップする為には（他の要素に比べ）多少の知識を要する。これは音声ブラウザの挙動など、アクセシビリティを考慮した場合に制約が多いため。 table 表 (table) を構成する要素の大枠を示す。summary属性に表の要約・解説を記述する。 内容の要素には細かく順番が規定されていて以下の通りである。 0個か1個のcaption要素、0個以上のcolgroup要素とcol要素、0個以上のthead要素、0個以上のtfoot要素、1個以上のtbody要素。 caption 表題 (table caption) を示す。table要素の直下に記述する。 thead、tfoot、tbody それぞれヘッダ (table header)、フッタ (table footer)、本体 (table body) で、表内での節 (table section) を示す。 内容はtr要素のみで、1つ以上の記述が必要である。また、各要素内においての列の数は等しくなくてはならない。 colgroup 構造的な列のグループ (table column group) を示す。 グループ化させるには2つの方法があり、span属性で列数を指定する方法かcol属性を列数分記述する方法である。 col 列のグループ (table column) を示す。 colgroup要素と違い、構造的なグループを示さず、スタイルの指定を主としたグループ化を行う。 span属性でグループ化する列数を指定する。内容は空で終了タグは存在しない。 tr 表内の行 (table row)を示す。 内容に1つ以上のth要素かtd要素が必要。 th、td それぞれ、ヘッダのセル (table header cell)、データのセル (table data cell) を示す。 視覚系でないユーザーエージェントに対応する為にいくつかの整形方法がある。 ヘッダ要素のid属性と、データ要素のheaders属性を結びつける (同じ値を指定する)。これによって音声ブラウザではヘッダとデータの内容を交互に読み上げることが出来る。 上記の省略系といえるscope属性を用いる。ヘッダ属性にcolを指定することで縦方向・rowを指定することで横方向のデータと結びつけることが出来る。 ヘッダ要素にabbr属性で短縮系を指定する。例えば、ヘッダ要素の内容が"価格（円）"等の場合、逐一読み上げるのは冗長になる。abbr属性が"価格"となっていれば、「価格100」等と読み上げられ、冗長さは解消される。 以下にtable要素の記述例を示す。
| 商品名 | 価格（円） | 備考（産地・在庫など） |
|---|---|---|
| りんご | 100 | 青森産 |
| みかん | 150 | 在庫無し |
※この「表を構成する要素」の解説は、「HTML要素」の解説の一部です。
「表を構成する要素」を含む「HTML要素」の記事については、「HTML要素」の概要を参照ください。
- 表を構成する要素のページへのリンク
