※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

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

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

表(table)の作り方

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

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

このようなテーブルをつくる場合には、以下のコード。

HTML5

<table border="1">
<tr><th>ここは題名</th><td>ここはデータ</td></tr>
<tr><th>ここは題名2</th><td>ここはデータ2</td></tr>
</table>

ここではそれぞれのセルが独立した形で表示されてしまいます。
それを一本の線で表すにはCSS3の出番です。

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

次にこのように一本線で表現されるテーブルをつくります。 HTMLは先ほどと同じで、

CSSに

table {
      border-collapse: collapse;
}

と記述してみてください。

border-collapseはcollapseとseparateを選べます。
それぞれセルをくっつけて表示するか、離して表示させるか、という意味になっています。

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

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

また、テーブルをCSSを利用して編集する場合には、 thのみを編集したい、trのみを編集したい、背景の色を指定したい場合 がでてきます。
例えば、下のような「thとtdで色が違う」テーブルを作ってみたい場合。

HTML

<table class="sample4" border="1">
  <tr><th>見出し1</th><th>見出し2</th></tr>
  <tr><td>ここはデータ1</td><td>ここはデータ2</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 {}

という形になります。

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

例えば、飲食店の人気ランキングを表であらわしたい場合、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タグについて説明します。
colgroupは行を 「グループ化して指定」 していたのに対して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を持つ場合は、 空要素(子孫要素を持たない要素)となります。

thead、tbody、tfootについて

この三つのタグはtableに対してhead、body、footerを指定する事ができます。
つまりどのセルがheadで、、、という事が明確になるのです。
この三つのタグはブラウザが対応できるようになったときにheadとfooterを固定させたままbodyのみをスクロールさせる事が可能になるみたいです。

以上