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

前回は、テーブルじゃない要素に display: tabledisplay: 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
<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>
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
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 の値
数値 単位を付けて数値で指定。マイナスの値は不可。デフォルトは0
*値が1つなら、上下左右全部同じ
*値が2つなら、左右、上下の順
値の継承 あり 適用できる要素 display:table または display:inline-table な要素

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

cell cell
cell cell
cell cell
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
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 を使うと便利です。

ショップ情報 お客様の声 スタッフのご紹介 会社概要
<table id="smp1_3">
  <tr>
    <td>ショップ情報</td>
    <td>お客様の声</td>
    <td>スタッフのご紹介</td>
    <td>会社概要</td>
  </tr>
</table>
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 な要素

これ、以前に「ほんっとに..」でやっているので、詳細はこちらをご覧ください。
(クリックで [16-4] table のセルの枠線を非表示にしよう が別ウィンドウで開きます)

このプロパティは、テーブルのセル( <td>要素や <th>要素)に指定します。

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

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

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

visibilityプロパティについては、displayプロパティが終わったあとすぐやります。記事を掲載したら、ここにリンクを貼りますね。

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: baseline

画像に vertical-align: middle を指定

画像に vertical-align: top を指定

<div id="smp2">
<p><img src="image/image.jpg">デフォルト vertical-align: <b>baseline</b></p>
<p><img src="image/image.jpg">画像に vertical-align: <b>middle</b> を指定</p>
<p><img src="image/image.jpg">画像に vertical-align: <b>top</b> を指定</p>
</div>
div#smp2 {margin:-1em 0 4em; border:solid 1px #ccc; padding:1em; line-height:1em}
div#smp2 p {margin:0 0 1em; background:#ffc}
div#smp2 p:last-child {margin:0}
div#smp2 p img {margin-right:0.5em; width:80px; height:auto}
div#smp2 p:nth-child(2) img {vertical-align:middle}
div#smp2 p:nth-child(3) img {vertical-align:top}

では、vertical-align の値の一覧です。

vertical-align の値
baseline ベースラインで揃える(デフォルト
下図の alphabetic baseline(ブルーのライン)がここでのベースラインです
top 要素の上端に揃える
text-top テキストの上端に揃える(テーブルセルには使用不可)
middle 上下の中央に揃える
bottom 要素の下端に揃える
text-bottom テキストの下端を揃える(テーブルセルには使用不可)
sub 下付き文字のスタイル(テーブルセルには使用不可)
super 上付き文字のスタイル(テーブルセルには使用不可)
パーセンテージ その要素の line-height の値に対する%で指定(ベースラインを0として、正の値なら上、負の値なら下へ配置)
数値 数値に px や em などの単位をつけて指定(ベースラインを0として、正の値なら上、負の値なら下に配置)
inherit 親の値を継承させる
値の継承 なし 適用できる要素 インライン要素、<td>、<th>、display: table-cellな要素

この vertical-alignプロパティですが、
W3CのCSS3のドラフトでは、今けっこう複雑になってて、
dominant-baseline、initial-letter、initial-letter-align、initial-letter-wrap という新しいプロパティが追加されてます。
また、baseline-shift、alignment-baseline という2つのプロパティも加わって、vertical-alignはこの2つのショートハンドになるみたいです。

しかしまだドラフトなので、また変わるかもしれません(今までもけっこう変わってたし)。
今のところ CSS2 の仕様で各ブラウザが対応しているので、上の表にもその値を書いておきました。

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: tabledisplay: inline-table を使って ほかの要素をテーブル化した時も、これらの専用プロパティで指定することになります。

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

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2017/07 | 08
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.