BOOK Studio947
狩野祐東・狩野さやか著書
コラム

詳しくわかるテーブル（3）

詳しくわかるテーブル（1）、同（2）に引き続き、テーブルの話題です。今回は空欄のセルを作りたいとき。

『スラスラわかるHTML&CSSのきほん』p.101〜106、p.183〜186

空欄のセルを作る

　空欄のセルを作るには、一般的には、<td>または<th>の要素として&nbsp;を入れておきます。次のソースでは1行目の左と2行目の真ん中が空欄です。

<table>
    <tr>&nbsp;<td></td><td>1-B</td><td>1-C</td></tr>
    <tr><td>2-A</td><td>&nbsp;</td><td>2-C</td></tr>
</table>

　&nbsp;は半角スペースの実体参照ですが、なぜこうしなければいけないかというと、テーブルのセルには何かが入っていないと表示されないからです。&nbsp;がなく、テーブルのスタイルにborder-collapse:separate;が適用されているとそれがよくわかります。

空欄セルに&nbsp;がない表示状態
1-B 1-C
2-A 2-C

　テーブルが歯抜けです。通常はこのような表示にしたくないので、空欄セルには&nbsp;を入れるのです。
　

empty-cellsというプロパティも

　空欄セルを表示させるにはempty-cellsプロパティを使うのも手です。<td>および<th>にempty-cells:show;を指定しておけば、空欄セルに&nbsp;がなくても歯抜けにならず表示されます。このプロパティの値はshowかhideです。showの場合は空欄セルを表示し、hideなら表示しません。ただし、バージョン7以前のIEが対応していないため、古いブラウザでも同じ見た目にしたい場合は注意が必要です。

empty-cells:show;を適用したテーブル
1-B 1-C
2-A 2-C 
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>table test</title>
<style>
table {
    border-collapse: separate;
    empty-cells: show;
}
table td {
    border: 1px solid #ccc;
}
</style>
</head>
<body>
<table>
    <tr><td></td><td>1-B</td><td>1-C</td></tr>
    <tr><td>2-A</td><td></td><td>2-C</td></tr>
</table>
</body>
</html>

こんな記事も

新着記事

著書一覧

Amazon.co.jpアソシエイト