表(テーブル)

HTML を使って、一覧表・数表・年表などのように表の形にまとめて提供する必要がある情報の場合には、table要素, tr要素, th要素, td要素などの表(テーブル)要素を使います。最近では HTMLエディタ等の普及により、視覚的操作(WYSIWYG)で容易に複雑な表を作成できることからレイアウト(ウェブページのデザイン・装飾)にまで表要素を使っている制作者の方も多くいます。レイアウトに表を使用すると次のようなアクセシビリティの低下を招くこともあるため、決して好ましい使い方とは言えません。

この場合のアクセシビリティの低下とは、主に音声出力や点字出力などの非視覚環境に対することを指します。レイアウトに表要素を使っている場合、表の入れ子やセルの結合が多用される傾向にあり、制作者の意図する情報の流れ通りに読み上げられなかったり、または正しく点字変換ができないことがあります。たとえば、音声出力環境においては、表を読み上げる場合、左上から右下に1セルずつ読み上げるため、行や列の関係が把握し難く、情報と読み上げ内容を一致させるのは困難になりがちです。このように制作者側の配慮や知識が至らない場合、結果として知らず知らずのうちに利用者を制限してしまっていることにもなりかねません。

表に関連する要素・属性は大量に存在しますが、それらの大半がアクセシビリティに関する要素・属性であることからも、表が複雑であることがわかります。そして、表はアクセシビリティにおける問題だけでなく、表は全体の構造を読み取ってからレンダリングを開始するため表示に時間がかかるといったユーザビリティ面も欠落させ、またフィーチャフォンの携帯電話端末(UA)の中には表をうまく表示できないものもあります。このため、表要素をレイアウトとして使用することは避けるべきであり、また特定の情報を参照するにあたって一覧表や年表、数表など表を組む必要がある場合にのみ、その必要性に応じて使用するようにしましょう。

表(テーブル)の作成

<table>
<tr><th>見出し内容</th><th>見出し内容</th></tr>
<tr><td>セル内容</td><td>セル内容</td></tr>
<tr><td>セル内容</td><td>セル内容</td></tr>
</table>

table要素は表(テーブル)を定義する基本となるブロックレベル要素です。表を作成するには、ひとつひとつのセル(枡目)や、なかに入れる項目の指定が必要になります。tr要素は table要素の中で使用して表の行(横の区切り)を定義します。さらに、td要素は tr要素の中で使用して表の各セル(内容)となる表の列(縦の区切り)を定義します。"<td>セル内容</td>" のセット数だけ横にセルが並んでいきます。つまり、"<td>セル内容</td> の繰り返し全体を tr要素で囲むことによって、1つの行として定義され、行が改められるので、"<tr><td>セル内容</td>...</tr>" のセット数が表の行数ということになります。

なお、th要素は td要素と同じように tr要素の中で使用して、表内の列(縦の区切り)の見出しセルを定義します。td要素と違うのは th要素は見出しに該当する項目のセルを設定する場合に使用します。UA の多くは th要素をセル内容の水平(左右)方向が中央揃えでテキストは太字で表示します。

関連

表のオプション

table要素はさまざまな属性と組み合わせることで、 細かい指定が行えます。指定できる属性には次のようなものがあります。

表の外枠を表示

<table border="3"><tr><td>セル内容</td></tr></table>

border属性は表の外枠の罫線の太さを指定する属性です。値には外枠の太さを整数(ピクセル数で解釈)で指定します。一部の古いUAでborder属性の指定がない場合に、罫線がない区別し難い表の表示になります。なお、border属性は非推奨属性ではありませんが、CSSborder-widthプロパティで代替することもできます。

表の外枠の罫線の表示方法を指定

<table frame="vsides" border="3"><tr><td>セル内容</td></tr></table>

frame属性は表の外枠の罫線のうち上下左右のどの部分を表示させるかを指定します。値には次の9つのキーワードがあります。

void
枠線を表示しない(初期値)
above
上端の枠線のみ表示
below
下端の枠線のみ表示
lhs
左端の枠線のみ表示
rhs
右端の枠線のみ表示
hsides
上端と下端の枠線のみ表示
vsides
左端と右端の枠線のみ表示
box
上下左右全て(周囲)の枠線を表示
border
上下左右全て(周囲)の枠線を表示

初期値は "void" のため指定がない場合は罫線を表示しません。ただし、border属性の値が "1" 以上の時は自動的に frame="border" を補って解釈します。なお、frame属性は非推奨ではありませんが、CSS の border-widthプロパティ, border-styleプロパティで同様の表現に代替できます。

表の各セル間の間隔を指定

<table cellspacing="15" border="3">
<tr><td>セル内容</td><td>セル内容</td></tr></table>

cellspacing属性は、表のセルを区切る罫線(内罫線)のサイズを指定します。つまり、表の個々のセル同士の間隔を指定します。border属性の指定がない、もしくは値が "0" の場合は、セル同士を区切る内罫線は表示されません。内罫線を表示させる場合は、table要素に cellspacing属性と border属性をいっしょに指定します。cellspacing属性の値には内罫線のサイズを整数(ピクセル数で解釈)で指定します。cellspacing属性の指定がない場合、UA の多くは初期値が "2" に設定されています。なお、cellspacing属性は非推奨属性ではありませんが、CSS の border-spacingプロパティで代替が可能です。

表のセル内の余白を指定

<table cellpadding="15" border="3">
<tr><td>セル内容</td></tr></table>

cellpadding属性は表のセル内に余白を指定する属性で、セル同士を区切る内罫線とセル内のテキストやイメージなどの内容との間に詰め物をして設ける余白のサイズを指定します。cellpadding属性の値にはセル内の余白のサイズを整数(ピクセル数で解釈)で指定します。border属性の指定がない、もしくは値が "0" の場合はセル同士を区切る内罫線は表示されませんが、cellpadding属性で指定された余白のサイズは表示に反映されます。cellpadding属性の指定がない場合、UA の多くは初期値が "1" に設定されています。なお、cellpadding属性は非推奨属性ではありませんが、CSS で th要素, td要素をセレクタとする paddingプロパティで代替が可能です。

各セル同士を区切る内罫線の表示方法を指定

<table rules="cols" cellspacing="5" border="3">
<tr><td>セル内容</td><td>セル内容</td></tr></table>

rules属性は各セルの内罫線の表示方法を指定します。値には次の5つのキーワードがあります。

none
枠線を表示しない(初期値)
groups
列グループ・行グループの間の枠線のみ表示
rows
行の間の枠線のみ表示
cols
列の間の枠線のみ表示
all
すべて表示

初期値は "none" のため指定がない場合は罫線を表示しませんが、border属性の値が "1" 以上の時は自動的にrules="all" を補って解釈します。なお、rules属性は非推奨属性ではありませんが、CSS で tbody要素, thead要素, tfoot要素, col要素, colgroup要素をセレクタとする border-widthプロパティ, border-styleプロパティで同様の表現に代替できます。

表全体のサイズを指定

<table width="200" height="150">
<tr><td>セル内容</td></tr></table>

width属性, height属性は表全体のサイズを指定します。width属性は横幅、height属性は高さを指定する属性で、値は表のサイズを整数によるピクセル数で固定するか、または表示域の横幅、縦幅に対する パーセンテージ値(%)で指定します。ただし、指定されたサイズが各セルの内容となっているものの大きさ、間隔などを足したサイズよりも小さい場合は、このサイズ指定は無効です(無視されます)。パーセンテージ値(%)でサイズを指定した場合、ユーザ側の表示域のサイズ変動にあわせて表組全体のサイズも自動的に伸縮します。

なお、height属性はブラウザの独自機能で HTML の仕様で正式に定義されているわけではありませんが、主要視覚ブラウザはすべて対応しています。width属性は非推奨属性ではありませんが、height属性もあわせて、CSS の heightプロパティ, widthプロパティでそれぞれ代替が可能です。

表の表示位置(水平方向の揃え方)の指定

<table align="center">
<tr><td>セル内容</td></tr></table>

align属性は表の配置とその後に続くテキストの揃え方を指定します。値には次の3つのキーワードを指定できます。

left
表は左に配置、その右にテキスト(複数行)が回り込む
center
表を中央揃えに表示する
right
表は右に配置、その左にテキスト(複数行)が回り込む

なお、align属性は非推奨属性のため、CSS の floatプロパティで左右の配置とその後に続くテキストの揃え方を、marginプロパティ( "table { margin-right : auto ; margin-left : auto ; }")で中央揃えをそれぞれ代替指定することが推奨されています(CSS によるブロックレベル要素の左右中央揃えを参照)。また、回り込んだテキストを途中で解除したい場合には、br要素に clear属性を指定すれば良いのですが、clear属性も非推奨属性のため、表の後に続く要素に clearプロパティを指定するか、回り込みが指定されている要素の親要素にclearfixを用いるようにしましょう。

キャプション(表題)の指定

<table border="3" align="center">
<caption align="top">表のタイトル</caption>
<tr><td>セル内容</td></tr></table>

caption要素は table要素の中で一番最初に記述して、その表にキャプション(表題)を指定します。また、caption要素の align属性はキャプションの表示位置を指定する属性で、値には上下左右の位置を指定する4つのキーワードがあります。

top
表組の上、テキストは中央揃えで表示
bottom
表組の下、テキストは中央揃えで表示
left
表組の上(デフォルト)、テキストは左揃えで表示
right
表組の上(デフォルト)、テキストは右揃えで表示

上記の通りの表示になるのはInternet Explorer のみです(旧Presto版Operaも対応していた)。"left", "right" はもともと Internet Explorer が独自に採用した機能であるため、UA によって対応が大きく異なります。

さらに、デフォルトではキャプションは表の上部に表示されますが、Internet Explorer にはキャプションの上下位置を指定する valign属性の独自機能があります。caption要素の align属性に "left"、または "right" が指定されている場合に、上下の位置を指定する次の2つのキーワードを valign属性の値に指定できます。

top
表組の上、テキストは align属性で指定された揃え方に従って表示
bottom
表組の下、テキストは align属性で指定された揃え方に従って表示
関連

セルのオプション

表を構成するための tr要素, th要素, td要素にもさまざまな属性を組み合わせることで、表示に関する細かい指定が行えます。

個々のセルのサイズを指定

<table border="1"><tr>
<th width="250" height="150">見出セル</th>
<td width="250" height="150">セル内容</td>
</tr></table>

th要素, td要素の width属性, height属性は個々のセルの表示サイズを指定します。width属性がセルの横幅, height属性がセルの高さを設定する属性で、値はセルのサイズを整数によるピクセル数で固定するか、または表示域の横幅、縦幅に対するパーセンテージ値(%)で指定します。サイズの指定は個々のセルに対して指定できますが、列・行それぞれの横幅・高さの表示サイズは、その列、行内でもっとも大きなサイズを指定したセルのサイズが適用されることになります。なお、height属性, width属性ともに非推奨属性のため、CSS の heightプロパティ, widthプロパティで代替することが推奨されています。

セル内のテキストの折り返しを禁止

<table border="1"><tr>
<th nowrap>見出セル</TH>
<td nowrap>セル内容</TD>
</tr></table>

th要素, td要素の nowrap属性はセル内のテキストを折り返しさせないで表示させる属性です。通常、表示域のサイズに応じて、または表やセルのサイズが指定されている場合はセル内に配置されたテキストはそのサイズに応じて自動的に折り返して表示されます。nowrap属性はその折り返しを禁止する属性で、これが追加されたセル内のテキストは表示域のサイズが縮小されても、テキストの折り返しが行われず、表示域からはみ出して横スクロールを表示することもあります。これは nobr要素と同じ機能です。なお、nowrap属性は非推奨属性のため、CSS の white-spaceプロパティで代替することが推奨されています。

セル内容の水平(左右)方向の揃え方の指定

<table border="1" align="center">
<tr align="center"><th>見出しセル</th><td>セル内容</td></tr>
<tr><th align="center">見出しセル</th>
<td align="center">セル内容</td></tr></table>

align属性は表のセル内のテキストやイメージなどの内容の水平(左右)方向の揃え方を指定します。tr要素に対して align属性を指定した場合は、その行内に含まれるセル全てを対象に位置揃えを指定することができます。align属性の値には次の5つのキーワードがあります。

left
内容とテキストを左揃えで表示する
right
内容とテキストを右揃えにする
center
内容とテキストを中央揃えにする
justify
文字を均等に配置し、テキストを両端揃えで表示する
char
char属性で指定した特定の文字を基準に揃えて表示する

align属性を指定しない場合、セル内容の位置揃えは、使用する言語の書字方向に応じて表示されます。使用する言語は lang属性に指定されている言語コードにより決定されます。日本語(ja)であれば初期値は左揃えの状態(left)で表示されます。ただし、見出しにあたるセルを定義する th要素の内容は使用する言語に関係なく多くの場合、中央揃えで表示されます。なお、align属性は非推奨属性のため、CSS の text-alignプロパティでテキストや画像などのセル内容の水平(左右)方向の揃え方を代替することが推奨されています。

セル内容の垂直(上下)方向の揃え方の指定

<table border="1" align="center">
<tr valign="top"><th>見出しセル</th><td>セル内容</td></tr>
<tr><th valign="top">見出しセル</th>
<td valign="top">セル内容</td></tr></table>

valign属性はセル内容の垂直(上下)方向の揃え方を指定します。tr要素に対して valign属性を指定した場合は、その行内に含まれるセル全てを対象に位置揃えを指定することができます。valign属性に指定できる値には次の4つのキーワードがあります。

top
セルの上辺に内容の上辺を揃えて表示する
middle
セルの垂直方向の長さの中央に表示する
bottom
セルの下辺に内容の下辺を揃えて表示する
baseline
テキストの1行目をベースラインで揃えて表示する(2行目以降は影響なし)

valign属性を指定しない場合、テキストやイメージは垂直方向の長さの中央(middle)に表示されます。なお、valign属性は非推奨属性ではありませんが、CSS で td要素, th要素の各セルをセレクタとする vertical-alignプロパティで同様の表現に代替できます。

表やセルの背景色・背景画像の指定

1. 背景に色をつける

<table border="1" bgcolor="#000000">
<tr bgcolor="#FFFFFF"><th>見出し内容</th><td>内容</td></tr>
<tr><th bgcolor="#FFFFFF">見出し内容</th>
<td bgcolor="#FFFFFF">内容</td></tr></table>

table要素の bgcolor属性は表全体に背景色を指定する属性です。tr要素の bgcolor属性はその1行に含まれるセル全てに対して背景色を指定します。th要素, td要素の bgcolor属性は表の各セルに個別で背景色を指定することができます。いずれの要素の bgcolor属性の値も RGB値、またはカラーネームで色を指定します。なお、bgcolor属性は非推奨属性のため、それぞれの対象に対して CSS の background-colorプロパティで代替することが推奨されています。

2. 背景にイメージを表示する

<table border="1" background="画像ファイルのURI">
<tr background="画像ファイルのURI">
<th>見出しセル</th><td>セル内容</td></tr>
<tr><th background="画像ファイルのURI">見出しセル</th>
<td background="画像ファイルのURI">セル内容</td></tr></table>

table要素の background属性は表全体に背景画像を指定する属性です。tr要素の background属性はその1行に含まれるセル全てに対して背景画像を指定します。th要素, td要素の background属性は表の各セルに個別で背景画像を指定することができます。指定された背景画像は、それぞれ表全体のサイズ、セルのサイズに応じて縦横にタイル状に繰り返し表示されます。background属性の値には画像ファイルの所在を URI で指定します。

background属性は HTML の仕様には正式に定義されていないブラウザの独自機能ですが、主要視覚ブラウザはすべて対応しています。なお、代替表現は CSS の background-imageプロパティで行うことが可能です。

複数行・列のセルを結合

1. 複数行のセルを縦方向に連結する

<table border="2">
<tr><th rowspan="5">見出しセル</th>
<td>セル内容</td></tr>
<tr><td>セル内容</td></tr><tr><td>セル内容</td></tr>
<tr><td>セル内容</td></tr><tr><td>セル内容</td></tr>
</table>

th要素, td要素の rowspan属性はセルを縦方向の複数のセル(行)に連結する属性です。rowspan属性を追加した th要素、または td要素のセルは指定数のセルを連結させ、縦にまたいだ形で表示されます。指定方法の手順は、まず基本の表を作成し、その中で連結させる複数のセルのうち、いちばん上にあるセルに rowspan属性を追加し、まとめるセルの数に応じて値を整数で指定します。最後にまとめたことによって吸収される分のセルの記述を削除すると良いでしょう。

2. 複数行のセルを横方向に連結する

<table border="1">
<tr><th colspan="5">見出しセル</th></tr>
<tr><td>セル内容</td><td>セル内容</td><td>セル内容</td>
<td>セル内容</td><td>セル内容</td></tr>
</table>

th要素, td要素の colspan属性はセルを横方向の複数のセル(列)に連結する属性です。colspan属性を追加した th要素、または td要素のセルは指定数のセルを連結させ、横にまたいだような形で表示されます。指定方法の手順は、まず基本の表を作成し連結させる複数のセルをひとつにまとめて、そこに colspan属性を追加し、まとめるセルの数に応じて値を整数で指定します。最後にまとめたことによって吸収される分のセルの記述を削除すると良いでしょう。

行・行グループ(横)の構造化

<table>
<thead><tr><td>セル内容</td><td>セル内容</td></tr></thead>
<tfoot><tr><td>セル内容</td><td>セル内容</td></tr></tfoot>
<tbody><tr><td>セル内容</td><td>セル内容</td></tr></tbody>
</table>

thead要素, tfoot要素, tbody要素は表の内容をグループ化するための要素です。それぞれ thead要素は表のヘッダ部分、tfoot要素はフッタ部分、tbody要素は本体部分をそれぞれグループ化します。この構造分けは表を横に区切るもので、ヘッダ、フッタ部分は表内に1つずつ、ボディは複数指定することができます。指定方法は、行(tr要素)単位でまとめる形で、その前後を開始タグと終了タグではさみます。 注意点として、thead要素, tfoot要素は table要素内で tbody要素よりも前(先)に記述します。これは表の本体のデータを待たずに先にヘッダとフッタを表示できるようにするためです。視覚ブラウザは tbody要素よりも前(先)に記述されている tfoot要素部分を表の一番下に表示します。

グループ化することで表が一画面に収まらない場合、ヘッダ部とフッタ部を表示域内で固定し、本体部分をその間にスクロールさせて表示することが期待されます(現在、このようなレンダリングを行う UA はありません)。また、印刷時においても表の内容を印刷するのに用紙が複数枚にまたがる場合は、用紙の全ページにヘッダ・フッタ部分のみを繰り返し付けることが期待されます(現在、このような機能をする UA はありません)。また、thead要素, tfoot要素, tbody要素はいずれも align属性(水平方向の揃え方), valign属性(垂直方向の揃え方)と組合わせることができます。align属性, valign属性は非推奨属性ではありませんが、CSS でそれぞれ、text-alignプロパティ, vertical-alignプロパティで代替することが可能です。

関連

列・列グループ(縦)の構造化

<table border="1">
<colgroup align="center" width="200"></colgroup>
<colgroup span="2"><col width="200"><col width="100"></colgroup>
<tr><th>見出しセル</th><th>見出しセル</th><th>見出しセル</th></tr>
<tr><td>セル内容</td><td>セル内容</td><td>セル内容</td></tr>
<tr><td>セル内容</td><td>セル内容</td><td>セル内容</td></tr>
</table>

colgroup要素も表の内容をグループ化するための要素で、こちらはセルの縦列をグループ化します。span属性はグループ化する列数を指定する属性で、値はまとめる列数を整数で指定します。col要素は colgroup要素でグループとしてまとめた列に関して個別にスタイル(装飾)を指定する場合に用います。いずれも width属性(セルの横幅), align属性(水平方向の揃え方), valign属性(垂直方向の揃え方)と組合わせて指定できます。しかし、col要素, colgroup要素に指定された属性の対応は UA ごとにかなりバラツキがあります。詳しい対応状況は HTML辞典の col要素, colgroup要素を参照してください。なお、width属性, align属性, valign属性はいずれも非推奨属性ではありませんが、CSS でそれぞれ、widthプロパティ, text-alignプロパティ, vertical-alignプロパティで代替が可能です。

関連

アクセシビリティに関する属性

表には非視覚環境からの参照においても、その内容を正しく把握できるように数多くの機能が定義されています。それらの機能を使って、非視覚環境が表現する表の情報と視覚環境で閲覧した場合の情報の流れとが一致するように工夫して、アクセシブルな表を作成してみましょう。

テスト結果
英語 数学 国語
鈴木くん 80 65 75
佐藤くん 50 95 40

この表はテスト結果の成績表です。成績表は縦方向の項目が「氏名」で、横方向の項目は「教科」で構成されています。行に対しての見出しには生徒の氏名が並んでいます。列に対しての見出しには「英語」「数学」「国語」といった教科名が並んでいます。この表を合成音声出力機器を使って通常どおりに読み上げた場合、左上から右下に1セルずつ順に「英語, 数学, 国語, 鈴木くん, 80, 65, 75, 佐藤くん, 50, 95, 40」と読み上げられていくことでしょう。しかし、"鈴木くん" と読み上げた次にいきなり "80" と数字だけを読み上げられても、一体何に対する "80" なのかがわかりません。そこで、非視覚環境が表現する情報の流れと視覚環境で参照した場合の情報の流れが一致するように作表してみましょう。

<table summary="鈴木くんと佐藤くんのテスト結果一覧表">
<caption>テスト結果</caption>
<tr>
<td></td>
<th abbr="英" axis="subject" id="english">英語</th>
<th abbr="数" axis="subject" id="mathematics">数学</th>
<th abbr="国" axis="subject" id="linguistics">国語</th>
</tr>
<tr>
<th abbr="鈴木" axis="name" id="suzuki">鈴木くん</th>
<td headers="english suzuki">80</td>
<td headers="mathematics suzuki">65</td>
<td headers="linguistics suzuki">75</td>
</tr>
<tr>
<th abbr="佐藤" axis="name" id="satou">佐藤くん</th>
<td headers="english satou">50</td>
<td headers="mathematics satou">95</td>
<td headers="linguistics satou">40</td>
</tr>
</table>

まず、table要素に指定されている summary属性には表全体が表現している情報や表の構造を簡潔に説明するテキストを指定します。音声出力環境において、表の内容より先に summary属性の値を読み上げてもらうことを意図しており、最初に表がどのような内容を扱っているのかを示すことで、ユーザの理解を促すことが期待できます。もうひとつ、summary属性と同じ役割をもつ abbr属性は見出しセルの th要素に設定し、見出しの内容を省略したテキストを指定しますが、もともと省略形に近い内容の場合は、そのまま同じ内容を記述するか、やみくもに abbr属性を付ける必要はありません。

headers属性は td要素に見出し情報を提供している th要素の id属性の値を指定します。これにより td要素の headers属性の値が th要素の id属性の値を参照します。複数の id属性の値を参照する場合には、半角スペースで区切って列挙することができます。また、axis属性td要素、または th要素の内容を示した分類名を指定し、headers属性と関連付けしています。この作表によって、鈴木くんの英語の成績の "80" の部分であれば「subject:英, name:鈴木, 80」と視覚環境と同様の情報の流れで読み上げることが期待されます。

Updated / Published