|
今回のポイント captionの使い方 境界線をCSSで描く classとidのおさらい th，thead，tbody，tfootによるtableの構造化 |
今回はtableについて基礎から勉強します。なお今回のtableの解説は，ページ・レイアウト時のtable使用についてではなく，ページ内に表を描くというtable本来の使い方についての説明です。レイアウトにtableを使用するにしても，tableの基本概念がわかっていないと応用がききません。もともとtableとはどういうものなのか，そこから見ていくことにします。
まず，なぜここでtableの話なのかを説明しておかなくてはなりません。現在よく使われているPHPを使ったWebアプリケーションの場合，データベース・システムのMySQLやPostgreSQLと組み合わせてサイトを構築することが多くあります。商品情報や会員情報など数十から数万という数のデータが入っているデータベースから，何らかの形でページ上（管理ページも含む）にデータを表示しようとすると，やはりtableを使った一覧形式での表示が一般的手法になります。
データの個数分だけループで<tr>と<td>を書き出せばいいや，というほどtableも単純ではなく，またtableを書き出す際に，CSSを使ってある程度は装飾をしないとページ全体の体裁から浮き上がってしまいます。CSSを適用するためにもtableの構造を理解する必要があるのです。
最も単純なtableでさえブラウザによって見え方が違う
では実際にtableを作ってみましょう。最も単純なtableの記述は次のようになります（リスト1，図1）。
<?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>
</head>
<body>
<table>
<tr><!--1行目-->
<td>列車種別</td>
<td>速度</td>
<td>運賃</td>
</tr>
<tr><!--2行目-->
<td>新幹線</td>
<td>速い</td>
<td>高い</td>
</tr>
<tr><!--3行目-->
<td>普通列車</td>
<td>遅い</td>
<td>安い</td>
</tr>
</table>
</body>
</html>
表組みはされていますが，このままでは境界線も無く非常にわかりづらいですね。そこで境界線を表示させるために<table>の部分を<table border="1">に書き換えます。すると境界線が表示されて，いかにも表らしくなります（図2）。
ただし，border="1"で，どんな境界線が描かれるのかはブラウザ任せです。図2はSafariでの表示例ですが，Internet Explorer（IE）で表示すれば，もう少し立体的な境界線が描かれます（図3）。
HTMLからXHTMLへと仕様が変っていく中で，いくつかのプロパティやタグが非推奨あるいは削除になっていきましたが，tableのborderはXHTMLでも利用可能なプロパティです。安心して使ってください。ただし上の図で見たようにブラウザによって見え方が変ってしまうため，どのブラウザで見てもページ・デザインを画一化したい場合には使いにくくなっています。
デザインをプログラムの実装が分業制になっている場合，デザイナからページの雛形を渡されて，そこにデータベースから取り出したデータを一覧で表示したいといった時があります。そんなときには，デザイナがかなり繊細にデザインしたページの中に，プログラマが何も考えないで境界線を出すためにborder="1"としてはいけません。
例えばページ内の他の部分では薄いグレーやブルーで幅1ドットの細い線をdiv領域の境界線に使っているようなページなのに（最近の主流です），tableの境界線だけ図2のような見え方をしてしまうのはカッコ悪すぎます。「せっかくデザインしたのに」とデザイナからひんしゅくを買うことになるかもしれません。
そこで境界線をCSSで描画するという手法で装飾を考えていくわけですが，ちょっとその前にtableに関するHTMLの基礎知識をもう少し学習しておくことにしましょう。
