|
今回のポイント 空セルと の効果 見出し行を装飾する 細いケイ線を引く データ・セルを修飾する |
前回，thead/tbody/tfootとthやcaptionといったtable系のタグを一通り理解したところで，実際にtableのデザインをいくつか作って眺めてみることにします。プレーンなtableをCSSでいろいろと装飾してみて，デザインを考えるという段取りにしましょう。
まずはプレーンなtableを作る
社員名簿をイメージしてプレーンなtableを作ってみました（リスト1）。データベースから読み出してPHPで生成したtableという感じで眺めてください。このプレーンなtableはborderの設定などをしていないためケイ線は一切無く，お世辞にも見やすいとは言えません（図1）。
リスト1●プレーンな社員名簿table
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>tableの基本形</title>
<style type="text/css">
/*ここにtable装飾のCSSを書きます*/
table{
/*とりあえず最初は空*/
}
</style>
</head>
<body>
<table>
<caption>社員名簿</caption>
<thead>
<tr>
<th>社員番号</th>
<th>姓</th>
<th>名</th>
<th>性別</th>
<th>年齢</th>
<th>部課名</th>
<th>役職</th>
<th>内線番号</th>
<th>住所</th>
</tr>
</thead>
<tbody>
<tr>
<td>100001</td>
<td>山田</td>
<td>一郎</td>
<td>男</td>
<td>34</td>
<td>営業部営業一課</td>
<td>課長</td>
<td>1011</td>
<td>東京都港区</td>
</tr>
<tr>
<td>100002</td>
<td>高橋</td>
<td>良子</td>
<td>女</td>
<td>27</td>
<td>営業部営業一課</td>
<td> </td>
<td>1012</td>
<td>東京都杉並区</td>
</tr>
<tr>
<td>100003</td>
<td>鈴木</td>
<td>孝</td>
<td>男</td>
<td>52</td>
<td>営業部</td>
<td>部長</td>
<td>1001</td>
<td>東京都新宿区</td>
</tr>
<tr>
<td>100004</td>
<td>原</td>
<td>達彦</td>
<td>男</td>
<td>47</td>
<td>総務部</td>
<td>部長</td>
<td>2001</td>
<td>埼玉県越谷市</td>
</tr>
<tr>
<td>100005</td>
<td>松井</td>
<td>秀子</td>
<td>女</td>
<td>32</td>
<td>総務部経理課</td>
<td>課長代理</td>
<td>2011</td>
<td>神奈川県横浜市</td>
</tr>
<tr>
<td>100006</td>
<td>長嶋</td>
<td>繁太</td>
<td>男</td>
<td>38</td>
<td>総務部経理課</td>
<td> </td>
<td>2012</td>
<td>千葉県松戸市</td>
</tr>
<tr>
<td>100007</td>
<td>田中</td>
<td>公治</td>
<td>男</td>
<td>36</td>
<td>社長室秘書課</td>
<td>社長秘書</td>
<td>9002</td>
<td>東京都渋谷区</td>
</tr>
<tr>
<td>100008</td>
<td>大道</td>
<td>弘美</td>
<td>女</td>
<td>30</td>
<td>営業部営業二課</td>
<td> </td>
<td>1024</td>
<td>千葉県松戸市</td>
</tr>
</tbody>
</table>
</body>
</html>
図1●プレーンな社員名簿table
[画像のクリックで拡大表示]
見出しとして最上行はtheadを指定し，さらにtheadの中のセルはtdではなくthを使っています。統計表ではないため最下行に合計欄のようなものはありませんのでtfootは使っていません。データベース・アプリケーションだとすると，社員名簿はこのサンプルのように8人だけということはまずなくて，たいてい数十人から数百人のデータを扱い，「次の○件」のようなリンクがtableの上下に付いたりします。サンプルは，そうしたデータベース・アプリケーションのごくごく一部を切り取ったものだと考えてください。
