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

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

前回のWeb系コラムでは、画像を使用せずに、表のセルと呼ばれる要素を立体化するテクニックについてお話をしました。今回は、画像を使用して簡単に印象的なテーブルを作る方法をご説明いたします。

以下のサンプルを用いてご説明しましょう。

HTMLのコードは以下です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css"  href="./style.css" />
</head>

<body>
	<table cellspacing="0">
		<tbody>
			<tr>
				<th>サイズ(px)
				</th>
				<th>通称
				</th>				
			</tr>
			
			<tr>
				<td>250×250 
				</td>
				<td>スクエア
				</td>				
			</tr>
			
			<tr>
				<td>200×200 
				</td>
				<td>スクエア（小）
				</td>
			</tr>
			
			<tr>
				<td>728×90
				</td>
				<td>ビッグバナー
				</td>
			</tr>
			
			<tr>
				<td>300×250
				</td>
				<td>レクタングル
				</td>
			</tr>
			
			<tr>
				<td>336×280
				</td>
				<td>レクタングル（大）
				</td>
			</tr>
			
		</tbody>
	</table>
	
</body>
</html>

CSSのコードは以下です。

table, th, td{
	    	margin: 0;
	    	padding: 0;
	    	border: none;
	    	border-spacing: 0;
    	}
    	
    	table{
	    	width: 480px;
	    	border: 1px solid #c7c7c7;
	    	font-family: sans-serif;
	    	color: #878787;
    	}
    	
    	th{
    		height: 30px; /* ポイント1番目 */
    		background-image: url(./table_th.png); /* ポイント2番目 */
    		background-repeat: repeat-x; /* 補足 */
	    	padding: 10px 20px; 
	    	border-width: 0px;
	    	text-align: left;
	    	font-weight: bold;	    	
    	}
    	
    	td{
    		height: 30px;
    		background-image: url(./table_td.png);
	    	background-repeat: repeat-x;
	    	padding: 10px 20px;
	    	border-width: 0px;
	    	text-align: left;
	    	color: #000000;
    	}

上の表を見ますと、上側の列は濃い灰色の画像、下列は薄い灰色の画像が背景に使用されています。画像は小さい容量で作る方がWebページに読み込まれる速度が早いため、今回は小さめのサイズで画像を作成しました。使用した画像は以下の2枚です。

今回のポイントはセルに背景画像を設定することです。そのために必要な2つの作業は、以下の2つになります。

1、セルの高さを設定
2、background-image の設定

1番目は、セルの高さを設定することです。セルの高さは th、td に height（高さ）を設定します。セルの高さがそのまま背景の画像の高さのサイズになります。2枚の画像は高さ 50px、幅は 10px で制作しました。コードに「padding: ○px ○px;」とありますが、左のピクセルから順番に上下の padding（セルの内側の余白）、左右の padding をそれぞれ示しています。従って高さ 50px の内訳は「30px ( height ) + 10px ( padding上 ) + 10px ( padding下 ) = 50px」となります。画像を制作する際は計算に少し注意しましょう。

2番目は、背景画像を設定することです。セルの背景画像は background-image で設定します。th には1枚目の画像、td には2枚目の画像を設定すれば完了です。

補足ですが、background-repeat は背景画像の繰り返しを設定するプロパティです。repeat-x は横方向に背景画像を繰り返す指示です。従って、幅 10px の画像が repeat-x によってセル内に繰り返し表示されているイメージになります。ただし background-repeat のデフォルトの設定値でカバーできるため、今回は background-repeat を記入しなくても表示に変化はありません。今回は小さい画像を繰り返して使用しましたが、1つのセルにつき1枚の背景画像を表示したい場合は、repeat-x のかわりに no-repeat を指定することで1枚のみの表示が可能となりますので、デザインによって使い分けるのが良いでしょう。

今回はテーブルに背景画像を設定することで、簡単に表全体を印象的に仕上げる方法についてお話ししました。実は、今回最も時間がかかったのが、解説には出てきませんでしたが画像の作成でした。グラデーションの配色や質感について、作成した画像をテーブルに当てはめて、実際の色味を見てから再度調整を行いました。画像1枚だけの印象と、画像が重なっている状態の印象が異なる場合がありますので、画像を使用する際はテーブルに設置した後、この画像で良いのか表全体を見て判断を行うことが大切です。
ぜひ今後にお役立ていただけましたら幸いです。

（担当：斉藤　万幾子）