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

今回は、CSSの empty-cellsプロパティを使います。
これは、<table>上の 空のセル（ = テキスト等のデータが無い）の 枠線や背景を非表示にする事ができます。
これは、超簡単で便利なので、ぜひ覚えておこう。

このようにスッキリします。

8月
sun	mon	tue	wed	thu	fri	sat
					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

何もしていない状態はこれ↓

8月
sun	mon	tue	wed	thu	fri	sat
					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

何もテキストが入っていないセルに枠線があると邪魔なので、非表示にします。

CSSプロパティと値	empty-cells:hide

● 2017年10月、サンプルは本文内に記載し、それに伴い本文も書き直しました。

CSSでempty-cellsを指定しよう

サンプルのHTMLを見てみましょう。カレンダーなのでちょっと長いけど。
ハイライト部分が空のセルです。

<table class="sample2">
  <tr>
    <th colspan="7">8月</th>
    </tr>
  <tr class="youbi">
    <td>sun</td>
    <td>mon</td>
    <td>tue</td>
    <td>wed</td>
    <td>thu</td>
    <td>fri</td>
    <td>sat</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
  <tr>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
    <td>15</td>
    <td>16</td>
  </tr>
  <tr>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
    <td>21</td>
    <td>22</td>
    <td>23</td>
  </tr>
  <tr>
    <td>24</td>
    <td>25</td>
    <td>26</td>
    <td>27</td>
    <td>28</td>
    <td>29</td>
    <td>30</td>
  </tr>
  <tr>
    <td>31</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

サンプルのCSSを見てみましょう。

table.sample2 {
	width: 100%;
	border: 1px solid #ddd;
	margin: 1em 0;
	padding: 7px;
	border-spacing:3px;
	}
table.sample2 tr th {
	text-align: center;
	font-size: 14px;
	padding: 1px;
	background: #c7ebc9;
	}
table.sample2 tr td {
	text-align: center;
	font-size: 14px;
	border: 1px solid #ddd;
	padding: 5px;
	}
table.sample2 tr.youbi td {
	font-size: 11px;
	padding: 1px;
	background: #ffc;
	border: none;
	}
table.sample2 tr td {
	empty-cells:hide;
	}

<td>要素に ただ empty-cells:hide と指定するだけ。
これで 自動的に空の <td>要素の枠線や背景を非表示にできます。
いいですねえ〜 オートマチック！

empty-cellsプロパティは、<th>要素にも使えます。セル用だからね。

「hide」の逆、表示する値は「show」。
empty-cellsプロパティにはこの「hide」と「show」の値しかありません。
showはデフォルト値なので、めったに使わないね。
（empty-cellsプロパティを指定しなければ show だから）

次回予告

いかがでしたか？
超簡単に空のセルをスッキリ非表示にできる empty-cells: hide をぜひ覚えておきましょう。

次回は、テーブルの横列（<tr>）をグループ化する方法です。
表の各 <tr>要素を「ヘッダ部分」「データの部分」「フッタの部分」にわけて、CSSの指定をしやすくします。
そのためのHTML要素 <thead> <tbody> <tfoot>というのがあるんです。

関連記事

• [17-3] セクショニング要素と見出し要素のルール
• [17-2] セクショニングの article要素、aside要素、section要素
• [17-1] HTML5 の新要素でページ全体を組もう
• （ちょっとメモ）テーブルをレスポンシブ対応させる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] リストマーカーを画像や任意のテキストに変更する方法