このページは「tableとlistについて」のページの内容の続きであり、少しだけ冒頭の部分を被らせています。
もしよろしければ「tableとlistについて」もあわせて読んでみてください。
それでは、HTML5とCSS3を使った表の作り方について
続いては表制作に使うtableについて解説していきます。
tableはHTML5の中でもとても難しい分野の一つです。
tableの記述には３つの要素、
th(table header=テーブルの見出し),tr(table row=テーブルの横一列のグループ),td(table data=th以外のセルの事)
を使用します。実際には
thは太文字で強調されて表示
されます。
以下に最も単純なテーブルのコードを記述してみます。
このようなテーブルをつくる場合には、以下のコード。
HTML5
<table border="1"> <tr><th>ここは題名</th><td>ここはデータ</td></tr> <tr><th>ここは題名２</th><td>ここはデータ２</td></tr> </table>
ここではそれぞれのセルが独立した形で表示されてしまいます。
それを一本の線で表すにはCSS3の出番です。
次にこのように一本線で表現されるテーブルをつくります。 HTMLは先ほどと同じで、
ＣＳＳに
table {
border-collapse: collapse;
}
と記述してみてください。
border-collapseはcollapseとseparateを選べます。 それぞれセルをくっつけて表示するか、離して表示させるか、という意味になっています。
ここまでがおおよそ最も基本的な形のテーブル作成です。
また、テーブルをCSSを利用して編集する場合には、
thのみを編集したい、trのみを編集したい、背景の色を指定したい場合
がでてきます。
例えば、下のような「thとtdで色が違う」テーブルを作ってみたい場合。
HTML
<table class="sample4" border="1"> <tr><th>見出し１</th><th>見出し2</th></tr> <tr><td>ここはデータ１</td><td>ここはデータ２</td></tr> </table>
CSS
.sample4 {
position: relative;
left: 100px;
border-collapse: collapse;
}
.sample4 th {
background-color: #eeeeee;
}
上のような記述になります。
tableの中のthを指定したい場合は
table th {}
という形で指定します。(上のコードではsample4という名前がついていますね。) 少しtableの話から脇道にそれてしまうのですが、CSSで様々なタグを一括指定するときは
#aaa, #sss, .eee {}
などのように間に,を入れていきます。
入れ子構造になっているある一つのタグを指定する場合はthの例のようにスペースであけていきます。
どこどこの どこどこにある なになに
というイメージで指定できます。 また、複数あるthの中でもdクラスを指定されているthを指定したい場合、
table tr th.d {}
という形になります。
例えば、飲食店の人気ランキングを表であらわしたい場合、1行(横列)目に順位、店の名前、所在地を書いていったとします。
二行目に一位、三行目に二位、四行目に三位という風に書いていきます。
こんな感じです。
<table class="sample5" border="1"> <tr><th>順位</th><th>店の名前</th><th>所在地</th></tr> <tr><th>1</th><td>変な焼き鳥屋</td><td>東京</td></tr> <tr><th>2</th><td>美味しい鳥の丸焼き</td><td>神奈川</td></tr> </table>
この時、行による色分けは逆にtableをわかりづらくしてしまいますね。
どうにか縦列によるグループ分けをしたい。
そのときに活躍するのが
colgroupとcol
です。まずは、colgroupの説明から。
上の例を使って説明してみたいと思います。
<table class="sample5" border="1"> <colgroup class="x" span="1"> <colgroup class="xx" span="1"> <colgroup class="xxx" span="1"> <tr><th>順位</th><th>店の名前</th><th>所在地</th></tr> <tr><th>1</th><td>変な焼き鳥屋</td><td>東京</td></tr> <tr><th>2</th><td>美味しい鳥の丸焼き</td><td>神奈川</td></tr> </table>
CSS
.x {width: 30px;
background-color: #f00;
}
.xx{width: 30px;
background-color: #ff0;">
}
.xxx{width: 30px;
background-color: #00f;
}
spanは縦列何行にわたって指定するか、ということを示しています。
ここでは、colgroupを使用しました。
次にcolgroupと似ているようで異なるcolタグについて説明します。
colｇroupは行を
「グループ化して指定」
していたのに対してcolグループは
「グループ化せずに指定だけする」
ためのタグです。
先ほどと同じ画像をcolタグを使用して作成してみます。
HTML
<table class="sample5" border="1"> <colgroup> <col class="x" span="1"> <col class="xx" span="1"> <col class="xxx" span="1"> <tr><th>順位</th><th>店の名前</th><th>所在地</th></tr> <tr><th>1</th><td>変な焼き鳥屋</td><td>東京</td></tr> <tr><th>2</th><td>美味しい鳥の丸焼き</td><td>神奈川</td></tr> </colgroup> </table>
CSSは先ほどと同じになりますが、colのクラスを指定しています。 colgroupはspanを持たない場合、 colを子要素に必ず持ちます。 spanを持つ場合は、 空要素(子孫要素を持たない要素)となります。
この三つのタグはtableに対してhead、body、footerを指定する事ができます。
つまりどのセルがheadで、、、という事が明確になるのです。
この三つのタグはブラウザが対応できるようになったときにheadとfooterを固定させたままbodyのみをスクロールさせる事が可能になるみたいです。
以上
