だから表だとあれほど・・・〜テーブル系要素〜
表という表現手段
文でだらだら述べるより表にした方が分かりやすいときがあります。複数のデータを比較するような場合などが これに当てはまります。そんなわけでHTML文法にも表を表現する手段が用意されています。ただ、一つ一つ個別に要素 の説明をするのは難しいのでまとめて説明してしまいましょう。多分その方が分かりやすいでしょう。
テーブル系要素の面々
まずはじめにソースを晒しておきましょう。説明はそれからです。
記述例
<table> <tr> <th>見出しセル1</th> <th>見出しセル2</th> <th>見出しセル3</th> </tr> <tr> <td>セル1-1</td> <td>セル1-2</td> <td>セル1-3</td> </tr> <tr> <td>セル2-1</td> <td>セル2-2</td> <td>セル2-3</td> </tr> <tr> <td>セル3-1</td> <td>セル3-2</td> <td>セル3-3</td> </tr> </table>
表示例
| 見出しセル1 | 見出しセル2 | 見出しセル3 |
|---|---|---|
| セル1-1 | セル1-2 | セル1-3 |
| セル2-1 | セル2-2 | セル2-3 |
| セル3-1 | セル3-2 | セル3-3 |
table要素は表の全体を示す要素、tr要素は表の行(横)を示す要素、th要素は表の各列の見出しを示す要素、td要素は各セルを示す要素、となっています。基本的にこれらはすべてブロックレベル要素です。
表にはタイトルをつけてその表の意味を明確にすることができます。表のタイトルはcaption要素で指定することができます。
記述例
<table> <caption>表のタイトル</caption> <tr> <th>見出し</th> <th>見出し</th> </tr> <tr> <td>セル</td> <td>セル</td> </tr> <tr> <td>セル</td> <td>セル</td> </tr> </table>
表示例
| 見出し | 見出し |
|---|---|
| セル | セル |
| セル | セル |
例によってcaption要素はブロックレベル要素です。
テーブルレイアウトについて
企業や公共機関のサイトのソースなどを見ると思わぬところでテーブル系の要素を見かけると思います。 なぜ妙なところにテーブル要素があるのでしょうか。
それはテーブル要素を見た目の調整のために使っているからです。 HTMLで見た目についてとやかく言っちゃいかん、と講座のはじめのあたりに強調しましたが、 現実にはそういう考えに背いているものをよく見かけます。
CSSによるサイトデザインでは不可能でテーブルレイアウトでは可能なデザインというものが存在することは 否めません。テーブルレイアウトの方が直感的にデザインできるという面もあります。
しかしながらテーブルレイアウトは本来のHTMLの理念に反するというだけでなく、メンテナンス性の低下や デザイン性の硬直を招きます。テーブルレイアウトによる弊害を背負ってまでして得られる利点というものは 少なくとも趣味の範疇でサイトを運営している限りはないと言っていいでしょう。
テーブルレイアウトは趣味の範疇でやるもんじゃない。それが今回の結論です(笑)。
今回はこれまで。次回はフォーム系要素についてやります。・・・JavaScriptとか使わないとフォーム系要素を使う機会がないんだよな・・・。