アクセシビリティも考慮して表組みするための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。ちょっとサイトをステキにするためのスタイルシートです。基本の基本を学びませんか？ 「デザインハック」コーナー |
|
[an error occurred while processing this directive]
 |
「デザインハック」コーナーへ |
- GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 （2017/7/12）
資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する - GET／POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 （2017/7/10）
HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】 - PHPのfor文＆ループ脱出のbreak/スキップのcontinue【更新】 （2017/6/26）
素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】 - Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート （2017/6/12）
Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
 |
|
|
|
|
