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

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

前回のWeb系コラムでは、テーブルタグを使用した最も基本的な構成をみてきました。今回はCSSを使ったテーブルでよく使われるテクニックをご説明いたします。このテクニックを使用することで、画像を使用せずに、簡単に表の「セル」と呼ばれる要素を立体化できます。

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

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>
		</tbody>
	</table>
	
</body>
</html>

CSSのコードは以下です。

table, th, td{
	    	margin: 0;
	    	padding: 0;
	    	border-collapse: separate; /* ポイント1番目 */
	    	border: none;
	    	border-spacing: 0;
    	}
    	
    	table{
	    	width: 480px;
	    	border: 1px solid #c7c7c7;
	    	font-family: sans-serif;
	    	background: #deefff;
	    	color: #878787;
    	}
    	
    	th{
	    	padding: 0.8em 0.6em;
	    	border-color: #ffffff #e5c693 #c5aa7f #ffffff; /* ポイント2番目 */
	    	border-style: solid;
	    	border-width: 1px;
	    	text-align: left;
	    	font-weight: bold;
	    	background-color: #fffbee;	    	
    	}
    	
    	td{
	    	padding: 0.8em 0.6em;
	    	border-color: #ffffff #8db7e6 #019fde #ffffff;
	    	border-style: solid;
	    	border-width: 1px;
	    	text-align: left;
	    	color: #000000;
    	}

上の表は、セルの上側がオレンジ色の背景色、セルの下側はブルーの背景色で分けられています。前回出ていないHTMLタグの補足をしますと、thタグはセルの中のヘッダーのようなイメージです。セルの一部分だけ色を変えたい場合によく利用されます。

少し境界線の部分を拡大してみますと、上側と下側のセルの「境界線」の配色が異なっていることがご確認いただけると思います。セルを立体的に見せるためには、セルの境界線の色を上下左右で異なる配色に設定する必要があります。これを実現するためのポイントは以下の2点です。

1、border-collapseをseparateに指定
2、border-colorの設定

1番目は、境界線を表示するセルの要素（今回のサンプルでは、tableタグ、thタグ、tdタグです）に対して、border-collapse を separate と指定することです。separate に指定することで、境界線同士が被ることなくきちんと表示されます。従って、境界線の色を上下左右に設定するための準備として1番目の記述が必須となります。

2番目は、境界線の配色を行うことです。上記のソースコードでは border-color の右側に4つのカラーコードが連続して並んでいますが、それぞれ「上側の境界線の色 右側の境界線の色 下側の境界線の色 左側の境界線の色」の順番で指定されています。配色のポイントは、右側と下側の境界線の色をやや暗めの色に設定し、上側と左側の境界線の色を明るめの色に設定することです。これによりセルに光が当たっているような「立体的」な配色になります。今回は背景色を薄めに設定しましたので上下左右の境界線の暗めの色、明るめの色がそれぞれきちんと表示されましたが、背景色が濃かったり境界線の色に近い背景色を設定したりしますと、今回指定した4つの配色が部分的に目立たないこともあります。4つの配色がきちんと表示されませんと立体化の効果も薄れますので、もし背景色に白以外を検討する場合は、背景色と境界線の色のバランスを考えることが重要となります。

今回は境界線の配色を指定することにより、セルを立体化させて表示する方法についてお話しました。設定した境界線の太さはたった1pxですが、この1pxが表のクオリティーを上げることをご確認いただけたのではないでしょうか。ぜひ今後にお役立ていただけましたら幸いです。

（担当：斉藤　万幾子）