[Labyrinthe Noir]>[Top]>[HTMLタグ講座]>

<table> テーブル 事例集

（注意）このページでは<blockquote>を使って左右の余白を調節しています。そのため、本文やテーブルの位置が画面端からではなく、左寄せや右寄せであっても余白が生じています。

<td>と<th>の基本

<td>と<th>の使い分けの基本です。
<td>はデータ項目、<th>は各項目のタイトルとなるため、表の最上段または左列にきます。

表示 ソース
日付 実績 担当
１月 ５００ あさい
２月 ３４０ かわの
３月 ６９０ あさい
４月 ７２０ あさい
５月 ５６０ かわの
６月 １,４２０ たかはし
<table border="2">
<tr><th>日付</th><th>実績</th><th>担当</th></tr>
<tr><th>１月</th><td align="right">５００</td><td>あさい</td></tr>
<tr><th>２月</th><td align="right">３４０</td><td>かわの</td></tr>
<tr><th>３月</th><td align="right">６９０</td><td>あさい</td></tr>
<tr><th>４月</th><td align="right">７２０</td><td>あさい</td></tr>
<tr><th>５月</th><td align="right">５６０</td><td>かわの</td></tr>
<tr><th>６月</th><td align="right">１,４２０</td><td>たかはし</td></tr>
</table>

上記例では何かの売上実績表のような物です。月ごとの売上トップの実績と名前の表だと思ってください。
最上段を<th>にするのはとても基本的な方法です。
日付欄にも<th>を設定していますが、この辺りはお好みで良いでしょう。ただし、注意したいのは文字をそのまま左寄せにするのではなく、中央か右寄せにした方が良いでしょう。下表の赤字部分を比較して見てください。

左寄せ 中央寄せ 右寄せ
日付 実績 担当
７月 １,０６０ かわの
８月 １,８２０ あさい
９月 ５３０ たかはし
１０月 ４４０ たかはし
１１月 ７１０ かわの
１２月 ２,１２０ かわの
日付 実績 担当
７月 １,０６０ かわの
８月 １,８２０ あさい
９月 ５３０ たかはし
１０月 ４４０ たかはし
１１月 ７１０ かわの
１２月 ２,１２０ かわの
日付 実績 担当
７月 １,０６０ かわの
８月 １,８２０ あさい
９月 ５３０ たかはし
１０月 ４４０ たかはし
１１月 ７１０ かわの
１２月 ２,１２０ かわの

微妙な違いですが、日付が二桁になるとどこに揃えるかで表の雰囲気が変わります。中央寄せか右寄せが整った印象を受けるでしょう。<th>の場合でもalignを使って右寄せはできます。
二桁の月は「１０月」とするか「10月」とするかで、全体の幅の整い方が違って見えます。半角だと全体にも揃って見えます。しかし、右寄せの場合だと全角の方が見やすい感じを受けます。実績の数字も合わせて見ると、印象の違いがわかりやすいかもしれません。お好みで選んでください。

半角＆中央寄せ 全角＆右寄せ
日付 実績 担当
７月 1,060 かわの
８月 1,820 あさい
９月 530 たかはし
10月 440 たかはし
11月 710 かわの
12月 2,120 かわの
日付 実績 担当
７月 １,０６０ かわの
８月 １,８２０ あさい
９月 ５３０ たかはし
１０月 ４４０ たかはし
１１月 ７１０ かわの
１２月 ２,１２０ かわの

実績の数値には「,」を入れてありますが、全角だと「１，８００」のように隙間が気になるので「１,８００」と半角にするとすっきりします。
数字も半角よりも全角の方が見やすいのは当然ですが、ブラウザで文字の大きさを自由に変更できますので、周囲の文字とのバランスで選択しても、利用の不便はあまりないと思います。ただ、数字が増えると見にくくなりますので、cellpaddingなどで余白を持たせたり、色づけをしたりして見やすい表を工夫する必要があるでしょう。

担当の欄は、何もしていませんが、文字数の最小と最大の場合を考えて見ると、１文字～４文字（最大５文字）くらいは念頭に置かねばなりません。そうすると中央寄せだとあとでちぐはぐな印象が出るので、あえて左寄せにしておくのがポイントです。

上記の表では月だけで日にちがないため単純でしたが、月日の場合は中央寄せにしても「１月１日」と「１２月３１日」の幅の差を吸収できません。
中央寄せの場合「１月１日」「12月31日」として幅の差を少しでも減らすため、一桁の部分は全角二桁の部分は半角にすると綺麗です。
右寄せの場合は「１月　1日」「０１月０１日」と桁を揃える工夫が必要です。

全角＆中央寄せ 全角＆右寄せ
日付 実績 担当
１月１日 １,０６０ かわの
５月１０日 １,８２０ あさい
６月８日 ５３０ たかはし
９月１５日 ４４０ たかはし
１０月２日 ７１０ かわの
１２月３１日 ２,１２０ かわの
日付 実績 担当
１月１日 １,０６０ かわの
５月１０日 １,８２０ あさい
６月８日 ５３０ たかはし
９月１５日 ４４０ たかはし
１０月２日 ７１０ かわの
１２月３１日 ２,１２０ かわの
全半角＆中央寄せ 全半角＆右寄せ
日付 実績 担当
１月１日 １,０６０ かわの
５月10日 １,８２０ あさい
６月８日 ５３０ たかはし
９月15日 ４４０ たかはし
10月２日 ７１０ かわの
12月31日 ２,１２０ かわの
日付 実績 担当
１月１日 １,０６０ かわの
５月10日 １,８２０ あさい
６月８日 ５３０ たかはし
９月15日 ４４０ たかはし
10月２日 ７１０ かわの
12月31日 ２,１２０ かわの

見栄え良く揃えるのは難しいので、次のようにしてみても良いでしょう。

全角＆右寄せ 全角＆右寄せ 全角＆右寄せ
日付 実績 担当
１月 １日 １,０６０ かわの
５月 １０日 １,８２０ あさい
６月 ８日 ５３０ たかはし
９月 １５日 ４４０ たかはし
１０月 ２日 ７１０ かわの
１２月 ３１日 ２,１２０ かわの
日付 実績 担当
１月 １日 １,０６０ かわの
１０日 １,８２０ あさい
２０日 ５３０ たかはし
２月 １日 ４４０ たかはし
１０日 ７１０ かわの
２０日 ２,１２０ かわの
日付 実績 担当
１月 １日 １,０６０ かわの
１０日 １,８２０ あさい
２０日 ５３０ たかはし
２月 １日 ４４０ たかはし
１０日 ７１０ かわの
２０日 ２,１２０ かわの

中央と右の表は同じ月のデータが３つずつある場合に、月の項目をrowspanで１つにまとめてあります。更に月の項目を上下の中央か上に寄せるかで違いが出ています。

【色分けの工夫】

文字色

色分けをすることで表の見栄えを良くしたり、データの視認性を良くします。ただし、使い方を間違えると逆に見難いだけの表ができあがるので注意が必要です。
苦労して作ると、達成感だけで満足してしまうことがあり、それが失敗の元になります。ブラウザで表示してみて、落ち着いて第三者の目で見つめ直しましょう。少し休憩して時間をおいて見直すと良いかもしれません。

表示 ソース
日付 実績 担当
１月 ５００ あさい
２月 ３４０ かわの
３月 ６９０ あさい
４月 ７２０ あさい
５月 ５６０ かわの
６月 １,４２０ たかはし
<table border="2">
<tr><th>日付</th><th>実績</th><th>担当</th></tr>
<tr><th>１月</th><td align="right">５００</td><td><font color="#FF0000">あさい</font></td></tr>
<tr><th>２月</th><td align="right"><font color="#0000FF">３４０</font></td><td><font color="#0000FF">かわの</font></td></tr>
<tr><th>３月</th><td align="right">６９０</td><td><font color="#FF0000">あさい</font></td></tr>
<tr><th>４月</th><td align="right">７２０</td><td><font color="#FF0000">あさい</font></td></tr>
<tr><th>５月</th><td align="right">５６０</td><td><font color="#0000FF">かわの</font></td></tr>
<tr><th>６月</th><td align="right"><font color="#FF0000">１,４２０</font></td><td><font color="#009900">たかはし</font></td></tr>
</table>

実績の最高値に赤、最低値に青色を使って強調しています。
担当の列では、担当者毎に色分けして表示していますが、見難い感じがしています。これは全部に色を付けてしまったことが原因です。

表示 表示
日付 実績 担当
１月 ５００ あさい
２月 ３４０ かわの
３月 ６９０ あさい
４月 ７２０ あさい
５月 ５６０ かわの
６月 １,４２０ たかはし
日付 実績 担当
１月 ５００ ★あさい
２月 ３４０ ●かわの
３月 ６９０ ★あさい
４月 ７２０ ★あさい
５月 ５６０ ●かわの
６月 １,４２０ ■たかはし

強調したい１つか２つだけに色を付けた方が見やすくなります。
また、色分けする場合は文字よりも記号の方が見やすくなります。

背景色

文字色はダイレクトに（直感的に）データの差を表す感じがしますが、背景色は無意識にデータを整頓させるのに役立ちます。

表示 ソース
日付 実績 担当
１月 ５００ あさい
２月 ３４０ かわの
３月 ６９０ あさい
４月 ７２０ あさい
５月 ５６０ かわの
６月 １,４２０ たかはし
<table border="2">
<tr bgcolor="#666666"><th><font color="#FFFFCC">日付</font></th><th><font color="#FFFFCC">実績</font></th><th><font color="#FFFFCC">担当</font></th>
</tr>
<tr bgcolor="#FFFFCC"><th>１月</th><td>５００</td><td>あさい</td></tr>
<tr bgcolor="#FFFFFF"><th>２月</th><td>３４０</td><td>かわの</td></tr>
<tr bgcolor="#FFFFCC"><th>３月</th><td>６９０</td><td>あさい</td></tr>
<tr bgcolor="#FFFFFF"><th>４月</th><td>７２０</td><td>あさい</td></tr>
<tr bgcolor="#FFFFCC"><th>５月</th><td>５６０</td><td>かわの</td></tr>
<tr bgcolor="#FFFFFF"><th>６月</th><td>４２０</td><td>たかはし</td></tr>
</table>

ヘッダーを目立たせるために濃い色の背景を使用し、薄い色を文字色にしています。
リストは一行置きに色を変えることで、大きなリストでも見やすくなります。濃淡の差があるほどはっきりとしますが、全体に柄が強調されることになります。

濃淡格差少 濃淡格差多 色調の変更 色調の逆転
日付 実績 担当
１月 ５００ あさい
２月 ３４０ かわの
３月 ６９０ あさい
４月 ７２０ あさい
５月 ５６０ かわの
６月 １,４２０ たかはし
日付 実績 担当
１月 ５００ あさい
２月 ３４０ かわの
３月 ６９０ あさい
４月 ７２０ あさい
５月 ５６０ かわの
６月 １,４２０ たかはし
日付 実績 担当
１月 ５００ あさい
２月 ３４０ かわの
３月 ６９０ あさい
４月 ７２０ あさい
５月 ５６０ かわの
６月 １,４２０ たかはし
日付 実績 担当
１月 ５００ あさい
２月 ３４０ かわの
３月 ６９０ あさい
４月 ７２０ あさい
５月 ５６０ かわの
６月 １,４２０ たかはし

このように一行置きに色を変えると見やすくなるのは良いのですが、あとから行を追加したり削除したりするような表の場合、順番がずれると非常に作業が面倒になるので注意が必要です。
また、濃い色と薄い色とどちらから始めるかでも若干雰囲気が変わります。なんとなく薄い色からだと落ち着きません。タイトル部分が濃い色だからでしょうか？

ソースの工夫

表が大きくなってくるとソースも複雑になって見難くなります。

表示 ソース
日付 実績 担当
１月 ５００ あさい
２月 ３４０ かわの
３月 ６９０ あさい
４月 ７２０ あさい
５月 ５６０ かわの
６月 １,４２０ たかはし
<table border="2">
<tr bgcolor="#666666"><th><font color="#FFFFCC">日付</font></th><th><font color="#FFFFCC">実績</font></th><th><font color="#FFFFCC">担当</font></th>
</tr>
<tr bgcolor="#FFFFCC"><th>１月</th><td>５００</td><td>あさい</td></tr>
<tr bgcolor="#FFFFFF"><th>２月</th><td>３４０</td><td>かわの</td></tr>
<tr bgcolor="#FFFFCC"><th>３月</th><td>６９０</td><td>あさい</td></tr>
<tr bgcolor="#FFFFFF"><th>４月</th><td>７２０</td><td>あさい</td></tr>
<tr bgcolor="#FFFFCC"><th>５月</th><td>５６０</td><td>かわの</td></tr>
<tr bgcolor="#FFFFFF"><th>６月</th><td>４２０</td><td>たかはし</td></tr>
</table>

タブ（タグじゃないですよ）や半角スペース（ブラウザでの表示に影響を与えない）を使ってソースを見やすく整えましょう。

ソース
<table border="2">
　　　 <tr bgcolor="#666666">
　　　　　　 <th><font color="#FFFFCC">日付</font></th>
　　　　　　 <th><font color="#FFFFCC">実績</font></th>
　　　　　　 <th><font color="#FFFFCC">担当</font></th>
　　　 </tr>
　　　 <tr bgcolor="#FFFFCC">
　　　　　　 <th>１月</th>
　　　　　　 <td>５００</td>
　　　　　　 <td>あさい</td>
　　　 </tr>
　　　 <tr bgcolor="#FFFFFF">
　　　　　　 <th>２月</th>
　　　　　　 <td>３４０</td>
　　　　　　 <td>かわの</td>
　　　 </tr>
　　　 <tr bgcolor="#FFFFCC">
　　　　　　 <th>３月</th>
　　　　　　 <td>６９０</td>
　　　　　　 <td>あさい</td>
　　　 </tr>
　　　 <tr bgcolor="#FFFFFF">
　　　　　　 <th>４月</th>
　　　　　　 <td>７２０</td>
　　　　　　 <td>あさい</td>
　　　 </tr>
　　　 <tr bgcolor="#FFFFCC">
　　　　　　 <th>５月</th>
　　　　　　 <td>５６０</td>
　　　　　　 <td>かわの</td>
　　　 </tr>
　　　 <tr bgcolor="#FFFFFF">
　　　　　　 <th>６月</th>
　　　　　　 <td>４２０</td>
　　　　　　 <td>たかはし</td>
　　　 </tr>
</table>

ソースが縦長になりましたが。見やすくなったと思います。

タブは「tabキー」を使って挿入する空白のことで、テキストエディタ上で文書を整えるのに使います。行の中で一定間隔でタブ位置が設定されており、その位置で文字の先頭を揃えることができます。簡易的な表のような体裁ができます。

スペースを使う場合は、必ず半角スペースを使ってください。半角スペースは二つ以上置いても、ブラウザでは１つしか表示しないことになっていますので、ソースの幅調節によく使われます。
ただし、タブと比べて正確な位置揃えに適しているとは言えません。
全角スペースについては下の注を参照してください。

段毎に<tr>がありますので、まずその位置を一つめのタブ位置で揃えます。
ブラウザによってタブ位置が違うので、タブの幅によってはタブを２つ３つ入れて見栄えの良い位置を決めてください。
次に、行内の項目やタイトルですが、更にタブで右に位置を決めます。段が違っても各項目の行位置が同じなので縦に目を動かすことで全てのデータを追いやすくなりました。

どんな表を作るかにもよりますが、内容の入れ替えが発生する場合は、とにかく見やすいソースにしておきましょう。後の作業効率が違ってきます。

また、行内に複数のタブ位置がありますので、各項目を改行せずに、タブで縦位置を揃えることができます。

<tr bgcolor="#FFFFCC">
　　 <th>１月</th>　　<td>５００</td>　　<td>あさい</td>
</tr>
<tr bgcolor="#FFFFCC">
　　 <th>２月</th>　　<td>３４０</td>　　<td>かわの</td>
</tr>

(注)
左のソースはブラウザで見えるようにするために全角スペースで位置を調節してあります。実際のソースには全角スペースを使わないようにしてください。全角スペースを使用するとテーブル内の不正な文字としてテーブル外に排出され、テーブルの上に文字列として配置されてしまいデザインを損ねる原因となります。


テーブルの階層化

テーブルの中にテーブルを作ることで、表を作るだけではなく、レイアウトを作り出します。
普通ではできないレイアウトを再現することができます。

表示
実績表 平成18年
日付 実績 担当
１月 ５００ あさい
２月 ３４０ かわの

上の表では、タイトル部分が３つの項目を１つにしてあります。更に、その中に左寄せの文字と右寄せの文字が混在しています。通常のタグではそのような２つの配置を同じ行にすることは不可能です。
そこでテーブルを使っています。 中のテーブルのborderを2にして表示し、その部分の元のソースと見てみましょう。

表示 ソース
実績表 平成18年
日付 実績 担当
１月 ５００ あさい
２月 ３４０ かわの
<table width="250" border="0">
<tr>
<td>実績表</td>
<td align="right">平成18年</td>
</tr>
</table>

ここで注目すべきところは、テーブルが透明だということ、２つの項目がありそろぞれ左寄せと右寄せが行われていること、テーブルの幅が250に指定されていることです。
テーブルのサイズを固定して、画面の四隅や中央に文字や写真をレイアウトするのも簡単です。

表示 ソース
★   ★
  Welcome!!  
★   ★
<table width="200" height="200" border="0">
　 <tr valign="top">
　　 <td>★</td><td></td><td align="right">★</td>
　 </tr>
　 <tr>
　　 <td></td><td align="center">Welcome!!</td><td></td>
　 </tr>
　 <tr valign="bottom">
　　 <td>★</td><td></td><td align="right">★</td>
　 </tr>
</table>

イメージの額縁

<table>と<img>を使って色々な額縁を作ることができます。

単純な額縁

表示 ソース

<table border="5">
<tr>
<td><img src="image/sakura.jpg" width="320" height="240"></td>
</tr>
</table>

最も単純な使い方です。少し太めのborderを指定して、１つしかない項目に写真を置きます。
<caption>でタイトルを表示しても良いでしょう。
<img>内にもborderが使えるので、写真の周囲にクッキリしたラインを入れることもできます。

枠飾り

表示 ソース

4つ角と上下左右の4カ所に飾りを配置しています。

<table width="200" height="200" border="0">
　 <tr>
　　 <td><img src="image/ht01.gif" width="30" height="30" border="0"></td>
　　 <td align="center"><img src="image/ht05.gif" width="70" height="30" border="0"></td>
　　 <td><img src="image/ht02.gif" width="30" height="30" border="0"></td>
　 </tr>
　 <tr>
　　 <td align="center"><img src="image/ht06.gif" width="30" height="70" border="0"></td>
　　 <td><p>【枠飾り】</p></td>
　　 <td align="center"><img src="image/ht07.gif" width="30" height="70" border="0"></td>
　 </tr>
　 <tr>
　　 <td><img src="image/ht03.gif" width="30" height="30" border="0"></td>
　　 <td align="center"><img src="image/ht08.gif" width="70" height="30" border="0"></td>
　　 <td><img src="image/ht04.gif" width="30" height="30" border="0"></td>
　 </tr>
</table>

これはとても単純です。パターンとしては４つ角だけでも良いでしょう。
最初に３×３のテーブルを作ります。もちろん、border="0"です。
上下左右のパーツが短いので、比較的短い文章用かもしれません。
特に難しい設定は必要としていませんし、テーブルの幅や高さも設定しなくても使えます。

表示

<table border="2">
で再現してみると…

吹き出し風

表示 ソース

４つの角にイメージを配置して、上下左右とこの位置は背景をイメージと同じ白色に設定しています。
左に吹き出し用の三角があります。（これがなければ通常の額縁です。）
単に角を丸く見せるための仕掛けですが、文章だけでなく、写真やイラストを飾ったりとなんにでも使えて便利です。


使用しているイメージ：

<table border="2">
で再現してみると…

<table border="0" cellpadding="0" cellspacing="0">
　 <tr>
　　 <td></td>
　　 <td><img src="image/wh1.gif" width="14" height="14" border="0"></td>
　　 <td bgcolor="#FFFFFF"></td>
　　 <td><img src="image/wh2.gif" width="14" height="14" border="0"></td>
　 </tr>
　 <tr>
　　 <td><img src="image/wh5.gif" width="14" height="14"></td>
　　 <td bgcolor="#FFFFFF"></td>
　　 <td bgcolor="#FFFFFF"><p>テキスト</p></td>
　　 <td bgcolor="#FFFFFF"></td>
　 </tr>
　 <tr>
　　 <td></td>
　　 <td><img src="image/wh4.gif" width="14" height="14" border="0"></td>
　　 <td bgcolor="#FFFFFF"></td>
　　 <td><img src="image/wh3.gif" width="14" height="14" border="0"></td>
　 </tr>
</table>

パーツと背景の色を合わせてる場合、テーブルの枠がつなぎ目として目立ったないようにするのがこつです。
ここではまず、<table>タグ内でborderで枠を消し、枠の幅と余白も消しています。あとは、四つ角のパーツと同じ配色を背景に設定します。
パーツとなるイメージもborder="0"でイメージの周囲にできる隙間をなくしておきましょう。
空の項目に&nbsp;を入れてしまうと、これが文字として高さを取ってしまうので、空にしてあります。
<table>だけで背景色を設定した場合、項目内に文字が入っていないと背景色が表示されません。そのときは、空白を入れるか、背景と同色の画像を置きます。どちらも高さに影響を与えるので、レイアウトを崩さないように注意が必要です。

表示 ソース

【あぶり出し】

４つの角にイメージを配置して、上下左右とこの位置は背景をイメージと同じ白色に設定しています。
ｌ 単に角を丸く見せるための仕掛けですが、文章だけでなく、写真やイラストを飾ったりとなんにでも使えて便利です。
<table border="0" cellpadding="0" cellspacing="0">
　 <tr>
　　 <td><img src="image/wh1.gif" width="14" height="14" border="0"></td>
　　 <td bgcolor="#FFFFFF"></td>
　　 <td><img src="image/wh2.gif" width="14" height="14" border="0"></td>
　 </tr>
　 <tr>
　　 <td bgcolor="#FFFFFF"></td>
　　 <td bgcolor="#FFFFFF"><p>【あぶり出し】</p><p><font color="#FFFFFF">ここがあぶり出しになります。</font></p></td>
　　 <td bgcolor="#FFFFFF"></td>
　 </tr>
　 <tr>
　　 <td><img src="image/wh4.gif" width="14" height="14" border="0"></td>
　　 <td bgcolor="#FFFFFF"></td>
　　 <td><img src="image/wh3.gif" width="14" height="14" border="0"></td>
　 </tr>
</table>

テキストの応用で、背景色と同じ文字色にすると目に見えないテキストを置くことができます。しかし、画面をマウスでなぞれば文字が浮かび上がってきます。

☆あぶり出しのやり方
枠内の左上でマウスの左ボタンを押したまま、右下へ向かってマウスを動かしてください。選択範囲が反転して文字が出てきます。
うまくできない場合は、キーボードのctrlキーを押しながら「A」のキーを押してください。全範囲指定になり、画面全部が反転します。

４つ角のある額縁

表示 ソース
<table border="0" cellpadding="0" cellspacing="0">
　 <tr>
　　 <td><img src="image/wh1.gif" width="14" height="14" border="0"></td>
　　 <td bgcolor="#FFFFFF"></td>
　　 <td><img src="image/wh2.gif" width="14" height="14" border="0"></td>
　 </tr>
　 <tr>
　　 <td bgcolor="#FFFFFF"></td>
　　 <td><img src="image/sakura.jpg" width="320" height="240" border="2"></td>
　　 <td bgcolor="#FFFFFF"></td>
　 </tr>
　 <tr>
　　 <td><img src="image/wh4.gif" width="14" height="14" border="0"></td>
　　 <td bgcolor="#FFFFFF"></td>
　　 <td><img src="image/wh3.gif" width="14" height="14" border="0"></td>
　 </tr>
</table>

画像を４つ角に配置して丸みを持たせた額縁ができました。

８方を囲う額縁

表示 ソース
<table border="0" cellpadding="0" cellspacing="0">
　 <tr>
　　 <td><img src="image/st01.gif" width="30" height="30" border="0"></td>
　　 <td background="image/st05.gif"></td>
　　 <td><img src="image/st02.gif" width="30" height="30" border="0"></td>
　 </tr>
　 <tr>
　　 <td background="image/st06.gif"></td>
　　 <td><img src="image/sakura.jpg" width="320" height="240" border="2"></td>
　　 <td background="image/st07.gif"></td>
　 </tr>
　 <tr>
　　 <td><img src="image/st03.gif" width="30" height="30" border="0"></td>
　　 <td background="image/st08.gif"></td>
　　 <td><img src="image/st04.gif" width="30" height="30" border="0"></td>
　 </tr>
</table>

４つの角には<img>タグで画像を配置、上下左右にはbackgroundで画像を配置します。
backgroundで配置した画像はタイル状になるため繋がって延びていきます。

<img>で配置してwidthやheightで引き延ばすこともできますが、画像が伸びるため、伸ばしてもデザインが損なわれない画像に限られていました。backgroundを使えばその制限がなくなります。ただし、４つ角の画像の大きさと合わせないと画像がずれて表示されますので注意が必要です。

画像で額縁ができることが判れば、あとは素材次第で色々なものに加工できます。
例えば、映画のフィルムの様にしたり、メモ帳や、ピン留めのメモ用紙みたいなものも作れます。
サイトやページのイメージに合った素材を探すのは大変ですが、楽しい作業になるでしょう。また、自分で作ってみるのも面白いものです。

日本地図

テーブルを使って日本地図を作ってみました。白地図として利用したり、リンク用のメニューにも利用できます。
色の設定に<style>タグを使って、一括で色の指定を行っています。地域毎に色を分ける場合は、スタイルの種類を増やして対応します。

表示
  北海道
 
 
  青森
  秋田 岩手
 
  山形 宮城
  石川  
  島根 鳥取 兵庫 京都 福井 富山 新潟 福島
  山口 岐阜 長野 群馬 栃木 茨城
長崎 佐賀 福岡   広島 岡山 大阪 奈良 滋賀 山梨 埼玉
  東京 千葉
  熊本 大分   和歌山 三重 愛知 静岡 神奈川  
  愛媛 香川    
鹿児島 宮崎   高知 徳島  
 
 
沖縄  
ソース
<style type="text/css"><!--
td.col {background-color:#339933;}
--></style>

<table border="0" cellspacing="2" cellpadding="5">
<tr align="center">
<td colspan="16">&nbsp;</td>
<td colspan="2" rowspan="2" class="col">北海道</td>
</tr>
<tr align="center">
<td colspan="16">&nbsp;</td>
</tr>
<tr align="center">
<td colspan="18">&nbsp;</td>
</tr>
<tr align="center">
<td colspan="16">&nbsp;</td>
<td colspan="2" class="col">青森</td>
</tr>
<tr align="center">
<td colspan="16">&nbsp;</td>
<td rowspan="2" class="col">秋田</td>
<td rowspan="2" class="col">岩手</td>
</tr>
<tr align="center">
<td colspan="16">&nbsp;</td>
</tr>
<tr align="center">
<td colspan="16">&nbsp;</td>
<td rowspan="2" class="col">山形</td>
<td rowspan="2" class="col">宮城</td>
</tr>
<tr align="center">
<td colspan="12">&nbsp;</td>
<td rowspan="2" class="col">石川</td>
<td colspan="3">&nbsp;</td>
</tr>
<tr align="center">
<td colspan="5">&nbsp;</td>
<td colspan="2" rowspan="2" class="col">島根</td>
<td rowspan="2" class="col">鳥取</td>
<td rowspan="4" class="col">兵庫</td>
<td colspan="2" rowspan="2" class="col">京都</td>
<td rowspan="2" class="col">福井</td>
<td class="col">富山</td>
<td colspan="2" class="col">新潟</td>
<td colspan="2" class="col">福島</td>
</tr>
<tr align="center">
<td colspan="4">&nbsp;</td>
<td rowspan="3" class="col">山口</td>
<td rowspan="3" class="col">岐阜</td>
<td rowspan="3" class="col">長野</td>
<td colspan="2" class="col">群馬</td>
<td rowspan="2" class="col">栃木</td>
<td rowspan="3" class="col">茨城</td>
</tr>
<tr align="center">
<td rowspan="2" class="col">長崎</td>
<td rowspan="2" class="col">佐賀</td>
<td rowspan="2" class="col">福岡</td>
<td>&nbsp;</td>
<td colspan="2" rowspan="2" class="col">広島</td>
<td rowspan="2" class="col">岡山</td>
<td rowspan="2" class="col">大阪</td>
<td rowspan="2" class="col">奈良</td>
<td rowspan="2" class="col">滋賀</td>
<td rowspan="2" class="col">山梨</td>
<td class="col">埼玉</td>
</tr>
<tr align="center">
<td>&nbsp;</td>
<td class="col">東京</td>
<td rowspan="3" class="col">千葉</td>
</tr>
<tr align="center">
<td rowspan="4">&nbsp;</td>
<td rowspan="2" class="col">熊本</td>
<td rowspan="2" class="col">大分</td>
<td colspan="6">&nbsp;</td>
<td colspan="2" rowspan="2" class="col">和歌山</td>
<td rowspan="2" class="col">三重</td>
<td class="col">愛知</td>
<td colspan="2" class="col">静岡</td>
<td class="col">神奈川</td>
<td rowspan="2">&nbsp;</td>
</tr>
<tr align="center">
<td>&nbsp;</td>
<td colspan="2" class="col">愛媛</td>
<td colspan="2" class="col">香川</td>
<td>&nbsp;</td>
<td colspan="4">&nbsp;</td>
</tr>
<tr align="center">
<td rowspan="2" class="col">鹿児島</td>
<td rowspan="2" class="col">宮崎</td>
<td>&nbsp;</td>
<td colspan="2" class="col">高知</td>
<td colspan="2" class="col">徳島</td>
<td colspan="10">&nbsp;</td>
</tr>
<tr align="center">
<td colspan="15">&nbsp;</td>
</tr>
<tr align="center">
<td colspan="18">&nbsp;</td>
</tr>
<tr align="center">
<td class="col">沖縄</td>
<td colspan="17">&nbsp;</td>
</tr>
</table>

もう１つコンパクト版もあります。

表示
  北海道
 
 

 

 

 青森
秋田 岩手
山形 宮城
  石川 富山 新潟 福島
長崎 佐賀 福岡   山口 島根 鳥取 兵庫 京都 福井 岐阜 長野 群馬 栃木 茨城
  熊本 大分 広島 岡山 大阪 奈良 滋賀 埼玉
鹿児島 宮崎   和歌山 三重 愛知 山梨 東京 千葉
  愛媛 香川   静岡 神奈川  
沖縄   高知 徳島  
ソース
<style type="text/css"><!--
td.col {background-color:#339933;}
--></style>

<table border="0" cellspacing="2" cellpadding="5">
<tr align="center">
<td colspan="14">&nbsp;</td>
<td colspan="2" rowspan="2" class="col">北海道</td>
</tr>
<tr align="center">
<td colspan="14">&nbsp;</td>
</tr>
<tr align="center">
<td colspan="16">&nbsp;</td>
</tr>
<tr align="center">
<td colspan="14" rowspan="3"><p>&nbsp;</p> <p>&nbsp;</p></td>
<td colspan="2" class="col">青森</td>
</tr>
<tr align="center">
<td class="col">秋田</td>
<td class="col">岩手</td>
</tr>
<tr align="center">
<td class="col">山形</td>
<td class="col">宮城</td>
</tr>
<tr align="center">
<td colspan="10">&nbsp;</td>
<td class="col">石川</td>
<td class="col">富山</td>
<td colspan="2" class="col">新潟</td>
<td colspan="2" class="col">福島</td>
</tr>
<tr align="center">
<td class="col">長崎</td>
<td class="col">佐賀</td>
<td class="col">福岡</td>
<td rowspan="2">&nbsp;</td>
<td rowspan="2" class="col">山口</td>
<td class="col">島根</td>
<td class="col">鳥取</td>
<td rowspan="2" class="col">兵庫</td>
<td colspan="2" class="col">京都</td>
<td class="col">福井</td>
<td rowspan="2" class="col">岐阜</td>
<td rowspan="2" class="col">長野</td>
<td class="col">群馬</td>
<td rowspan="2" class="col">栃木</td>
<td rowspan="2" class="col">茨城</td>
</tr>
<tr align="center">
<td rowspan="2">&nbsp;</td>
<td class="col">熊本</td>
<td class="col">大分</td>
<td class="col">広島</td>
<td class="col">岡山</td>
<td class="col">大阪</td>
<td class="col">奈良</td>
<td class="col">滋賀</td>
<td class="col">埼玉</td>
</tr>
<tr align="center">
<td class="col">鹿児島</td>
<td class="col">宮崎</td>
<td colspan="5">&nbsp;</td>
<td colspan="2" class="col">和歌山</td>
<td class="col">三重</td>
<td class="col">愛知</td>
<td class="col">山梨</td>
<td class="col">東京</td>
<td colspan="2" class="col">千葉</td>
</tr>
<tr align="center">
<td colspan="5">&nbsp;</td>
<td class="col">愛媛</td>
<td class="col">香川</td>
<td colspan="5">&nbsp;</td>
<td class="col">静岡</td>
<td class="col">神奈川</td>
<td colspan="2">&nbsp;</td>
</tr>
<tr align="center">
<td class="col">沖縄</td>
<td colspan="4">&nbsp;</td>
<td class="col">高知</td>
<td class="col">徳島</td>
<td colspan="9">&nbsp;</td>
</tr>
</table>

戻る