■ TABLE タグ使用上の注意
TABLE タグはHTML 3.0 の機能です。最近では少なくなったとはいえ、まだこのタグを認識できないブラウザーがあることは覚えておいてください（Netscape では1.x から利用できます）。TABLE タグを認識しないブラウザーでTABLE タグを使ったページを表示する

連載と、情報が欠けることはありませんが、想定した見え方とはかなり違った、乱れたレイア
ウトになります。 できれば同 じページをTABLE タグを使ったものと、使わないもので2 種類作っておいて見る人に選択させるのがいちばん親切です。

■ TABLE タグの基本
TABLE タグで作る1 つの表は、<TABLE>で始まり、</TABLE> で終わります。
表の中の内容は、行、そしてその中の1 つ1 つの項目（表計算ソフトで言う「セル」）を指定することで表します。
個々の行は < T R > 〜 < / T R > で、セルは<TD> 〜 </TD> で指定します。たとえば横2 ×縦 3 の単純な表は、次のように表します。

<TABLE><TR><TD> セル1</TD><TD> セル2</TD> </TR><TR><TD> セル3</TD><TD> セル4</TD> </TR><TR><TD> セル5</TD><TD> セル6</TD> </TR></TABLE>

川添 歩 （かわぞえあゆむ）
アクセス株式会社

http://www.axes.co.jp/

第7回
TABLEタグで表を作る
TABLE タグは、その名のとおり表を作るためのタグですが、最近では美しいレイアウトを実現するために使うことも多いようです。いくつかの列を作って段組みをしているように見せられるほか、Netscape 2.x になるまでサポートされていなかった文字列の右寄せが表の中ではできるという点がその理由でしょう。

326 INTERNET magazine 1996/8

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

これをブラウザーで表示すると図 1 のように<TABLE>なります。これはもちろん<TR> <TD> 川の名称 </TD> <TD> 川の長さ</TD> </TR><TR> <TD> 信濃川 </TD> <TD>367km</TD> </TR><TR> <TD> 利根川 </TD> <TD>322km</TD> </TR><TABLE><TR><TD> セル1</TD><TD> セル2<TR> <TD> 石狩川 </TD> <TD>268km</TD> </TR></TD></TR> …… <TD> セル6</TD></TABLE></TR></TABLE>
図 1 ：作成した表をブラウザーで表示した例のように続けて書いても表示結果は同じなの<TABLE BORDER>

でかまわないのですが、行やセルの構成が分<TR> <TD> 川の名称 </TD> <TD> 川の長さ</TD> </TR>

かりにくくなってしまうので、できるだけ分割<TR> <TD> 信濃川 </TD> <TD>367km</TD> </TR><TR> <TD> 利根川 </TD> <TD>322km</TD> </TR>

して、また段下げをして書いたほうが、修正<TR> <TD> 石狩川 </TD> <TD>268km</TD> </TR>

するときなどに見やすくなります。

</TABLE>

私は、より複雑な表では、
図 2 ： TABLE タグにBORDER オプションを追加して表示したところ（Netscape 2.0 を使用）

<TABLE><TABLE BORDER=5><TABLE BORDER CELLSPACING=10><TR><TD> セル1</TD><TD> セル2</TD></TR>……
</TABLE>のようにセルごとに改行して書くこともあります。

■表の枠を指定する<TABLE BORDER CELLPADDING=10>

図1では枠の線がないためにあまり表らしくありません。枠の線を表示させるには、BORDER

図 3 ： TABLE タグの各種オプションと表示の例
BORDER、CELLSPACING、CELLPADDING で表の枠の属性を指定できるオプションを使って、<TABLE BORDER> 〜</TABLE> のようにします（図 2）。枠の線幅を太くする、すなわちセル間を広げるには、の太さをここで指定することもできます。

CELLSPACING というオプションを使って<TABLE> …枠なし

<TABLE BORDER CELLSPACING=10>■表とセルのサイズ
表全体や個々のセルの幅は、特に指定をしなければ、中に入る文字列の長さによって自動調整して作られますが、これを直接指定することもできます。

<TABLE BORDER> または指定するには、<TABLE> または<TD> ののように指定します。

<TABLE BORDER=1> … 1ピクセルの枠つき

さらに、枠と中の文字列との間をあけるに<TABLE BORDER=3> … 3ピクセルの枠つき

は、CELLPADDING というオプションで、<TABLE BORDER CELLPADDING=10>を1 としたときのパーセンテージで表すこともできます。

サイズを変えると、立体的に表現されている枠の浮き彫りの高さが変わります。枠部分のWIDTH の単位はピクセルですが、数字のあとに「%」をつけて、ブラウザーのウインドウ幅枠の形は、ブラウザーによって多少異なります。Netscape の場合には、BORDER のオプションとして、 W I D T H を使 います。のように指定します（図 3）。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1996/8327

■セル内の文字列の位置<TABLE WIDTH=200> …幅 200 ピクセルの表<TABLE WIDTH=60%> …ウインドウの幅の60%の表<TD WIDTH=60> …幅 60ピクセルのセル■複数行、列にまたがるセル

セル内での文字列は、特に指定しなければ

図 5 のように、複数の行や列にまたがった

左寄せで天地中央に配置されます。それを変セルを作りたい場合があります。このような更するには、ALIGN オプションで水平位置

セルは、またがる分の行や列の数を数えて、なお、日本語に対応していないブラウザーを、VALIGN で垂直位置を指定します。これ

それをROWSPAN あるいはCOLSPAN で指で日本語の表を表示する場合、文字列の長らは、<TABLE>、<TR>、<TD> のいずれの定します。

さによるセル幅の自動調整や、WIDTH の指タグにもオプションとして使用することができ注意しなければならないのは、ROWSPAN定がうまくいかない場合があります。

ます。<TABLE> のオプションなら表全体に、やCOLSPAN で作られる大きなセルによって、そのようなブラウザーで思ったように表示さ<TR> なら行全体にその指定を適用すること

いわば覆 われることになる部 分 のセルは、せるには、英数文字のみか、またはグラフィになります。図 4 のHTML とその表示結果を<TD> で作成してはいけないという点です。

ックをセルに入れた行を作って調整するしか見ていただければ、これらのオプションの効果

たとえば図 6 のような表の左部分を1 つの枠ないでしょう。

が分かると思います。にして図7 のようにしたい場合、図6 のHTML<TABLE BORDER><TABLE BORDER>

<TR>

<TR>
<TD></TD><TD></TD><TH> ・・左・・ </TH><TD ROWSPAN=2></TD><TD COLSPAN=2> 性別 </TD><TH> ・・中央・・ </TH></TR><TH> ・・右・・ </TH>

<TR>

</TR>

<TD></TD><TR VALIGN=TOP><TD> 男 </TD><TH> 上 <BR> ・ </TH><TABLE BORDER><TR><TD> 女 </TD><TD> 上左 </TD><TD ALIGN=CENTER> 上中央 </TD></TR><TD ALIGN=RIGHT> 上右 </TD><TR></TR><TD ROWSPAN=2> 年齢 </TD><TR VALIGN=CENTER><TD>20 才未満 </TD><TH> 中央 <BR> ・ </TH><TD> 太郎 </TD><TD> 中央左 </TD><TD> 花子 </TD><TD ALIGN=CENTER> まん真ん中 </TD></TR><TD ALIGN=RIGHT> 中央右 </TD>

<TR>

</TR>

<TD>20 才以上 </TD><TR VALIGN=BOTTOM><TD> 次郎 </TD><TD> ブラウザ</TD>←オプション追加<TD>Netscape</TD>
</TR>
<TR>
<TD></TD>←削除<TD>Mosaic</TD></TR></TABLE><TD> 京子 </TD><TH> 下 <BR> ・ </TH></TR><TD> 下左 </TD></TABLE><TD ALIGN=CENTER> 下中央 </TD><TD ALIGN=RIGHT> 下右 </TD></TR></TABLE>

図 6（上）
・7（下）：セルを結合するときの指定
ROWSPAN やCOLSPAN で結合される空欄のセルは削除しておかなければならない。

図 4 ：セル内の文字の位置揃え
ALIGN オプションで文字の位置を左右、中央、上下に指定できる。

328 INTERNET magazine 1996/8

図 5 ：複数の行と列を 1 つのセルにする
行の結合はROWSPAN を、列の結合はCOLSPAN を
TABLE タグのオプションとして指定する。

図 8 ：余分なセルを削除しなかった場合表のレイアウトが崩れてしまうので注意。
（NetscapeNavigator 2.0 の例）

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

の3 行目にROWSPAN オプション（<TD■ <TH >と<CAPTION >■グラフィックを中に入れる

ROWSPAN=2>）を加えるだけでなく、7 行<TD> の代わりに<TH> を使うと、そのセセルの中には文字列だけでなく、グラフィッ目を削除する必要があります。もしこれを削ルは見出しとして認識され、太字になって左クも入れられます。文字列の代わりに<IMG>除しないと、図8 のように、ROWSPAN で作右中央に配置されます。それ以外は、使用でタグで画像を指定するだけです。

られたセルに押されるようにしてセルがずれ、きるオプションなども<TD> と同じです。

余計な列を作ってしまうことになります。

<IMG> タグではできるだけサイズを指定＊<CAPTION>は表のタイトルやキャプションするようにと繰り返し述べてきましたが、特たいていの場合、まずROWSPAN やCOLを指定するタグです。このタグのオプションにに表の中の画像には必ず指定するようにしてSPAN を使わないで表を作ってみてから、セルはALIGNとしてTOP/BOTTOMがあり、たとえください。ブラウザーが複数の画像の入ったをまとめていく作業をすることになるでしょう。

ば表を表示する場合、それらすべての画像のサ

前述のように行を分けたり段下げしたりして<CAPTION ALIGN=TOP> 表 1 </CAPTION>

おけば、余分なセルを削除する作業でも間違いを少なくすることができます。

イズを認識してから表を作成するため、サイズ指定がないと表示するまで余計に時間がかと書けば、表の上に「表 1」と表示されます。

かってしまうからです。
＊：<IMG> タグのオプションWIDTH とHEIGHT を使用する

インターネット上に安らぐ魂
以前から作ることを考えながら、なかなかそのこともまた、私たちにいくらかの安心感を与える。完全に失われることへの強い恐れ作れないでいるページがある。

が私たちの心の中にある。

墓地のページだ。

かけて行うべきことだと思う。
いつもそばに置いておきたい記憶もあれば、春と秋にだけ訪れたい記憶もある。自分のホ墓地というものは、生から離れた人を埋葬

世界中の人が見ることのできるデジタルネームページの中に作っておいて、1 日一度はし、安らかに眠ってもらうための場所だ。だットワークという石の上に、かつてこの時代、手を合わせるのもよい。海外の墓地のサイトが、実際には生きている者の心を安らかにす

この場所に確かに存在したのだという証拠をに登録して、ときどきそこを訪れるのでもよい。とても大切な人のためならば、特別にどることこそが、墓地の役割である。

こかふさわしい墓所を借りてあげるのもよい

親しい者を失ったことを現実のものとしてかもしれない。

目の前で確認し、その者の生きていた時間を思い起こす。そして、その者とともに生きてたくさんの人とともに思い出したい記憶もいた自らの時間を思うための場所なのだ。

あれば、ひっそりと思い出したい記憶もある。

分からないことだらけの人生の中で、唯一、たくさんの人に愛された記憶は、たくさんの人はっきりと分かっている未来の事実。どのよのホームページの片隅が、互いにリンクしてうな立場の人にも平等に訪れる。すでに期限

1 つの墓を形成するかもしれない。訪れてくを迎えてしまった人たちの記憶が、私たちのれた人に記帳をしてもらったり、思い出話を時間が有限であることを教えてくれる。その語ってもらったりする場所があってもいい。
逆に、世界に開かれている場所だからといっ記憶が、私たちの生を支える。
石に文字を刻んで墓とするのは、短い人のて、すべてを公開する必要はない。自分だけで生を少しでも長く記憶として残し、その生の対したい記憶もある。どこからもリンクをはることのないページとして作り、1 人で会いたく意味を考え、糧とするためだ。それが今ここ刻みつけることができれば、いなくなってしまなったときにだけ、URL に含まれるその人の名墓石が人生を記憶する媒体だとすれば、ハった人たちにとっても、まだ残っている私たをタイプして、ひっそりと訪れてもいいのだ。

ードディスクもまた、それを記憶する媒体にちにとっても大きな安らぎを与えてくれるもなりえるだろう。誰でも訪れることのできるのに違いない。にある生を真摯に見つめることになる。

どのような方法でもよい。自分が納得のいく訪れ方ができ、そのときの気持ちにふさわ

ハードディスク−インターネットは、墓地と誰の心の中にも、おりにふれて浮かんでくしい内容が収まっている。そういう場所を作しての役目を十分発揮してくれるだろう。

る面影があるだろう。私たちが持っているそることは意味のあることだと思う。そしてそ自らの命が失われてからも、他の人の記憶の人々の記憶をデジタルに定着させる作業は、の作業をするという行為自体にもまた、大切の中で生き続けることを墓が約束してくれる。

気軽にするものではない。じっくり、時間をなものが含まれているのではないかと思う。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

INTERNET magazine 1996/8329

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.