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

準備STEP.2 サンプル表のHTML上のポイントを確認

それでは、今回のサンプルで使う表のHTMLを書いてみましょう。
以下のようなソースになります。
※改行が加わって読みにくい場合は、ソースを一旦テキストエディタなどにコピー＆ペーストしてご覧下さい。

<table class="noveltable" cellspacing="0">

   <thead>

      <tr><th>作品名</th><th>作家名</th><th>出版社</th><th>価格</th></tr>

   </thead>

   <tfoot>

      <tr><th colspan="3">合計</th><td class="price">1,710円</td></tr>

   </tfoot>

   <tbody>

      <tr><th>涼宮ハルヒの憂鬱</th><td>谷川 流</td><td>角川書店</td><td class="price">540円</td></tr>

      <tr><th>ゼロの使い魔</th><td>ヤマグチノボル</td><td>メディアファクトリー</td><td class="price">580円</td></tr>

      <tr><th>灼眼のシャナ</th><td>高橋弥七郎</td><td>メディアワークス</td><td class="price">590円</td></tr>

   </tbody>

</table>

ポイントは、次の点です。

thead, tbody, tfootの各要素を使って、ヘッダやフッタの領域を明示する。（※ヘッダとフッタは、中身よりも先に記述します。）
tableタグに class="noveltable" を加えて、「この表だけ」を装飾の対象にできるようにする。
価格を記載するセルを作る tdタグに class="price" を加えて、「このセルだけ」に適用できる装飾を指定できるようにする。

なお、フッタ部分にある「colspan="3"」というのは、「横3つのセルを1つに合体する」という記述です。

また、tableタグに「cellspacing="0"」という記述があります。これは、Mac版のIEで、枠線が二重に表示されてしまうのを防ぐために必要な記述です。

このHTMLを表示させると、次のようになります。（※HTMLで枠線を加えてあります）

作品名	作家名	出版社	価格
合計			1,710円
涼宮ハルヒの憂鬱	谷川流	角川書店	540円
ゼロの使い魔	ヤマグチノボル	メディアファクトリー	580円
灼眼のシャナ	高橋弥七郎	メディアワークス	590円

これで、準備STEPは終わりです。あとは、スタイルシートを駆使して、以下のような表に装飾していきましょう！

作品名	作家名	出版社	価格
合計			1,710円
涼宮ハルヒの憂鬱	谷川流	角川書店	540円
ゼロの使い魔	ヤマグチノボル	メディアファクトリー	580円
灼眼のシャナ	高橋弥七郎	メディアワークス	590円