【17-3-2】テーブル関連の要素のためのCSSプロパティ

前回は、テーブルじゃない要素に display: table や display: table-cell を指定して、まるでテーブルのように表示させましたね。

今回は テーブル関連のためCSSプロパティをまとめます。
displaypプロパティの流れの途中ですが、今回は displayから一旦離れて、テーブル用のCSSプロパティの話です。

margin、padding、border（displayもね）など、たいていのHTML要素に使えるプロパティがある一方で、特定の要素にしか使えない、その要素専用のプロパティもあります。
テーブル用のプロパティもそれ。テーブル関連要素でしか使いません。

テーブル関連の要素はスタイルもけっこう特殊です。
例えば、テーブルでは各セルの間隔は margin でなく border-spacing で指定するとかね。

で、本日のINDEX

1. テーブルだけで使えるCSSプロパティ
   1. border-collapseでセルの外枠を重ねるかすき間を空けるか決める
   2. border-spacingでセルの外枠の間隔を指定する
   3. table-layoutで各列の幅を決める
   4. empty-cellsで空のセルの外枠や背景を表示するかしないか決める
   5. visibility:collapseでセルを非表示にする
   6. caption-sideでキャプションの位置を上か下か決める
2. テーブルセルに使える vertical-alignプロパティ
3. テーブルには margin と padding が効かない要素もあるよ

display プロパティは記事を数回に分けています。こんなかんじで↓

【17-1】display でボックスの表示形式を自由に変えよう

displayプロパティと値の一覧／display: inline／block／inline-block／none／run-in

【17-2-1】display:list-itemでリスト関連じゃない要素をリストっぽく

display:list-item で、<li>要素じゃない要素を<li>要素のように扱えます

【17-2-2】リスト関連の要素のためのCSSプロパティ

リスト関連の要素だけに使えるCSSプロパティをまとめます

【17-3-1】display:tableでテーブル関連じゃない要素をテーブルっぽく

display:table などで、テーブル関連じゃない要素にテーブルの性質を与えます

【17-3-2】テーブル関連の要素のためのCSSプロパティ　←今ココ

テーブル関連の要素だけに使えるCSSプロパティをまとめます

【17-4-1】display:rubyでルビ関連じゃない要素をルビテキストに

display:ruby で、要素にルビ（ruby）を表示する機能を与えます

【17-4-2】ルビ関連の要素のためのCSSプロパティ

ルビ関連の要素だけに使えるCSSプロパティをまとめます

【18-1】Flexbox を使おう！（display:flexでFlexboxを作る）

display: flex に関しては、Flexbox として仕切り直します。 display: flex で「Flexboxコンテナ」を定義し、その他のプロパティも使ってフレキシブルボックスを作ります

テーブルだけで使えるCSSプロパティ

テーブルのセル同士のすき間、各セルの幅、セルの表示・非表示などを指定するプロパティです。
まずは、そのプロパティと値の一覧を見てください。

プロパティ	概要	値
border-collapse	セルの外枠を重ねるかすき間を空けるか決める	collapse　separate
border-spacing	セルの外枠の間隔を指定	単位をつけた数値
table-layout	各列の幅を決める	auto　fixed
empty-cells	空のセルの外枠や背景を表示するかしないか決める	show　hide
visibility:collapse	セルを非表示にする	collapse
caption-side	キャプションの位置を上か下か決める	top　bottom

では、テーブル用のプロパティとその値を、順にサンプルで確認していきましょう。

border-collapseでセルの外枠を重ねるかすき間を空けるか決める

border-collapseプロパティは、テーブルセルの外枠（ボーダー）をくっつけて重ねて1本にするか、すき間を空けて離すかを指定します。
ボーダーそのものは、CSSの borderプロパティで指定します。
（以前は <table>要素に border属性がありましたが、HTML5で非推奨になりました）
セルに border の指定が無い場合でも同じ。すき間を空けるかくっつけるか、です。

collapseは、たたむ（テントとか折りたたみ椅子とか）・縮む・ぺしゃんこになる・つぶれるといった意味です。読み方はコラップスでいいのかな。

セルに関するスタイルですが、<table>要素に指定します。

border-collapse の値
collapse	セルの外枠をくっつけて1本に見せる
separate	セパレートね。セルの外枠をすき間を空けて離す（デフォルト）

値の継承	あり	適用できる要素	display:table または display:inline-table な要素

下のテーブルは border-collapseプロパティを指定していないので、デフォルトの値 separateです。
セルとセルの間にすき間ができていますね。

cell	cell
cell	cell
cell	cell

上のサンプルの HTMLです。

<table id="smp1_1_1">
  <tr>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>

サンプルの CSSです。

table#smp1_1_1 {
	border:solid 1px pink}
table#smp1_1_1 td {
	border:solid 1px #ccc;
	padding:1em}

border-collapse: collapse を指定すれば、セルがくっついて borderも1本になります。

cell	cell
cell	cell
cell	cell

サンプルの CSSです。（HTMLはさきほどと同じです）

table#smp1_1_2 {
	border:solid 1px pink;  /*table要素のborderは重なって見えなくなりますね*/
	border-collapse:collapse}
table#smp1_1_2 td {
	border:solid 1px #ccc;
	padding:1em}

border-spacingでセルの外枠の間隔を指定する

border-spacingプロパティは、セルの間隔を指定します。

border-spacing の値
数値	単位を付けて数値で指定。マイナスの値は不可。デフォルトは０ ＊値が1つなら、上下左右全部同じ ＊値が2つなら、左右、上下の順

値の継承	あり	適用できる要素	display:table または display:inline-table な要素

まずはこのテーブルを見てください。
これは セルに margin を指定した NGな例です。margin を指定しても何も起こっていませんね。

cell	cell
cell	cell
cell	cell

サンプルの CSSです。（HTMLはさきほどと同じです）

table#smp1_2_0 {border:solid 1px pink;}
table#smp1_2_0 td {
	border:solid 1px #ccc;
	padding:1em;
	margin:2em}  /* ←tdに margin を指定しても無効*/

テーブルには、border-spacingプロパティが用意されていて、各セルの間隔はコレで指定します。よって margin は使えません。

当然、border-collapse:separate の状態のときだけ border-spacingが使えます。
border-collapse:collapse で各セルがくっついた状態なら、border-spacing を使っても無意味。

border-spacing は、各セルに関するスタイルですが、親の<table>要素に指定します。
下のサンプルは、border-spacing を 2em にしました。

cell	cell
cell	cell
cell	cell

サンプルの CSSです。（HTMLはさきほどと同じです）

table#smp1_2_1 {
	border:solid 1px pink;
	border-spacing:2em}
    /*border-collapse:separateはデフォなので指定していません*/
table#smp1_2_1 td {
	border:solid 1px #ccc;
	padding:1em}

この border-spacing、値を2つ指定することもできます。
その場合、最初は「左右」、次が「上下」の値になるので要注意です。
margin や padding とかのショートハンドでは、値2つでは「最初が上下、次が左右」だったんですが、逆なんですね。これはクセモノ。

このようなCSSソースだと

table#smp1_2_2 {
	border:solid 1px pink;
	border-spacing:10px 30px}
    /*border-collapse:separateはデフォなので指定していません*/
table#smp1_2_1 td {
	border:solid 1px #ccc;
	padding:1em}

こんなプレビューになります。左右のすき間が 10px、上下が 30px ね。

cell	cell
cell	cell
cell	cell

table-layoutで各列の幅を決める

table-layoutプロパティは、ブラウザがテーブルを読み込んでから表示するまでの行程が「auto」か「fixed」を選びます。
「auto」は、テーブル全体を読んでから 各セルの内容によってセル幅を決めます。
「fixed」だと、1行目のセル数を読んで、セル幅を均等割にします。

セルの中身に関わらず、セルを同じ幅にしたいとき table-layout:fixed を指定しましょう。
しかもこっちのほうが表示が速いらしい。
（そうとう情報量が多いテーブルじゃないかぎり、あまり速さは変わらないと思うけどね...w）
このプロパティも、<table>要素に指定します。

table-layout の値
auto	全体のデータ読み込み後にtable表示を開始（デフォルト）
fixed	1行に何セルあるかで各セルの幅を均等割に決定して表示を開始（=速い）

値の継承	あり	適用できる要素	display:table または display:inline-table な要素

ここで注意点。これ重要。
セル幅を均等にするには <table>要素に width 指定をする必要があります。

サンプルを見てみましょう。
下のような メニューなどで、セルの左右の幅を計算せずに均等にしたいときに table-layout:fixed を使うと便利です。

ショップ情報

お客様の声

スタッフのご紹介

会社概要

上のサンプルの HTMLです。

<table id="smp1_3">
  <tr>
    <td>ショップ情報</td>
    <td>お客様の声</td>
    <td>スタッフのご紹介</td>
    <td>会社概要</td>
  </tr>
</table>

サンプルの CSSです。

table#smp1_3 {
	width:100%;  /*width指定したら均等割になるよ*/
	border-collapse:collapse;
	table-layout:fixed}
table#smp1_3 td {
	border:solid 1px #ccc}
table#smp1_3 td a {
	display:block;
	padding:0.5em;
	font-weight:bold;
	text-align:center;
	background:cornsilk}
table#smp1_3 td a:hover {background:olive; color:white}

ちなみに table-layout:fixed を指定しないとこんなかんじ。 セル内の文字数によってセル幅が決まります。

ショップ情報

お客様の声

スタッフのご紹介

会社概要

empty-cellsで空のセルの外枠や背景を表示するかしないか決める

empty-cellsプロパティは、空のセル（empty cells）をどうするか指定します。
empty-cells: hide（隠す）にすると、内容が無い空のセルは、自動的に背景や外枠（ボーダー）が表示されなくなるので、スッキリします。

empty-cells の値
show	空のセルの背景やボーダーを表示する（デフォルト）
hide	空のセルの背景やボーダーを表示しない

値の継承	あり	適用できる要素	<td> <th>要素。または display:table-cell な要素

これ、以前 <table>要素の時に紹介しているので、詳細はこちらをご覧ください。
[16-4] table のセルの枠線を非表示にしよう

このプロパティは、テーブルのセル（ <td>要素や <th>要素）に指定します。
空の td（または th）なら非表示になり、中身があれば表示します。

table.sample2 tr td {
	empty-cells:hide}

visibility:collapseでセルを非表示にする

visibilityプロパティ の3つの値「visible、hidden、collapse」のうちの1つ collapse は、テーブルのセルや セルのグループを非表示にする値です。
これは、セルの中に中身があるか空かは関係なく、中身があっても非表示にできます。
非表示にしたいセル（またはセルのグループ）に クラス名などをつけて、visibility: collapse とすればOK。

visibilityプロパティについては、こちらをご覧ください。
【19】visibility で表示か非表示かを指定しよう

caption-sideでキャプションの位置を上か下か決める

これは、テーブルの<caption>要素の位置を、テーブルに上にするか下にするか だけのモノです。

caption-side の値
top	テーブルの上にcaptionを置く（デフォルト）
bottom	テーブルの下にcaptionを置く

値の継承	あり	適用できる要素	<caption>要素。または display:table-caption な要素

caption-side:top がデフォルトなので、何も指定しなければ caption は上に付きます。
テーブルの下にキャプションを置きたいときだけ、caption-side:bottom と指定します。

<caption>要素や caption-side:bottom については、
[16-2] table にタイトルをつけよう（caption）
をご覧ください。

テーブルセルに使える vertical-alignプロパティ

テーブルセルには vertical-alignプロパティが使える という特徴があります。
前回の「display:table-cellで要素をテーブルセルにする」でも使っていますが、テーブルセル内で縦の揃え方を指定できるプロパティです。

vertical-alignプロパティが使えると、上下の中央や、下揃えもできるようになります。これは便利です。
vertical-alignプロパティについては、
【32】インラインの縦方向の整列を決める vertical-alignプロパティをご覧ください。

display: table と display: table-cell、そしてvertical-align を使ったサンプルは、以前【7-2】CSS3の新しい単位 vw, vh, vmin, vimax について の記事でも紹介しました。
vhという単位を使ってボックスを画面いっぱいにして、その縦中央にコンテンツを表示したい時にはテーブルの性質を使うのが最適というサンプルです。
↓クリックで別ウィンドウで開きます。

margin と padding が効かない要素もあるよ

テーブル関連要素で要注意なのは、margin と padding が効かない要素もあること。

marginは、<table> <caption>要素のみに使えます。
<th> <td> <tr> <thead> <tbody> <tfoot> <colgroup> <col> には使えないので要注意。
<th> <td>のテーブルセルは margin でなく border-spacingプロパティを使うんでしたね。
<tr> <thead> <tbody> <tfoot> <colgroup> <col>はグルーピングのための要素なので margin は使えなくて当たり前。

paddingは、<table> <caption> <th> <td>要素のみに使えます。
<tr> <thead> <tbody> <tfoot> <colgroup> <col> には使えないので要注意。
これらはグルーピングのための要素なので。

次回予告

テーブルって表組みのための要素なので、ほかのHTML要素とかなり性質が違いますね。
そのため専用のCSSプロパティが用意されているんですね。
display: table や display: inline-table を使って ほかの要素をテーブル化した時も、これらの専用プロパティで指定することになります。

さて、次回はまた displayプロパティに戻って、ルビ関連じゃない要素に指定して ルビテキストを表示できるようになる display: ruby や display: ruby-text などを使ってみましょう。