「表(table)の作り方」の編集履歴（バックアップ）一覧はこちら

「表(table)の作り方」(2015/06/15 (月) 21:12:08) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

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

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

#contents

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

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

#image(center,width=200px,簡単なテーブル.png)

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

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

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

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


#image(center,width=200px, 結合したテーブル.png)

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

ＣＳＳに
 table {
       border-collapse: collapse;
 }
と記述してみてください。

 border-collapseはcollapseとseparateを選べます。
 それぞれセルをくっつけて表示するか、離して表示させるか、という意味になっています。
ここまでがおおよそ最も基本的な形のテーブル作成です。

*テーブル表現をより豊かにする方法
また、テーブルをCSSを利用して編集する場合には、&color(red){thのみを編集したい、trのみを編集したい、背景の色を指定したい場合}がでてきます。~
例えば、下のような「thとtdで色が違う」テーブルを作ってみたい場合。
#image(center,width=250px,table4.png)

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 {}

という形になります。

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

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

 <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をわかりづらくしてしまいますね。~
どうにか縦列によるグループ分けをしたい。~
そのときに活躍するのが&color(red){colgroupとcol}です。まずは、colgroupの説明から。~
上の例を使って説明してみたいと思います。
#image(center,width=150px,縦列.png)

 <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は行を&color(red){「グループ化して指定」}していたのに対してcolグループは&color(red){「グループ化せずに指定だけする」}ためのタグです。~
先ほどと同じ画像を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を持たない場合、&color(red){colを子要素に必ず持ちます。}
spanを持つ場合は、&color(red){空要素(子孫要素を持たない要素)となります。}

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

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

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

#contents

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

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

#image(center,width=200px,簡単なテーブル.png)

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

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

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

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


#image(center,width=200px, 結合したテーブル.png)

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

ＣＳＳに
 table {
       border-collapse: collapse;
 }
と記述してみてください。

 border-collapseはcollapseとseparateを選べます。
 それぞれセルをくっつけて表示するか、離して表示させるか、という意味になっています。
ここまでがおおよそ最も基本的な形のテーブル作成です。

*テーブル表現をより豊かにする方法
また、テーブルをCSSを利用して編集する場合には、&color(red){thのみを編集したい、trのみを編集したい、背景の色を指定したい場合}がでてきます。~
例えば、下のような「thとtdで色が違う」テーブルを作ってみたい場合。
#image(center,width=250px,table4.png)

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 {}

という形になります。

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

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

 <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をわかりづらくしてしまいますね。~
どうにか縦列によるグループ分けをしたい。~
そのときに活躍するのが&color(red){colgroupとcol}です。まずは、colgroupの説明から。~
上の例を使って説明してみたいと思います。
#image(center,width=150px,縦列.png)

 <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は行を&color(red){「グループ化して指定」}していたのに対してcolグループは&color(red){「グループ化せずに指定だけする」}ためのタグです。~
先ほどと同じ画像を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を持たない場合、&color(red){colを子要素に必ず持ちます。}
spanを持つ場合は、&color(red){空要素(子孫要素を持たない要素)となります。}

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