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

最終更新日:2018年06月02日  (初回投稿日:2016年05月06日)

前回は、テーブルじゃない要素に 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

上のサンプルの 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 の値
数値 単位を付けて数値で指定。マイナスの値は不可。デフォルトは0
*値が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: tabledisplay: 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: tabledisplay: inline-table を使って ほかの要素をテーブル化した時も、これらの専用プロパティで指定することになります。

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

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

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

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

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

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

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/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.