ホームページ作成

【ホームページ作成】スタイルシートでワープロ並みに表を装飾！

テーブル（表）の作成・装飾 (HTML,CSS)

更新日：2006年10月07日

スタイルシートでワープロ並みに表を装飾！

西村文宏

ワープロで表を作成すると、様々な罫線で表を装飾できますね。そのような表をウェブ上でも作ってみたいと思いませんか？スタイルシートとHTMLで、複雑な表の装飾も自由自在に作れるようになりましょう。

準備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円

それでは、スタイルシートを駆使する方法「実践STEP」へ！ >>

表をワープロ並みに装飾する手順 (目次)

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！