ほんっとにはじめての HTML5 と CSS3

今回から、table（テーブル = 表）を作ってみましょう。
テーブルはデータをまとめて表組みにしたいときに使用します。
テキストだけで説明するよりわかりやすくするのが表組みです。

HTMLでの テーブルは、表組みにする必要がないモノに使ってはならないことになってます。例えば、レイアウトだけのためにテーブルを使うのはNGです。

使用する要素	<table> 〜 </table> <tr> 〜 </tr> <th> 〜 </th> <td> 〜 </td>

CSSプロパティ	border padding border-spacing

● 2017年10月、本文を大幅に書き換えました。
最小単位 <td>要素だけの構成から <tr>要素でグルーピングするという流れに書き換え、サンプルは本文内に記載し、外部サンプルをやめました。

最小の部品「テーブルセル」があってこそテーブル

<table>要素は中身が何も無ければ、ぺったんこで高さも幅もない状態。非表示です。
CSSで背景やボーダーを指定していても何も表示されません。

<table>
</table>

<table> 〜 </table>内に テキストが入っていたら表示はされますが、それはテーブルとしてではなく、単に中身がそのまま表示されるだけ。

テーブルセル <td> <th> を使った最小限のカタチ

テーブルとして表示させるには、<table>要素の中には最低1コの <td>要素が必要です。
これが最低限のテーブルのカタチです。

<table>
 <td>td1つだけ</td>
</table>

この最小の部品は テーブルセル（table cell）と呼ばれます。
テーブルセルには <th>要素もあります。

<th> は、table header の略。header = ヘッダー、見出しの役割です。
<td> は、table data の略。テーブルのデータです。

セルに見出しの役割を持たせたいなら <th>を使います。
ですので <th>単独で使うってのは無いな。<th>（見出し）を使うなら、<td>（データ）もないと変だから。

<table>
 <th>th（見出し）</th> <!--th を使うなら-->
 <td>td（データ）</td> <!--td も一緒に-->
</table>

<table>要素だけとか、 <td>要素だけ では、ブラウザはテーブルとして表示しません。
これは CSSの display: table（他の要素をテーブルの性質にする）を使う時にとても重要な基礎知識です。最低限 <table> <td> </td> </table> のカタチじゃないと表示しないんです。
display: table については、
【17-3-1】display:tableでテーブル関連じゃない要素をテーブルっぽく をご覧ください。

ただし、ココまでは「スタイル」上の話です。
HTML5 の文法上は <table>要素内の「子要素」には、<tr>要素が必要。
<td>要素や <th>要素は、<tr>要素の中に入る 子孫要素 になるべきなんです。

行のグルーピングをする <tr>要素

セルのセットを<tr>要素で囲んでまとめることができます。
<tr>要素はテーブルセルでなくグルーピングのための要素。セルを行としてまとめます。

HTML5 には「コンテンツ・モデル」という「要素の中にどんな要素を置けるか」のルールがあります。
そのルールでは、<table>要素の中には <tr>要素を子要素として置く必要があります。

<tr>は、table row の略。row とは横列。行（ぎょう）。

ちなみに、row の反対語は column（縦列）で、略して col です。
この「row（横列）」と「col（縦列）」は、tableではけっこうよく出てくるコトバです。

<table>
  <tr>
    <th>th（見出し）</th>
    <td>td（データ）</td>
  </tr>
  <tr>
    <th>th（見出し）</th>
    <td>td（データ）</td>
  </tr>
</table>

この <table> <tr> <td>（または<th>）〜 </td>（または</th>）</tr> </table> というカタチが文法上の最小型。

table要素の基本構造

tableの基本的な構造は下図のようになります。
<th>（見出し）は、横にも縦にも並べてOK。見出しのセルに使うならどこでも。

1行（横一列）を <tr>〜</tr>で囲むんですが、この時 各行内のセルの数が同じである必要があります。
1行目がセル3コだったら、2行目も3行目も3コ。じゃないとエラーになるよ。

まあ、エクセルとかで表作ってるときと同じです。そんな難しい話じゃない。

セルの数を変えたい場合は colspan属性、rowspan属性 を使って セルの連結で調整します。
使い方は、[16-3] table のセルを連結しよう（colspan属性, rowspan属性）で説明します。

<table>要素の属性で HTML5から廃止になったもの

<table>要素の cellpadding属性・cellspacing属性・frame属性・rules属性・summary属性・width属性 は、HTML5では廃止されました。

属性で残されたのは border属性のみ。
しかも、border属性を指定する場合は、値は「空（何も書かない）」か「1」でなければなりません。
この属性は、セルの周囲にボーダーを表示するとブラウザに指示します。

summary属性 は残っていましたが、<caption>要素で事足りるのでやはり廃止に。
また、sortable属性 も HTML5 で登場しましたが、HTML5.1 で無くなりました。
<th>要素の sorted属性と共に使ってソート機能の実現を目指していたようですが。

参考：HTML 5.1 - W3C Recommendation, 1 November 2016 - 4.9.1. The table element

cellpadding属性・cellspacing属性は CSSで

かつてHTML4までは、
<table border="数値" cellpadding="数値" cellspacing="数値">
と指定していました。テーブルの枠線の表示のための属性たちです。

border属性は、セルの枠線（ボーダー）。
cellpadding属性は、セルの枠とセル内のテキストとの間のスペース。
cellspacing属性は、セル同士の間隔です。

これらは HTML5 では CSS で指定します。
border属性は残ってはいますが、CSSの borderプロパティで指定するのが一般的です。
cellpadding属性は、paddingプロパティで、
cellspacing属性は、border-spacingプロパティで指定します。

テーブルの基本のソースコード

下記のテーブルのソースコードを見てください。
border属性には「 ""（空の値）」を入れています（1行目）

<table border="">
  <tr>
    <th>table header</th>
    <th>table header</th>
    <th>table header</th>
  </tr>
  <tr>
    <td>table data</td>
    <td>table data</td>
    <td>table data</td>
  </tr>
  <tr>
    <td>table data</td>
    <td>table data</td>
    <td>table data</td>
  </tr>
</table>

コレをプレビューすると、こんなかんじ。
ブラウザのデフォルトスタイルで、セルに枠が付きます。ブラウザの種類によって枠の付き方は若干違います。

table header	table header	table header
table data	table data	table data
table data	table data	table data

「 border="1" 」にしても同じ見た目です。

table header	table header	table header
table data	table data	table data
table data	table data	table data

以前なら、cellspacing属性でセル同士の間隔を詰めて2重線になってるのを解消し、cellpadding属性でセル枠とテキストの間隔をあけたのですが、どっちも廃止されたのでムリ。あとでCSSを使って整えます。

ちなみに、border属性が無いと枠線が無くなって、何がなんだかな状態に。

table header	table header	table header
table data	table data	table data
table data	table data	table data

テーブルの罫線が重複しない CSSの指定

上のテーブルを CSSで整えてみました。全体に罫線を入れています。

table header	table header	table header
table data	table data	table data
table data	table data	table data

サンプルの HTML は先ほどと同じです。
<table>要素には border属性は使っていません。（ブラウザによって異なる表示になるのを避けたいので、CSSだけの指定にします）

<table id="smp1">
  <tr>
    <th>table header</th>
    <th>table header</th>
    <th>table header</th>
  </tr>
  <tr>
    <td>table data</td>
    <td>table data</td>
    <td>table data</td>
  </tr>
  <tr>
    <td>table data</td>
    <td>table data</td>
    <td>table data</td>
  </tr>
</table>

サンプルのCSSです。

table#smp1 {
	width: 100%;
	margin:2em 0;
	border-top: 1px solid #ccc;   /*table要素の「上」ボーダー*/
	border-left: 1px solid #ccc;  /*table要素の「左」ボーダー*/
	border-spacing:0;  /*セル同士の間隔*/
	}
table#smp1 tr th,
table#smp1 tr td {  /*「,」で区切って複数のセレクタを指定しています*/
	border-bottom:1px solid #ccc; /*セルの「下」ボーダー*/
	border-right: 1px solid #ccc; /*セルの「右」ボーダー*/
	padding:0.5em;  /*セルのボーダーとテキストの間をあけて読みやすく*/
	}
table#smp1 tr th {
	background: #e6eaff;  /*th（見出し）だけ背景色を付けてます*/
	}

borderプロパティを4箇所に指定していることに注目。
<table>要素には上と左にborderの指定を（4、5行目）
セル（ <th> や <td>要素）には下と右にborderの指定をしてます（10、11行目）

これは、テーブルと各セルに上下左右の border指定をすると 重複した線になるのを防ぐためです。

6行目で、<table>要素に border-spacing: 0 の指定をしています。
セルとセルの間隔を「0」にして、各 border をピッタリくっつけています。

このように、セルには直角になる2辺、テーブルには残りの2辺 を指定するのが一般的です。（全部に罫線を入れたい場合です）

あえて罫線を太くするなら、テーブルにもセルにも、上下左右に border 指定してイイんですけどね。

table header	table header	table header
table data	table data	table data
table data	table data	table data

サンプルの CSSです。

table#smp2 {
	width: 100%;
	margin:0;
	border:2px solid #e6eaff;  /*table に上下左右のボーダー*/
	border-spacing:0;
	}
table#smp2 tr th,
table#smp2 tr td {
	border:2px solid #e6eaff;  /*セルにも上下左右のボーダー*/
	padding:.5em;
	}
table#smp2 tr th {
	background: #e6eaff;
	}

例えば、横の罫線だけ入れたい場合でも、セルとテーブルを分けて指定します。
接した部分が二重先になるのを防ぐため。

table header	table header	table header
table data	table data	table data
table data	table data	table data

サンプルの CSSです。

table#smp3 {
	width: 100%;
	margin:0;
	border-top: 1px solid #ccc;  /*topのみ*/
	border-spacing:0;
	text-align:center
	}
table#smp3 tr th,
table#smp3 tr td {
	border-bottom:1px solid #ccc;  /*bottomのみ*/
	padding:.5em;
	}
table#smp3 tr th {
	background: #e6eaff;
	}

次回予告

次回は テーブルにタイトルをつけましょう。
表には「タイトル（題名）」を必要とする場合がありますよね。
HTMLでは、テーブルのタイトルとして<caption>要素が、ちゃんと用意されています。

関連記事

• （ちょっとメモ）テーブルをレスポンシブ対応させるCSS
• [16-7] テーブルセルで使う scope属性と headers属性について
• [16-6] table縦列グループ化（ colgroup, col ）
• [16-5] table横列グループ化（thead, tbody, tfoot）
• [16-4] tableのセルの枠線を非表示にしよう（empty-cellsプロパティ）
• [16-3] table のセルを連結しよう（colspan属性・rowspan属性）
• [16-2] table にタイトルをつけよう（ caption要素 ）
• [16-1] table（表）を作ろう（まずは基本の table, tr, th, td）
• [15-7] リストでナビゲーション（ dl要素・dt要素・dd要素）
• [15-6] リストでナビゲーション（ li 要素を display で横に並べる）
• [15-5] リストでナビゲーション（ li 要素を float で横に並べる）
• [15-4] リストマーカーを画像や任意のテキストに変更する方法
• [15-3] 説明リストを作ろう（ dl要素・dt要素・dd要素）
• [15-2] 番号付きリストを作ろう（ ol要素・li要素）
• [15-1] リストを作ろう（ ul要素・li要素 ）