HOW TO MAKE IT?

1．構造の理解

テーブル・タグド・アートは、HTMLのテーブルタグ背景色指定の機能を使って絵を書いたり、画像を生成したりします。テーブルタグや、HTMLの色指定に関してはこちらご覧下さい。
具体的にはどうするか？このページの一番上の3×3マスのピンクから赤のグラデーションをつかったアイコンを例にとってみましょう。この3×3マスのアイコンをテーブルタグで記述するには、最もシンプルには以下のようにします。

当たり前ですが、3×3のセル（マス目）で表される画像やデザインは3×3＝9セル分の色指定が必要なわけです。それぞれのセルの色にしたがってBGCOLOR="#??????"といった色を指定していきます。従って、大きな画像を30×40で表そうとすると30×40＝1200セル分の色指定が必要なわけです。

2．HTML記述の方法

さて、だいたい構造は分かりましたね。次はこのHTMLファイルをどうやって書くかということです。上で示したような例の場合（セルの数が少ないとき）はエディターなどで自分で打ち込んで作ることはできますが、サンプルギャラリーにあるような大きな画像を1セル1セル記述していたのでは日が暮れてしまうどころか、夜が明けてしまいます。さてどうしたらよいでしょうか？

Macの場合

Windowsの場合

3．カッコよく見せるためのTips

●1×1ピクセルの透明GIFを使う。
さて、基本的なHTMLの構造は上で示しましたが、少し自分なりの画像をテーブル・タグド・アートで作ろうと思うとき、各セルの大きさや形が気になりだします。前述のやり方は、各セルに「　」（スペース）を入れましたが、これではひとつのセルが正方形になりません。しかも、
<TD BGCOLOR="#FF0000" WIDTH=10 HEIGHT=10>　</TD>
等としても、そこに入れている「　」（スペース）の文字の大きさ以下にはセルの大きさは、簡単には調節できません。そこで、この「　」（スペース）のかわりに1×1ピクセルの透明GIFを使うと、 WIDTH=○○ HEIGHT=△△オプションが効き、きれいなセルを作ることができます。各セルは
<TD BGCOLOR="#FF0000" WIDTH=10 HEIGHT=10>
<IMG SRC="d.gif"></TD>
と記述（d.gifは、1×1ピクセルの透明GIF）します。サンプルギャラリーのテーブル・タグド・アートは全てこの方法を用いています。
　　□1×1ピクセルの透明化されたGIF　→ダウンロード

●CELLPADDING=0 CELLSPACING=0を使う。
1×1ピクセルの透明GIFを使ってみたが、思うようにセルの大きさを調節できないという方、CELLPADDINGとCELLSPACINGのオプション指定をしてみましょう。CELLPADDINGはセルの中身(テキスト、図)とセルの罫線の間の幅(スペース)を指定します。CELLSPACINGはセルの周りを囲む罫線幅を指定します。これらの属性を両方=0にしておくと、どんなに小さな幅、高さを指定しても思ったとおり調節できます。記述はテーブル・タグド・アートの最初に来るテーブルタグに
<TABLE border CELLPADDING=0 CELLSPACING=0>
としておくだけでOKです。

●枠の有無を試してみる。
自分でテーブル・タグド・アートを作りだすと、罫線があるほうがカッコいい場合と、罫線がないほうがカッコいい場合が出てきます。サンプルギャラリーでは罫線がある場合とない場合を両方用意してみましたが、皆さんが自分でテーブル・タグド・アートを作るときは罫線の有り無しを試してみてください。
<TABLE border CELLPADDING=0 CELLSPACING=0>
とすれば、罫線のあるテーブル・タグド・アート、
<TABLE border=0 CELLPADDING=0 CELLSPACING=0>
とすれば、罫線のないテーブル・タグド・アートになります。

●形状透明化GIFを使う。
ただテーブル・タグド・アートを作っていると、ふと「ただのモザイクじゃねーか」という疑問に襲われます。しかしご安心ください。各セル毎に色を出したい形状を透明化し、出したくない部分は背景色と同じにしたGIFを使うことでその悩みは解決されます。例えば各セルを立体的な球状に表したい場合には、このようなGIFをつかって、こんなに立体的なテーブル・タグド・アートを作ることができます。色々な形状の透明化GIFを自作してみましょう。