テーブルの使い方は簡単なようで案外むづかしいです。私もこういう風に整理することでやっと頭の中が整理されました。
1.よくある表
| これはよくみかける表のパターンです。 |
何も指定していません。 |
| 枠線には影がついています。 |
枠線を太くしてみましょう。 |
cellspacingを0にすると・・・
| 私はこちらの方が好きです。 |
何も指定していません。 |
| 影はわかりません。 |
枠線を太くしてみましょう。 |
２．枠線
| 枠線の太さは５ピクセルです。 |
２列目です。 |
| 2行目です。 |
☆☆☆ |
３．枠線に色を付ける
| 私の好きなパターンです。 |
タグをご紹介しましょう。 |
| <table border="1" cellspacing="0" bordercolor="navy" > |
※ホームページビルダーだけではタグをいじらない限りできません。
Namoエディターというソフトの体験版を使って最初に出来たときはけっこう感動しました。
４．上のcellspacingを1にすると・・
| 私の嫌いなパターンです。 |
タグをご紹介しましょう。 |
| <table border="1" cellspacing="1" bordercolor="navy" > |
５．セルに色を付ける
| 最上部を再現します。 |
これは使えるパターンです。タグは
<table border="1" cellspacing="0" bordercolor="navy" >
|
６．セルごとに色を変える
| bgcolor="#669999" |
bgcolor="#ccffff" |
| bgcolor="#99cccc" |
bgcolor="#66ffff" |
メニューにも利用できます。
枠線を0とし、セル間の余白(cellspacing)も0とします。 |
７．フッター付きのテンプレート
| これは２行の表の上の行に１行の表を挿入して作っています。挿入する表の背景色は白です。border,cellspacingともに0としています。表全体、セル両方のwidth,heightともに指定します。どこかで見ましたね?そうです。新○○高校のＨＰのパターンです。 |
|
|
８．メニューの例
|
更新情報・最新ニュースをお知らせします。 |
|
私のプロフィールです。 |
|
仕事＆趣味の作品を紹介します。 |
|
私の特選リンク集です。 |
|
私の活動状況をコラムにしました。 |
|
ご意見、ご感想をお送りください。 |
※個々のセルに色を指定します。
borderは0、cellspacingは5に設定しています。
９．立体的なボタンを作ります。
こちら側はbordercolorlight="aqua"
こちら側はbordercolordark="blue"
１０．伝票
| 商品名 | 単価 |
数量 |
金額 |
|---|
| A |
350 |
5 |
1750 |
|---|
| B |
520 |
8 |
4160 |
|---|
| 合計 |
--- |
13 |
5910 |
11.過去の間違い例
私が自分のサイトでやっていた間違い例です。
| こちらに写真 |
こちらは写真の解説を書いていました。 |
| ※全体の表の中に余白を入れると写真のバランスが悪くなるので右のセルにBLOCKQUOTEでインデントを入れてました。ということは右の文章を引用したものだと宣言していたことになります。今から考えると恥ずかしいです。
|
そこで下のように変更しました。
| こちらに写真 |
余白 |
ここに写真の解説を書いています。 |
余白 |
| ※今日こういう風に変更しました。随分すっきりしました。モデルになるきれいなページをホームページビルダーなどで取り込めばテーブルが見えますのでレイアウトの詳細がよく解り、とても勉強になります。 |
Henrry Oates mail:oates@henrry.net
|