リファレンスインデックスへ
アクセシビリティも考慮して表組みするための10のタグ

アクセシビリティも考慮して表組みするための10のタグ

有限会社タグパンダ
喜安 亮介
2009/4/24
XHTMLでページ全体をレイアウトする際に“表”を使っていませんか? それはCSSでやるべきで、ほかに使いどころは多々あります
今回紹介するタグ
table caption thead tfoot tbody tr td th colgroup col

Webアクセシビリティを考慮した表組みをしよう

 今回は“表組み”(テーブル)を表すタグを紹介してきたいと思います。HTMLの表組みは、table要素でマークアップされたブロックで、Excelでよく見る「スプレッドシート」と同じイメージです。tr要素が“行”、th/td要素が“列”を表します。Webアクセシビリティを考慮した表組みをするには、以下に上げる点も踏まえ、きちんとコーディングする必要があります。

  • table要素にsummary属性を付けて要約を記述
  • テーブル項目のタイトルは、th要素でマークアップ
  • caption要素により、きちんと表題を付ける
  • theadやtfoot、tbody要素によりテーブル行をグループ分け

 それぞれ表組みの構造を意識したうえで、適切にマークアップを行いましょう。

table要素

 table要素は、一覧表、年表など表を定義する際に使います。ブロックレベル要素として機能し、thead、tfoot、tbody、tr、colgroup、col要素だけしか内包できません。

 table 表(テーブル)を定義するtable要素

caption要素

 caption要素は表題を記述する場合に使います。table要素の開始タグ直後にのみ記述できる要素で、1つのtable要素に対して、1つのcaption要素しか内包できません。インライン要素とテキストを内包できます。

 caption 表題を定義するcaption要素

thead要素

 thead要素は、表のヘッダ部分を定義する際に使います。table要素中には、1つのthead要素しか存在できません。tr要素を1つ以上内包する必要があります。

 thead 表のヘッダ部分を定義するthead要素

tfoot要素

 tfoot要素は、表のフッタ部分を定義する際に使います。table要素中には、1つのtfoot要素しか存在できません。tr要素を1つ以上内包する必要があります。

 tfoot 表のフッタ部分を定義するtfoot要素

tbody要素

 tbody要素は、表のメイン部分を示します。table要素中に、複数のtbody要素が存在できます。また文書型がXHTMLの場合は、tbody要素の代わりにtr要素を直接記述できます。tr要素を1つ以上内包する必要があります。

 tbody 表のメイン部分を表すtbody要素

tr要素

 tr要素は、表の行を定義する際に使います。td要素、もしくはth要素を1つ以上内包する必要があります。

 tr 表の行を定義するtr要素

td要素

 td要素は、表内の最小単位の枠(セル)を示します。テキスト・インライン要素・ブロック要素を内包できます。

 td 表内の最小単位の枠(セル)を表すtd要素

th要素

 th要素は、td要素に見出しの意味合いを付加したい際に使います。テキスト・インライン要素・ブロック要素を内包できます。

 th td要素に見出しの意味合いを付加するth要素

colgroup要素

 colgroup要素は、表の列を構造的にグループ分けする際に使われます。col要素のみを内包できます。

 colgroup 表の列を構造的にグループ分けするcolgroup要素

col要素

 col要素は、列のスタイルをまとめて調節する際に使われます。colgroup要素と違い、グループ分けという意味合いは持ち合わせていません。

 col 列のスタイルをまとめて調節するcol要素


喜安 亮介……1980年愛媛県生まれ。タグパンダの代表取締役。ディレクター兼デザイナーとしてWeb制作案件に携わる。社名のパンダは、「白・黒はっきりした正しい判断力と柔軟性のあるクリエイティブな発想」を提供するという思いから。

  1/11

 INDEX
Web標準HTMLタグリファレンス(4)
アクセシビリティも考慮して表組みするための10のタグ
テーブル
  table 表(テーブル)を定義するtable要素
  caption 表題を定義するcaption要素
  thead 表のヘッダ部分を定義するthead要素
  tfoot 表のフッタ部分を定義するtfoot要素
  tbody 表のメイン部分を表すtbody要素
  tr 表の行を定義するtr要素
  td 表内の最小単位の枠(セル)を表すtd要素
  th td要素に見出しの意味合いを付加するth要素
  colgroup 表の列を構造的にグループ分けするcolgroup要素
  col 列のスタイルをまとめて調節するcol要素

【関連記事】

デザイナーのためのWeb学習帳
Webを構成する技術を超初心者向けに説明します。まずは基本の基本である「HTML」から攻略していこう!
デザインハック」コーナー
いまさら聞けないCSS/スタイルシート入門
Webデザインにあると便利なCSS。ちょっとサイトをステキにするためのスタイルシートです。基本の基本を学びませんか?
デザインハック」コーナー


「デザインハック」コーナーへ


@IT Special

- PR -

TechTargetジャパン


HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

もっと見る

ホワイトペーパーTechTargetジャパン

注目のテーマ

デザインハック 記事ランキング

本日 月間
ソリューションFLASH