HTMLで下のような表組み（テーブル）をつくるときはtable要素を使います。
| 氏名 | 国語 | 数学 | 英語 |
|---|---|---|---|
| 田中 | 75点 | 83点 | 90点 |
| 中村 | 89点 | 80点 | 70点 |
この記事では、table要素をはじめ、HTMLで表を組むときに使える要素をまとめました。
まずはtable要素で使用できる属性について説明していきたいと思います。
table要素で使える属性
table要素で指定できる属性にはborderやsortableといったものがあります。
border（ボーダー）
border属性は、table要素がレイアウト目的で使われていないということを表していて、空の文字列か数字の「1」を指定します。
sortable（ソータブル）
sortable属性は、閲覧者によってソート（並び替え）ができるということを表す属性です。
table要素以外に、表組みに関係する要素としては、以下のようなものがあります。
- caption要素
- tr要素
- th要素
- td要素
- thead要素
- tbody要素
- tfoot要素
- colgroup要素
- col要素
caption要素
caption要素は表タイトルを表す要素です。
また、タイトルだけでなく、表に関する説明を記述することもできます。
tr要素
tr要素はテーブル・ロウといって、表組みの行を表しています。
th要素
th要素はテーブル・ヘッダー・セルといって、表組みにおける見出しセルを表す要素。
後述するtd要素と組み合わせたりして使います。
また、colspan属性やrowspan属性で複数の列や行を結合したセルをつくるということも可能です。
colspan（カラム・スパン）
colspan属性は列を結合するための属性。
指定値には、結合する列の数（正の整数）を指定します。
rowspan（ロウ・スパン）
colspan属性が列を結合するための属性なのに対し、rowspan属性は行を結合するための属性です。
指定する値には数字の「0」もしくは結合する行数（正の整数）を指定しますが、「0」はそのセルが属している行グループの最後の行まで結合することを意味します。
下の表では、colspan属性とrowspan属性を使っています。
| 場所 | 気温 | |
|---|---|---|
| 最低 | 最高 | |
| 東京 | 20.2℃ | 27.4℃ |
| 大阪 | 22.4℃ | 31.0℃ |
| 福岡 | 23.5℃ | 29.1℃ |
「場所」と書いているセルには「rowspan=”2″」と記述し、2行分を結合しており、「気温」と書いているセルには「colspan=”2″」と記述することで、2列分を結合しています。
headers（ヘッダーズ）
headers属性に、見出しセルにつけたid属性値を指定することで、見出しセル同士を関連づけることができます。
また、指定する値は半角スペースで区切って、複数指定することもできます。
abbr（アブリヴィエーション）
見出しセルに入っているテキストが省略形の場合は、abbr属性を使います。
関連記事
『abbr要素で略称とその正式名称を意味づける【HTML】』
scope（スコープ）
scope属性は、見出しのセルがどの方向のセルに対応するのかを指定する属性です。
指定する値は以下のようなものがあります。
col
見出しセルが属する列の下方向のセルに対応します。
row
見出しセルが属する行の、該当するセル以降のセルすべてに対応します。
colgroup
見出しセルが属する列グループで、該当するセル以降のセルすべてに対応します。
rowgroup
見出しセルが属する行グループで、該当するセル以降のセルすべてに対応します。
auto
autoはscope属性の初期値として与えられているもので、どのセルに対応するかは文脈によって自動的に判断されます。
td要素
td要素はテーブル・データ・セルといって、表組みのデータを表すセルを示しています。
td要素もth要素と同様、colspan属性やrowspan属性で複数の列や行を結合することができます。
以下、th要素で指定できるcolspan属性・rowspan属性・headers属性に関しての同じ説明です。
colspan（カラム・スパン）
colspan属性は列を結合するための属性。
指定値には、結合する列の数（正の整数）を指定します。
rowspan（ロウ・スパン）
colspan属性が列を結合するための属性なのに対し、rowspan属性は行を結合するための属性です。
指定する値には数字の「0」もしくは結合する行数（正の整数）を指定しますが、「0」はそのセルが属している行グループの最後の行まで結合することを意味します。
headers（ヘッダーズ）
headers属性に、見出しセルにつけたid属性値を指定することで、見出しセル同士を関連づけることができます。
また、指定する値は半角スペースで区切って、複数指定することもできます。
一番最初に例で出した表を使って、tr要素・th要素・td要素について整理しておきたいと思います。
| 氏名 | 国語 | 数学 | 英語 |
|---|---|---|---|
| 田中 | 75点 | 83点 | 90点 |
| 中村 | 89点 | 80点 | 70点 |
この表の場合、tr要素が表すのは1行目「氏名・国語・数学・英語」、2行目「田中・75点・83点・90点」、3行目「中村・89点・80点・70点」です。
また、th要素で見出しとしているセルは、背景がグレーになっている「氏名・国語・数学・英語」の部分。
そしてtd要素が表すのは、th要素以外の2行目と3行目になります。
thead要素
thead要素はテーブル・ヘッダーといって、表組みのヘッダー部分の行グループを表す要素です。
tbody要素
tbody要素はテーブル・ボディといって、表組みの本体部分の行グループを表す要素です。
tfoot要素
tfoot要素はテーブル・フッターといって、表組みのフッター部分の行グループを表す要素です。
col要素
col要素は表組みの列を表す要素です。
span（スパン）
span属性でグループの対象となる列数を指定することができます。
値として指定できるのは正の整数です。
colgroup要素
colgroup（カラム・グループ）要素は表組みの列グループを表す要素です。
class名をつけることができ、これをセレクタとしてCSSを使って列にスタイルを適用させることができます。
span（スパン）
colgroup要素内にcol要素が1つもない場合、span属性でグループの対象となる列数を指定することができます。
値として指定できるのは正の整数です。
Leave a Comment