「表(table)の作り方」の編集履歴（バックアップ）一覧に戻る

表(table)の作り方 - (2015/05/23 (土) 12:07:48) のソース

このページは「tableとlistについて」のページの内容の続きであり、少しだけ冒頭の部分を被らせています。~
もしよろしければ「tableとlistについて」もあわせて読んでみてください。~

それでは、HTML5とCSS3を使った表の作り方について

#contents

*表(table)の作り方
続いては表制作に使うtableについて解説していきます。~
tableはHTML5の中でもとても難しい分野の一つです。~
tableの記述には３つの要素、th(table header=テーブルの見出し),tr(table row=テーブルの横一列のグループ),td(table data=th以外のセルの事)を使用します。実際にはthは太文字で強調されて表示されます。~
以下に最も単純なテーブルのコードを記述してみます。

*最もシンプルな形のテーブル(表)

 <table border="1">
 <tr><th>ここは題名</th><td>ここはデータ</td></tr>
 <tr><th>ここは題名２</th><td>ここはデータ２</td></tr>
 </table>
といった具合です。これは以下ように表示されます。
#image(center,width=200px,簡単なテーブル.png)
ここではそれぞれのセルが独立した形で表示されてしまいます。~
それを一本の線で表すにはCSS3の出番です。~

*一本の線で表現されるテーブル

 table {
       border-collapse: collapse;
 }
と記述してみてください。
 border-collapseはcollapseとseparateを選べます。
 それぞれセルをくっつけて表示するか、離して表示させるか、という意味になっています。
collapseを指定した時、tableは以下のように表示されます。
#image(center,width=200px, 結合したテーブル.png)

ここまでがおおよそ最も基本的な形のテーブル作成です。

*テーブル表現をより豊かにする方法

また、テーブルをCSSを利用して編集する場合には、勿論thのみを編集したい、背景の色を指定したい場合がでてきます。そのようなときは

 table tr th {}

という形で指定します。
少しtableの話から脇道にそれてしまうのですが、CSSで様々なタグを一括指定するときは
 #aaa, #sss, .eee {}
などのように間に,を入れていきます。

入れ子構造になっているある一つのタグを指定する場合はthの例のようにスペースであけていきます。
 どこどこの　どこどこにある　なになに
というイメージで指定できます。
また、複数あるthの中でもdクラスを指定されているthを指定したい場合、

 table tr th.d {}

という形になります。

*縦列のグループ化、一括指定(colgroupとcolの利用)

例えば、飲食店の人気ランキングを表であらわしたい場合、1行(横列)目に順位、店の名前、所在地を書いていったとします。~
二行目に一位、三行目に二位、四行目に三位という風に書いていきます。~
こんな感じです。
#image(center,width=100px,rankingu.png)

この時、行による色分けは逆にtableをわかりづらくしてしまいますね。