継続は力なり＃３７
テーブル関連の要素
テーブルを構築する要素
テーブルの構造は、HTMLの中では最も複雑である
基本的な構造は、リストの構造にさらにもう一種類の要素が加わる
テーブルを作成するには、まずその全体を「table要素」のタグで囲う
その中にはテーブルのセルが入るのだが、その内容が縦列または横列の見出しであるセルは「th要素」としてマークアップし、その内容がデータであるセルは「tb要素」としてマークアップする
そして各セルは横一列ごとに「tr要素」でグループ化する
以下の画像がHTMLのテーブルの基本構造である
table要素
table要素には以下の属性が指定できる
border属性を指定しなければ、一般的なブラウザではテーブルのボーダーは表示されない（CSSを指定すれば表示される）
table要素に指定できる属性
・border="ボーダーの表示"
元々の使用は、テーブル全体を囲う枠線の太さをピクセル数で指定するための属性だったため、多くのブラウザは現在でもこの指定を枠線の太さとして認識する（０より大きい値を指定すると外枠だけでなくセルを区切る枠も表示される）
HTML5では、この属性はテーブルをレイアウトのために使用していないことを明示的に示す目的で使用される
その場合、値には１を入れるか、値を空にした状態で指定する
例
HTML
<table boder="1">
<tr><th>セル１</th><th>セル２</th><th>セル３</th></tr>
<tr><td>セル４</td><td>セル５</td><td>セル６</td></tr>
<tr><td>セル７</td><td>セル８</td><td>セル９</td></tr>th要素 と td要素
table要素だけでなく、th要素 と td要素にも専用の属性が用意されている
指定できる要素ははほぼ共通指定いるが、ここではセルを連結させる「colspan属性」と「rowspan属性」に注目する
th要素に指定できる属性
・colspan="連結させるセル数"
この属性を指定したセルから右方向にいくつ分のセルを連結するのかを、１以上の整数で指定
・rowspan="連結させるセル数"
この属性を指定したセルから下方向にいくつ分のセルを連結するのかを、１以上の整数で指定
・headers="このセルの見出しセルの id "
このセルの見出しとなっているセルが音声ブラウザなどでも明確にわかるようにする目的で、見出しとなっているセルに指定されている id属性の値を指定する
id属性の値は半角スペースで区切って複数指定できる
・scope="この見出しセル対象"
この見出しセルの対象となっているセルの範囲を示すキーワードを指定
以下が、指定できるキーワードである
・row
→この見出しセルの右にあるセル全部
・col
→この見出しセルの下にあるセル全部
・rowgroup
→この見出しセルの右以降にある同じ横列グループ
（thead要素・tbody要素・tfoot要素）のセル
・colgroup
→この見出しセルの下以降にある同じ縦列グループ
（colgroup要素）のセル
tb要素に指定できる属性
・colspan="連結させるセルの数"
この属性を指定したセルから右方向にいくつか分のセルを連結するのかを、１以上の整数で指定
・rowspan="連結させるセルの数"
この属性を指定したセルから下方向にいくつか分のセルを連結するのかを、１以上の整数で指定
・headers="このセルの見出しセルの id "
このセルの見出しとなっているセルが音声ブラウザなどでも明確にわかるようにする目的で、見出しとなっているセルに指定されているid属性の値を指定
id属性の値は半角スペースで区切って複数指定できる