2/3 スタイルシートでワープロ並みに表を装飾！ [ホームページ作成] All About

準備STEP.1-1 HTMLで表を書く

まずは、HTMLで表を作成しましょう。

シンプルな表を作りたい場合、次のようなHTMLを書けば十分です。

<table>

   <tr><th>ヘッダ1</th><th>ヘッダ2</th></tr>

   <tr><td>中身1</td><td>中身2</td></tr>

</table>

表全体を <table>～</table> で囲み、1行を <tr>～</tr> で作ります。セル1つ1つは <td>～</td> で作れます。ヘッダ用のセルの場合は、<th>～</th> で作れます。この4種類の要素（HTMLタグ）さえ知っておけば、とりあえず表は作れますね。

これを表示すると、次のようになります。（※見やすいように罫線を表示させています）

ヘッダ1	ヘッダ2
中身1	中身2

装飾も何もない表ですが、とりあえず「表」にはなっていますね。

準備STEP.1-2 スタイルシートでデザインするために

さて、スタイルシートで複雑な装飾を施すためには、もう少しHTMLに加えておきたい要素があります。以下のソースを見て下さい。後からスタイルシートで装飾することを考えて、表の「ヘッダ」や「本体」・「フッタ」を示す要素（タグ）も省略せずに記述することがポイントです。

<table>

   <thead>

      <tr><th>ヘッダ1</th><th>ヘッダ2</th></tr>

   </thead>

   <tfoot>

      <tr><td>フッタ1</td><td>フッタ2</td></tr>

   </tfoot>

   <tbody>

      <tr><td>中身11</td><td>中身12</td></tr>

      <tr><td>中身21</td><td>中身22</td></tr>

   </tbody>

</table>

上記のHTMLソースには、thead, tbody, tfoot という3つの要素を加えています。
これらは、<thead>～</thead>が表のヘッダ（上部）、<tbody>～</tbody>が表の中身、<tfoot>～</tfoot>が表のフッタ（下部）を表しています。

※表の中身（tbody）よりも表のフッタ（tfoot）を先に記述します。これは、大きな表を表示する際に、中身を読み切る前にフッタを表示できるように、フッタを先に記述できる仕様になっているからです。なお、誤ってtfootよりもtbodyを先に記述しても、（少なくとも代表的なブラウザでは）表示上の問題は特にありません。

これらの要素を省略しても見た目に変化がないので、記述したことのない方々も多いかもしれませんね。上記のソースを表示すると、以下のように見えます。