表組の作成

Caution

表の見え方が実際と異なる場合があります.これは,このサイトのCSSによるものです.

表組の基本

<table border="1" summary="点数と評定の関係を示した5行2列の表"> <caption>成績と評価</caption> <tr> <th>点数</th> <th>評定</th> </tr> <tr> <td>80-100</td> <td>優</td> </tr> <tr> <td>70-79</td> <td>良</td> </tr> <tr> <td>60-69</td> <td>可</td> </tr> <tr> <td>0-59</td> <td>不可</td> </tr> </table>

出力結果は以下です.

成績と評価
点数 評定
80-100
70-79
60-69
0-59 不可

caption要素は表のタイトルを記述するものです.省略することができます.

セルの内容は,1行ずつ左のセルから記述します.1行分のデータをtr要素で囲い,1つのセルの内容をth要素かtr要素でくくります.th要素は見だしを表します.

table要素の属性を説明します.

属性名 属性の説明
border 表の枠の太さをピクセル単位で指定します.属性を省略すると枠は描かれません.
frame 表の外枠の描き方を指定します.void(外枠を描かない),above(上辺のみ外枠を描く),below(下辺のみ外枠を描く),hsides(上辺と下辺のみ外枠を描く),lhs(左辺のみ外枠を描く),rhs(右辺のみ外枠を描く),vsides(左辺と右辺のみ外枠を描く),box(4辺全ての外枠を描く),border(4辺全ての外枠を描く;既定値)から1つ選びます.boxborderは事実上,同じ指定です.
rules 表の枠の罫線の引き方を指定します.none(罫線を引かない),groups(グループ化された行や列の間だけ罫線を引く;グループ化は後述),rows(行間のみ罫線を引く),cols(列間のみ罫線を引く),all(全ての行と列の間に罫線を引く;既定値)から1つ選びます.
summary 表の意味や構造を記述します.指定することをおすすめします.

アクセシビリティ関連の指定

スクリーン・リーダに有益な情報を与えることができる属性を紹介します.

オクトスの社会科弱点表
得意でも苦手でもない 苦手意識がある 終わっている
地理・歴史分野 地理 日本史 世界史
公民分野 政治・経済 現代社会 倫理

表の見だしの設定には,2通りの方法があります.

<table border="1" summary="オクトスの社会科の弱点を表した3行4列の表"> <caption>オクトスの社会科弱点表</caption> <tr> <td /> <th scope="col" abbr="普通">得意でも苦手でもない</th> <th scope="col" abbr="苦手">苦手意識がある</th> <th scope="col" abbr="論外">終わっている</th> </tr> <tr> <th scope="row" abbr="地歴">地理・歴史分野</th> <td>地理</td> <td>日本史</td> <td>世界史</td> </tr> <tr> <th scope="row" abbr="公民">公民分野</th> <td>政治・経済</td> <td>現代社会</td> <td>倫理</td> </tr> </table>

scope属性は,そのセルがどの方向のセルに対して見だしになっているかを指定します.colなら縦方向,rowなら横方向です.この場合,それぞれ表の1行目・1列目が見だしとなっていますが,見だしのセルが行や列の途中にある場合は,それぞれrowgroupcolgroupを指定します.abbr属性でセルの中身を省略した文字列を指定すると,音声デバイスでの読み上げに役立つことがあります.

<table border="1" summary="オクトスの社会科の弱点を表した3行4列の表"> <caption>オクトスの社会科弱点表</caption> <tr> <td /> <th abbr="普通" id="normal">得意でも苦手でもない</th> <th abbr="苦手" id="bad">苦手意識がある</th> <th abbr="論外" id="poor">終わっている</th> </tr> <tr> <th abbr="地歴" id="chireki">地理・歴史分野</th> <td headers="normal chireki">地理</td> <td headers="bad chireki">日本史</td> <td headers="poor chireki">世界史</td> </tr> <tr> <th abbr="公民" id="komin">公民分野</th> <td headers="normal komin">政治・経済</td> <td headers="bad komin">現代社会</td> <td headers="poor komin">倫理</td> </tr> </table>

見だしのセルにid属性を指定し,その他のセルに見だしのセルのidを,headers属性を指定して与えています.単純な表はscopeが便利ですが,入り組んだ複雑な表になるとheaders属性が使いやすくなります.

No Good

table要素は表組を意味するものであり,段組をするための要素ではありません.

表組の応用

セルの連結

<table border="1" summary="colspan属性とrowspan属性を指定した例を示す表"> <tr> <td colspan="2">横に連結したセル</td> <td>セル</td> </tr> <tr> <td rowspan="2">縦に連結したセル</td> <td>セル</td> <td>セル</td> </tr> <tr> <td>セル</td> <td>セル</td> </tr> </table>

出力結果は以下です.

横に連結したセル セル
縦に連結したセル セル セル
セル セル

上は3行3列の表です.colspan属性で横に,rowspan属性で縦に,連結するセルの数を指定します.

行と列のグループ化

<table border="1" summary="ある日の家計簿を表した表"> <colgroup> <col span="2"/><col span="3" style="text-align:right;" /> </colgroup> <thead> <tr> <th scope="col" abbr="場所">購入場所</th> <th scope="col" abbr="名前">商品名</th> <th scope="col" abbr="値段">値段</th> <th scope="col" abbr="税">消費税</th> <th scope="col" abbr="小計">小計</th> </tr> </thead> <tfoot> <tr> <th scope="row" abbr="計" colspan="4">合計</th> <td>950</td> </tr> </tfoot> <tbody> <tr> <td>海老名駅</td> <td>オクトス新聞</td> <td>800</td> <td>40</td> <td>840</td> </tr> <tr> <td>二俣川駅</td> <td>オクトロン・ウォーター</td> <td>200</td> <td>10</td> <td>210</td> </tr> </tbody> </table>

Caution

style="text-align:center;"CSSの記述なので,今はあまり気にしないで下さい.文字列を右寄せにする指定です.

出力結果は以下です.

購入場所 商品名 値段 消費税 小計
合計 950
海老名駅 オクトス新聞 800 40 840
二俣川駅 オクトロン・ウォーター 200 10 210

thead要素・tfoot要素・tbody要素は,それぞれ表のヘッダ,フッダ,本体を表します.記述する順番はこの通りですが,表示される順番は,UAによって異なることがあります.

colgroup要素では,どのように列をグループ化するか,col要素を使って記述します.col要素には,同じ属性の指定を何セル分繰り返すかを指定する,span属性があります.既定値は1です.