HTMLで表を作成すると通常、罫線部分が立体的なデザインで描かれます。しかしこの立体的デザインは、ある種独特なので使いにくい場合もあります。
CSSであれば、表に対して特別なプロパティ
border-collapseを使うことで、表の境界線が隣の境界線と密着し、フラットなデザインの罫線となります。ちょうどWORDの表のような、よりシンプルなデザインに見えることでしょう。
border-collapseプロパティを使って下の作成例のような表のあるページrensyu7.htmlを作成してください。
分類 商品 説明 くだもの りんご 銘柄は津軽。しゃっきっとした歯ごたえが特徴。 みかん 愛媛産。冬のこたつにみかんは日本人の心。 比較
下の例はスタイルシートを使わず、HTMLのみで作成した表です。罫線が立体的なデザインになっています。
拡大すると、罫線が二重に描かれており、立体的なデザインになっている様子がよく分かります。
装飾が過剰に感じるので、この罫線を一重のフラットのデザインにするのが目標です。
- HTMLファイルを開き、
<table>を使って、以下のように表を作成します。
： 省略
<body>
<table border="1">
<tr>
<th>分類</th>
<th>商品</th>
<th>説明</th>
</tr>
<tr>
<td rowspan="2">くだもの</td>
<td>りんご</td>
<td>銘柄は津軽。しゃっきっとした歯ごたえが特徴。</td>
</tr>
<tr>
<td>みかん</td>
<td>愛媛産。冬のこたつにみかんは日本人の心。</td>
</tr>
</table>
</body>
： 省略表を作成したら構造に問題が無いか、動作確認をしておいてください。
一般的なデザインの表HTMLの編集は以上で完了です。
続いてCSSの編集に移ります。
罫線を細い線で描くために、以下の指定を行います。
まずCSSで、
<table>にborderプロパティで設定をします。罫線の太さは１ピクセル（1px）、罫線の色は好きな色を設定してください。ここではグレー（#666666）を使用しています。table { border:solid 1px #666666; }さらに
<table>に特殊CSSプロパティborder-collapseを使用し、collapseという値を設定します。table { border:solid 1px #666666;
border-collapse:collapse; }
分類 商品 説明 くだもの りんご 銘柄は津軽。しゃっきっとした歯ごたえが特徴。 みかん 愛媛産。冬のこたつにみかんは日本人の心。 二重に見えていた罫線が密着し、細い罫線となります。これで完成です。
一般的な表の用途では、こういったシンプルなデザインが使いやすいのではないでしょうか。
<table>に対して使用できる特殊なCSSプロパティborder-collapseを使うと、このようにシンプルな表のデザインができますので参考にしてください。シンプルな表のほうが実用性が高いかと思いますので、この設定の出番はきっと多いことでしょう。
