見やすい表の構成とは #1

投稿日時：
カテゴリ：HTML・CSS・Webデザイン

これからシリーズとして見やすい表を作るためのポイントについてお話していきたいと思います。
そもそも表とは何かを考えてみますと、複数の情報をわかりやすく分類して表示するものと言えます。Webサイトでよく使用されることが多い例を挙げますと、会社情報、メニュー表、料金表などがあります。またショッピングサイトなどでは、詳細な商品情報をわかりやすく表示する際にもよく使用されています。Webで表を作成するには、テーブルタグを使用します。

ではテーブルタグを使用した表はどのような構成になっているのか、基本的な部分を確認しましょう。


1 2 3 4
2-1 2-2 2-3 2-4
3-1 3-2 3-3 3-4 
<table border="1">
<thead><!--表のヘッダー要素 ここから-->
     <tr><!--行-->
          <td>1</td><!--マス目-->
          <td>2</td>
          <td>3</td>
          <td>4</td>
     </tr>
</thead><!--表のヘッダー要素 ここまで-->
<tbody><!--表のボディー要素 ここから-->
      <tr>
          <td>2-1</td>
          <td>2-2</td>
          <td>2-3</td>
          <td>2-4</td>
     </tr>
     <tr>
          <td>3-1</td>
          <td>3-2</td>
          <td>3-3</td>
          <td>3-4</td>
     </tr>
</tbody><!--表のボディー要素 ここまで-->
</table>

ソースコードの要素を上から順に見て行きますと、

・1行目には表の境界線の設定
・2行目から9行目には表のヘッダー要素
・10行目から24行目には表のボディー要素

大まかにこのような構成になっていることが、ご確認いただけると思います。
上記のHTMLだけでは、見た目はかなり味気ないものになりますね。通常は上記のような構成をHTMLで作成した後、CSSなどを組み合わせることによって、わかりやすい表にするための作り込みを行います。目的にもよりますが、具体的に多くの情報をすっきりと見せるためにヘッダー要素だけ別の色を設定したり、また多くの注目を集めるためにテーブルタグの中に画像を組み込んだりすることもあります。作り込みが行われたデザイン例を以下から見ていきましょう。

1.シンプルなデザイン
amazon.co.jp

フォントの色が黒色のため、文字を見やすくするために（コントラストを高く保つために）背景色を薄い色に設定している点がポイントです。

2.情報量が多いものをすっきりとさせたデザイン
csstablegallery

背景色を交互に異なる色に設定することで行ごとの把握がしやすく、隣り合う行との見間違いを少なくすることが可能です。情報量をたくさん並べるテーブルではぜひ押さえておきたいテクニックです。

3.画像を使用して、リッチに見せるデザイン
fetchapp

画像が追加されることで表に対する注目度が増しますね。

CSSの背景色や境界線の色の組み合わせを変えると、ずいぶん印象が変わってくることがイメージしていただけた事と思います。
商品情報などを載せる場合、情報を載せるテーブルをあえてシンプルに作ることで、近くに配置してある商品画像などのコンテンツをより目立たせる、といった使い方も可能です。シンプルなCSSだけで簡単に作るべきか、それとも画像を使ってアピールすべきかは前もって考えておき、場合に応じて使い分けましょう。今後にお役立ていただけましたら幸いです。

（担当：斉藤　万幾子）