なお、<DL>タグにはCOMPACT属性をつけることもできる。これはNetscape Navigatorでのみ実現される機能で、見出し語と内容の行を行替えなしで同一行に表示するよう、定義リストをより小さく作成する機能。
ただし、見出し語の文字列の長さがインデント部より長い場合は、行替えされてしまう。タグでは次のように指定する。
<DL COMPACT>
<DT>見出し語
<DD>内容
<DT>見出し語
<DD>内容
.
.
.
</DL>
◆UL……リスト表示(番号なし)
【書式】<UL><LI>〜<LI>〜</UL>
<UL TYPE="disc/circle/square"><LI>〜<LI>〜</UL>
<UL><LI TYPE="disc/circle/square"><LI>〜<LI>〜</UL>
【機能】行頭に記号をつけたリストの作成。
|
【解説】前項のDLタグと同じく、箇条書きなどのリストを作成するときに利用できるタグ。ただしULタグの場合、行頭に記号をつけた箇条書きになる。
たとえば、本の目次のようなものを考えるとわかりやすい。次のような章だてになっていたとしよう。
第1章
第1項
第1節
第2節
第3節
第2項
第1節
第2節
第2章
第1項
第1節
第2節
第2項
第1節
第2節
こんな具合になっている場合、各章、項、節をULタグで囲んでやるといい。ULタグは入れ子(ネスティング)にできるため、上記の1段下がっている部分をそれぞれ<UL>〜</UL>で囲んでやるわけだ。さらに各章、項、節の部分は先頭にLIタグをつける。つまり次のようになる。
<UL>
<LI>第1章
<UL>
<LI>第1項
<UL>
<LI>第1節
<LI>第2節
<LI>第3節
</UL>
<LI>第2項
<UL>
<LI>第1節
<LI>第2節
</UL>
</UL>
<LI>第2章
<UL>
<LI>第1項
<UL>
<LI>第1節
<LI>第2節
</UL>
<LI>第2項
<UL>
<LI>第1節
<LI>第2節
</UL>
</UL>
</UL>
リストの各先頭に記号がついている。これはブラウザが付加している記号だが、アトリビュートの指定によっては、この記号を別のものに設定することができる。それがUL TYPEの設定だ。
設定できるのは、次の3種のうちのいずれか1つである。
disc : 行頭記号を●に設定する
circle : 行頭記号を□に設定する
square : 行頭記号を■に設定する
たとえば、前ページのソース文を次のように変更すると、ブラウザでどう表示させるか確認してほしい。
<UL type="disk">
<LI>第1章
<UL type="circle">
<LI>第1項
<UL type="square">
<LI>第1節
<LI>第2節
<LI>第3節
</UL>
<LI>第2項
(以下同じ)
ただし、上記の画面はNetscape Navigator2.0Jで表示させたときの画面だ。Netscape Navigator3.0β(英語版)で表示させたときは、正常に表示されなかった。また、Internet Explorer2.0でもこの設定は無視され、表示に変化はなかった。ブラウザによって異なるので、注意していただきたい。
ULのタイプだけでなく、LIのタイプを設定することもできる。こちらもやはりdisc、circle、squareの3つのうちのいずれかを設定することができる。書式は、次のようになる。
<UL><LI TYPE="disc">
やはり前ページのソースを変更してみよう。LIのタイプをすべてcircleに設定すると、ブラウザではどのようになるか確認するといい。
なお、ここでもULのとき同様、TYPE属性が正常に表示されたのは、Netscape Navigator2.0だけで、Netscape Navigator3.0β(英語版)およびInternet Explorer2.0では正常に表示されなかった。
◆OL……番号付きリスト表示
【書式】<OL><LI>〜</OL>
<OL TYPE="1/A/a/I/i" START=n><LI>〜</OL>
<OL><LI TYPE="1/A/a/I/i" VALUE="n">〜</OL>
【機能】行頭に番号を付加したリスト表示。
|
【解説】行頭にインデントを付けた箇条書きのリスト表示で、行頭に連番をつけるタグ。ULタグと同じく、<OL>と</OL>で囲まれた部分をリスト表示にし、各リスト項目は<LI>で指定する。
たとえば、次のようなソースの場合、ブラウザでは画面59のような表示になる。
<OL>
<LI>リスト項目1
<LI>リスト項目2
<LI>リスト項目3
<LI>リスト項目4
<LI>リスト項目5
</OL>
上記の例は、もっとも簡単な例だが、OLタグは<OL>〜</OL>のなかにさらに<OL>〜</OL>の部分を入れ子にすることができる。つまり、たとえば前項のULタグのときのソースをOLタグに変更すると、次のようになる。
<OL>
<LI>第1章
<OL>
<LI>第1項
<OL>
<LI>第1節
<LI>第2節
<LI>第3節
</OL>
<LI>第2項
<OL>
<LI>第1節
<LI>第2節
</OL>
</OL>
<LI>第2章
<OL>
<LI>第1項
<OL>
<LI>第1節
<LI>第2節
</OL>
<LI>第2項
<OL>
<LI>第1節
<LI>第2節
</OL>
</OL>
</OL>
上の画面を前のものと比較してみると、ULタグとOLタグの違いがよくわかるだろう。
OLタグには、TYPEとSTARTの2つのアトリビュートを設定することができる。
まずTYPEだが、これはラベル形式を設定するもの。設定できるのは次の5種のいずれかだ。
1 : ラベルに算用数字を設定
A : ラベルにアルファベット大文字を設定
a : ラベルにアルファベット小文字を設定
I : ラベルに大文字ローマ数字を設定
i : ラベルに小文字ローマ数字を設定
ただし、ラベル形式を設定しない場合は、「1」を設定したときと同じ算用数字が使用される。
ラベル形式は、たとえば次のように設定する。
【ソース例】
<OL TYPE="1">
<LI>第1章
<OL TYPE="A">
<LI>第1項
<OL TYPE="I">
<LI>第1節
<LI>第2節
<LI>第3節
</OL>
<LI>第2項
<OL TYPE="I">
<LI>第1節
<LI></OL>
</OL>
<LI> 第2章
<OL TYPE="a">
<LI>第1項
<OL TYPE="i">
<LI>第1節
<LI>第2節
</OL>
<LI>第2項
<OL TYPE="i">
<LI>第1節
<LI>第2節
</OL>
</OL>
</OL>
|
STARTアトリビュートは、開始番号を設定するもの。たとえば、ラベルに算用数字を設定している場合、とくに指定しないかぎり最初に出現するLIラベルの項目には1が、次のLIラベルの項目には2が、といった具合に数字は1から始まる。
この数字を、別のものからスタートさせたいときもあるだろう。ページが長くなるために分割した場合なら、ページによっては数値を別のものからスタートさせたいはず。そんなときSTARTアトリビュートを指定すればいい。
やはり前ページのソース例を使って、どう表示されるか実験してみよう。
【ソース例】
<OL START="1">
<LI>第1章
<OL START="10">
<LI>第1項
<OL START="100">
<LI>第1節
<LI>第2節
<LI>第3節
</OL>
<LI>第2項
<OL START="100">
<LI>第1節
<LI>第2節
</OL>
</OL>
<LI>第2章
<OL START="10">
<LI><OL START="100">
<LI> 第1節
<LI>第2節
</OL>
<LI>第2項
<OL START="100">
<LI>第1節
<LI>第2節
</OL>
</OL>
</OL>
|
TYPEアトリビュートとSTARTアトリビュートは、併記することもできる。
<OL TYPE="1" START="1">
<LI>第1章
<OL TYPE="A" START="10">
<LI>第1項
<OL TYPE="I" START="100">
<LI>第1節
<LI>第2節
<LI>第3節
</OL>
<LI>第2項
<OL TYPE="I" START="100">
<LI>第1節
<LI>第2節
</OL>
</OL>
<LI>第2章
<OL TYPE="a" START="10">
<LI>第1項
<OL TYPE="i" START="100">
<LI>第1節
<LI>第2節
</OL>
<LI>第2項
<OL TYPE="i" SRART="100">
<LI>第1節
<LI>第2節
</OL>
</OL>
</OL>
OLタグでは、各リストとなる項目の先頭に付けるLIタグに、アトリビュートを指定することもできる。LIタグに付けるアトリビュートには、次の2種類ある。
TYPE : ラベル形式の設定
VALUE : 番号の指定
これはOLのときと同じだ。TYPEでは1、A、a、I、iのいずれかを指定できた。またOLタグの場合はSTARTアトリビュートだったが、これに対応するのがVALUEアトリビュート。こちらは任意の整数を指定する。
やはりこちらも、TYPEとVALUEを併記することができる。書式は次のように記述すればいい。
<OL><LI TYPE="1/A/a/I/i" VALUE="n">〜</OL>
【ソース例】
<OL>
<LI TYPE="1" VALUE="1">第1章
<OL>
<LI TYPE="A" VALUE="10">第1項
<OL>
<LI TYPE="I" VALUE="100">第1節
<LI>第2節
<LI>第3節
</OL>
<LI>第2項
<OL>
<LI TYPE="I" VALUE="100">第1節
<LI>第2節
</OL>
</OL>
<LI>第2章
<OL>
<LI TYPE="a" VALUE="10">第1項
<OL>
<LI TYPE="i" VALUE="100">第1節
<LI>第2節
</OL>
<LI>第2項
<OL>
<LI TYPE="i" SRART="100">第1節
<LI>第2節
</OL>
</OL>
</OL>
|
◆DIR……ディレクトリリスト
【書式】<DIR><LI>〜</DIR>
【機能】ディレクトリリストを作成するものだが、<UL>タグで代用される。
|
【解説】HTML2.0以前のタグで、HTML3.0ではなくなっているもの。<UL>タグに置き変わるもので、行頭に記号をつけた箇条書きリストを作成するタグ。
【ソース例】
<DIR>
<LI>第1章
<DIR>
<LI>第1項
<DIR>
<LI>第1節
<LI><LI> 第3節
</DIR>
<LI>第2項
<DIR>
<LI>第1節
<LI>第2節
</DIR>
</DIR>
<LI>第2章
<DIR>
<LI>第1項
<DIR>
<LI>第1節
<LI>第2節
</DIR>
<LI>第2項
<DIR>
<LI>第1節
<LI>第2節
</DIR>
</DIR>
</DIR>
|
◆MENU……メニューリスト
【書式】<MENU><LI>〜</MENU>
【機能】メニューリストを作成するものだが、<UL>タグで代用される。
|
【解説】HTML2.0以前のタグで、HTML3.0ではなくなっているもの。<UL>タグに置き変わるもので、行頭に記号をつけた箇条書きリストを作成するタグ。
【ソース例】
<MENU>
<LI>第1章
<MENU>
<LI>第1項
<MENU>
<LI>第1節
<LI>第2節
<LI>第3節
</MENU>
<LI>第2項
<MENU>
<LI>第1節
<LI>第2節
</MENU>
</MENU>
<LI>第2章
<MENU>
<LI>第1項
<MENU>
<LI>第1節
<LI>第2節
</MENU>
<LI>第2項
<MENU>
<LI>第1節
<LI>第2節
</MENU>
</MENU>
</MENU>
|
◆LH……リストタイトル
【解説】ULやOLタグを利用してリストを作成する場合、そのリストのタイトルとなるものをLHタグをつけて記述しておく。
リストのタイトルとはいっても、タイトルのように表示されるだけで、特別な表示となるわけではない。HTML文書内で便宜上利用すればいいだろう。
【ソース例】
<LH>目次
<OL>
<LI>第1章
<OL>
<LI>第1項
<OL>
<LI>第1節
<LI>第2節
<LI>第3節
</OL>
<LI>第2項
<OL>
<LI>第1節
<LI>第2節
</OL>
</OL>
<LI>第2章
<OL>
<LI>第1項
<OL>
<LI>第1節
<LI>第2節
</OL>
<LI>第2項
<OL>
<LI><LI> 第2節
</OL>
</OL>
</OL>
|
◆TABLE……表組み
【書式】<TABLE>〜</TABLE>
<TABLE BORDER=n CELLPADDING=n CELLSPACING=n WIDTH=n HEIGHT=n
ALIGN="right/left">〜</TABLE>
【機能】表組みとして定義する。
|
【解説】表組みを作成するときに利用するタグ。<TABLE>と</TABLE>ではさまれた部分を、表組みとして定義する。
ただし、具体的に表組みを作成するためには、この<TABLE>タグにつづいて<TD>や<TH>、<TD>の各タグなどを利用する必要がある。<TABLE>タグは表組みの定義のみで、それだけでは実際の表を作成することはできない。
TABLEタグには、いくつかのアトリビュートを設定できる。設定できるアトリビュートとその意味、さらに具体的な表示例は、次のようになる。
なお、基本的な表組みのソース例とその表示例を、以下にあげておく。アトリビュートの指定で、これがどのように変化するか、各画面を参照して違いを確認するといい。
【基本表のソース例】
<TABLE>
<TR><TD>第1行第1列</TD><TD>第1行第2列</TD>
<TD>第1行第3列</TD></TR>
<TR><TD>第2行第1列</TD><TD>第2行第2列</TD>
<TD>第2行第3列</TD></TR>
<TR><TD>第3行第1列</TD><TD>第3行第2列</TD>
<TD>第3行第3列</TD></TR>
</TABLE>
|
・BORDER=n
表組みの枠線の設定。BORDERアトリビュートを記述すると、立体的な枠線(ボーダー)が表示される。nには枠線の幅を記述。nを省略した場合は、n=1が設定されたものとみなされる。
【BORDER指定のソース例】
<TABLE BORDER=3>
<TR><TD>第1行第1列</TD><TD>第1行第2列</TD>
<TD>第1行第3列</TD></TR>
<TR><TD>第2行第1列</TD><TD>第2行第2列</TD>
<TD>第2行第3列</TD></TR>
<TR><TD>第3行第1列</TD><TD>第3行第2列</TD>
<TD>第3行第3列</TD></TR>
</TABLE>
|
・CELLPADDING=n
表組みの各枠内を“セル”とよぶが、このセルに記入されている文字列と枠線との間隔を設定するアトリビュート。nにはセル内容と枠線との間隔をピクセル単位で記述する。
たとえば、次のソース例のように、CELLPADDINGの値を変えてみてその表示を比較してみていただきたい。
【CELLPADDING指定のソース例】
<TABLE BORDER=3 CELLPADDING=3>
<TR><TD>第1行第1列</TD><TD>第1行第2列</TD>
<TD>第1行第3列</TD></TR>
<TR><TD>第2行第1列</TD><TD>第2行第2列</TD>
<TD>第2行第3列</TD></TR>
<TR><TD>第3行第1列</TD><TD>第3行第2列</TD>
<TD>第3行第3列</TD></TR>
</TABLE>
<P>
<TABLE BORDER=3 CELLPADDING=20>
<TR><TD>第1行第1列</TD><TD>第1行第2列</TD>
<TD>第1行第3列</TD></TR>
<TR><TD>第2行第1列</TD><TD>第2行第2列</TD>
<TD>第2行第3列</TD></TR>
<TR><TD>第3行第1列</TD><TD>第3行第2列</TD>
<TD>第3行第3列</TD></TR>
</TABLE>
|
・CELLSPACING=n
セルとセルとの間隔を設定するアトリビュート。nにはセル間の間隔をピクセル単位で記述する。nを省略した場合は、CELLSPACING=2が設定されているものとみなされる。
やはりCELLSPACINGの値を変えたソースを作成し、その表示の違いをみてみよう。
【CELLSPACING指定のソース例】
<TABLE BORDER=3 CELLSPACING>
<TR><TD>第1行第1列</TD><TD>第1行第2列</TD>
<TD>第1行第3列</TD></TR>
<TR><TD>第2行第1列</TD><TD>第2行第2列</TD>
<TD>第2行第3列</TD></TR>
<TR><TD>第3行第1列</TD><TD>第3行第2列</TD>
<TD>第3行第3列</TD></TR>
</TABLE>
<P>
<TABLE BORDER=3 CELLSPACING=20>
<TR><TD>第1行第1列</TD><TD>第1行第2列</TD>
<TD>第1行第3列</TD></TR>
<TR><TD>第2行第1列</TD><TD>第2行第2列</TD>
<TD>第2行第3列</TD></TR>
<TR><TD>第3行第1列</TD><TD>第3行第2列</TD>
<TD>第3行第3列</TD></TR>
</TABLE>
|
・WIDTH=n
表組み全体の横幅の設定。BORDERアトリビュートを記述した場合、表組みには外枠が表示されるが、この外枠の左端から右端までの幅をWIDTHアトリビュートで指定することもできる。
WIDTHにはnを指定するが、このnにはピクセル単位で絶対値を設定する方法と、開かれているブラウザ画面に対する割合(パーセンテージ)を指定する方法とがある。例では、両方の方法で指定してみた。
【WIDTH指定のソース例】
<TABLE BORDER=3 WIDTH=300>
<TR><TD>第1行第1列</TD><TD>第1行第2列</TD>
<TD>第1行第3列</TD></TR>
<TR><TD>第2行第1列</TD><TD>第2行第2列</TD>
<TD>第2行第3列</TD></TR>
<TR><TD>第3行第1列</TD><TD>第3行第2列</TD>
<TD>第3行第3列</TD></TR>
</TABLE>
<P>
<TABLE BORDER=3 WIDTH=60%>
<TR><TD>第1行第1列</TD><TD>第1行第2列</TD>
<TD>第1行第3列</TD></TR>
<TR><TD>第2行第1列</TD><TD>第2行第2列</TD>
<TD>第2行第3列</TD></TR>
<TR><TD>第3行第1列</TD><TD>第3行第2列</TD>
<TD>第3行第3列</TD></TR>
</TABLE>
|
・HEIGHT=n
表組み全体の高さの設定。BORDERアトリビュートを記述した場合、表組みには外枠が表示されるが、この外枠の上端から下端までの高さをHEIGHTアトリビュートで指定できる。
HEIGTHの場合も、WIDTHと同じようにピクセル単位で高さの絶対値を設定する方法と、開かれているブラウザの画面に対する割合(バーセンテージ)を指定する方法とがある。また、WIDTHとHEIGHTとを併記することもできる。
【HEIGHT指定のソース例】
<TABLE BORDER=3 HEIGHT=100>
<TR><TD>第1行第1列</TD><TD>第1行第2列</TD>
<TD>第1行第3列</TD></TR>
<TR><TD>第2行第1列</TD><TD>第2行第2列</TD>
<TD>第2行第3列</TD></TR>
<TR><TD>第3行第1列</TD><TD>第3行第2列</TD>
<TD>第3行第3列</TD></TR>
</TABLE>
<P>
<TABLE BORDER=3 HEIGHT=30%>
<TR><TD>第1行第1列</TD><TD>第1行第2列</TD>
<TD>第1行第3列</TD></TR>
<TR><TD>第2行第1列</TD><TD>第2行第2列</TD>
<TD>第2行第3列</TD></TR>
<TR><TD>第3行第1列</TD><TD>第3行第2列</TD>
<TD>第3行第3列</TD></TR>
</TABLE>
|
・ALIGN="right/left"
ホームページで表組みと文字列とが混在する場合、この文字列を表組みに対して回り込ませることができる。これがTABLEタグのALIGNアトリビュートだ。
ALIGNには、表の右側に文字列を回り込ませるright、表の左側に回り込ませるleftのいずれかを指定する。
【ALIGN指定のソース例】
ホームページで表組みを作成するときに、TABLEタグを利用する。TABLE
と/TABLEではさまれた部分を、表組みとして定義する。<BR>
ただし、具体的に表組みを作成するためには、このTABLEタグにつづいて
TDやTH、TDの各タグなどを利用する必要がある。<BR>
<TABLE BORDER=3 ALIGN="right">
<TR><TD>第1行第1列</TD><TD>第1行第2列</TD>
<TD>第1行第3列</TD></TR>
<TR><TD>第2行第1列</TD><TD>第2行第2列</TD>
<TD>第2行第3列</TD></TR>
<TR><TD>第3行第1列</TD><TD>第3行第2列</TD>
<TD>第3行第3列</TD></TR>
</TABLE>
TABLEタグは表組みの定義のみで、それだけでは実際の表を作成すること
はできない。<BR>
TABLEタグには、いくつかのアトリビュートを設定できる。設定できるア
トリビュートとその意味、さらに具体的な表示例は、次のようになる。
<BR>
<TABLE BORDER=3 ALIGN="left">
<TR><TD>第1行第1列</TD><TD>第1行第2列</TD>
<TD>第1行第3列</TD></TR>
<TR><TD>第2行第1列</TD><TD>第2行第2列</TD>
<TD>第2行第3列</TD></TR>
<TR><TD>第3行第1列</TD><TD>第3行第2列</TD>
<TD>第3行第3列</TD></TR>
</TABLE>
なお、基本的な表組みのソース例とその表示例を、以下にあげておく。ア
トリビュートの指定で、これがどのように変化するか、各画面を参照して
違いを確認するといい。<BR>
|
◆TR……表組みの行要素の定義
【書式】<TR ALIGN="right/center/left"
VALIGN="top/middle/bottom/baseline">〜</TR>
【機能】表組みの行となる文字列やインラインイメージなどを定義する。
|
【解説】TABLEタグによって表組みを作成することができるが、その表組みの行となるものを定義するタグ。<TABLE>タグにつづけて<TR>と</TR>タグで囲まれた文字列やインラインイメージが、具体的な表の行の要素となる。
なお後述するが、行内に列を設定したい場合は、TRタグにつづけてTDタグを指定すればいい。
TRタグには、セル内容の位置を設定するために、ALIGNとVALIGNアトリビュートを記述することができる。
・ALIGN
セル内容の左右方向の位置を設定するアトリビュート。right(右揃え)、center(中央揃え)、left(左揃え)のいずれかを指定する。
ただし、セルの幅によっては、ALIGNを設定しても表示が変わらないこともあるので注意。こんなときは、TABLEタグにWIDTHアトリビュートの設定をしておくといい。
・VALIGN
セル内容の垂直方向の位置を設定するアトリビュート。top(上端)、middle(中央)、bottom(下端)、baseline(セルの最初の行のベースラインを揃える)のいずれかを指定する。
やはりセルの高さによっては、VALIGNを設定しても表示が変わらないこともある。こんなときは、TABLEタグにHEIGHTアトリビュートを設定しておけばいい。
【ソース例】
<TABLE BORDER=3 WIDTH=60% HEIGHT=200>
<TR ALIGN="right" VALIGN="top">
<TD>第1行第1列</TD><TD>第1行第2列</TD>
<TD>第1行第3列</TD></TR>
<TR ALIGN="center" VALIGN="top">
<TD>第2行第1列</TD><TD>第2行第2列</TD>
<TD>第2行第3列</TD></TR>
<TR ALIGN="left" VALIGN="top">
<TD>第3行第1列</TD><TD>第3行第2列</TD>
<TD>第3行第3列</TD></TR>
</TABLE>
<TABLE BORDER=3 WIDTH=60% HEIGHT=200>
<TR ALIGN="center" VALIGN="top">
<TD>第1行第1列</TD><TD>第1行第2列</TD>
<TD>第1行第3列</TD></TR>
<TR ALIGN="center" VALIGN="middle">
<TD>第2行第1列</TD><TD>第2行第2列</TD>
<TD>第2行第3列</TD></TR>
<TR ALIGN="center" VALIGN="bottom">
<TD>第3行第1列</TD><TD>第3行第2列</TD>
<TD>第3行第3列</TD></TR>
</TABLE>
|
◆TD……セルの内容
【書式】<TD>〜</TD>
<TD ALIGN="left/center/right" VALIGN="top/middle/bottom"
NOWRAP ROWSPAN=n COLSPAN=n WIDTH=n HEIGHT=n
BGCOLOR="#rrggbb/colorname">〜</TD>
【機能】表組みのセルの内容を設定する。
|
【解説】TABLEタグによって表組みを定義したら、TRタグによって行を定義する。さらにその行のセルの内容を、今度はTDタグで設定する。
具体的にいえば、表組みは次の一連のタグによってはじめて作成されると思っていればいい。
<TABLE><TR><TD>〜</TD>
上記の〜の部分に、実際に表組みの各セルに入る内容を設定するわけだ。1行に複数の列がある場合は、<TD>〜</TD>を列の分だけ設定していけばいい。
このセルのなか、つまり<TD>と</TD>にはさまれた部分には、文字列だけでなくイメージなどHTMLで表示できるあらゆるものを設定することができる。たとえば、文字列だけの表を作成するばかりでなく、イメージだけを使ったボタンのようなものや、それらを混在させたものだって作成できる。
TDタグには、次のようなアトリビュートを指定することができる。
・ALIGN="left/center/right"
セル内容の左右の方向の位置を設定するアトリビュート。セル内に配置されたイメージやテキストなどを、セル内の水平位置のどこに配置するかを設定する。left(左揃え)、center(中央揃え)、right(右揃え)のいずれかが指定できる。
ただし、セルの幅によっては、ALIGNを指定しても指定どおりに表示されない場合もある。
【ソース例】
<TABLE BORDER=3 WIDTH=70% HEIGHT=200>
<TR>
<TD ALIGN="right">第1行第1列</TD>
<TD ALIGN="center">第1行第2列</TD>
<TD ALIGN="left">第1行第3列</TD></TR>
<TR>
<TD ALIGN="right">第2行第1列</TD>
<TD ALIGN="center">第2行第2列</TD>
<TD ALIGN="left">第2行第3列</TD></TR>
<TR>
<TD ALIGN="right"><IMG SRC="sample1.gif"></TD>
<TD ALIGN="center"><IMG SRC="sample2.gif"></TD>
<TD ALIGN="left"><IMG SRC="sample3.gif"></TD></TR>
</TABLE>
|
・VALIGN="top/middle/bottom"
セル内容の上下の方向の位置を設定するアトリビュート。セル内に配置されたイメージやテキストなどを、セル内の上下位置のどこに配置するかを設定する。top(上端)、middle(中央)、bottom(下端)のいずれかが指定できる。
ただし、セルの高さによっては、VALIGNを指定しても指定どおりに表示されない場合もある。
【ソース例】
<TABLE BORDER=3 WIDTH=70% HEIGHT=400>
<TR>
<TD VALIGN="top">第1行第1列</TD>
<TD VALIGN="middle">第1行第2列</TD>
<TD VALIGN="bottom">第1行第3列</TD></TR>
<TR>
<TD VALIGN="top">第2行第1列</TD>
<TD VALIGN="middle">第2行第2列</TD>
<TD VALIGN="bottom">第2行第3列</TD></TR>
<TR>
<TD VALIGN="top"><IMG SRC="sample1.gif"></TD>
<TD VALIGN="middle"><IMG SRC="sample2.gif"></TD>
<TD VALIGN="bottom"><IMG SRC="sample3.gif"></TD></TR>
</TABLE>
|
・NOWRAP
表組みの各セルには、テキストやイメージなど何でも配置することができると述べたが、セルにテキストを定義した場合、長い文章ではブラウザが自動的に改行することもある。この改行を行わないようにするのが、NOWRAPアトリビュート。
次のソース例のように指定すればいい。
【ソース例】
<TABLE BORDER=3>
<TR>
<TD>こちらはセル内のテキストが、ブラウザによって自動的に改行される
例。NOWRAPアトリビュートの指定はしていない。</TD>
<TD>第1行第2列</TD>
<TD>第1行第3列</TD>
<TR>
<TD>第2行第1列</TD>
<TD>第2行第2列</TD>
<TD>第2行第3列</TD>
<TR>
<TD>第3行第1列</TD>
<TD>第3行第2列</TD>
<TD>第3行第3列</TD>
</TABLE><P>
<TABLE BORDER=3>
<TR>
<TD NOWRAP>こちらはセル内のテキストが、ブラウザによって自動的に改
行されないよう、NOWRAPアトリビュートを指定している。</TD>
<TD>第1行第2列</TD>
<TD>第1行第3列</TD>
<TR>
<TD>第2行第1列</TD>
<TD>第2行第2列</TD>
<TD>第2行第3列</TD>
<TR>
<TD>第3行第1列</TD>
<TD>第3行第2列</TD>
<TD>第3行第3列</TD>
</TABLE>
|
・ROWSPAN=n
HTMLで作成できる表組みは、タテヨコ同数の単純な表組みだけでなく、もっと複雑な表も作成できる。
たとえば、横のマス(列)の数が縦のマス(行)の数と異なる表はどうだろう。複数の行にまたがるセルを定義するときは、ROWSPANアトリビュートを利用する。
ROWSPANアトリビュートでは、縦方向にまたがるセル数を記述する。ソース例とその表示例を掲載しておくから、どのように指定すればどう表示されるか、確認しておくといい。
【ソース例】
<TABLE BORDER=3 WIDTH=90%>
<TR>
<TD ROWSPAN=3>第1行</TD><TD>第2行A</TD><TD>第3行A</TD>
<TD ROWSPAN=3>第4行</TD>
<TR>
<TD ROWSPAN=2>第2行B</TD><TD>第3行B</TD>
<TR>
<TD>第3行C</TD>
</TABLE>
|
・COLSPAN=n
ROWSPANアトリビュートは、複数行にまたがるセルを定義するアトリビュートだったが、複数列にまたがるセルを定義する場合は、COLSPANアトリビュートを記述する。
COLSPANアトリビュートでも、やはり横方向にまたがるセル数を記述する。
【ソース例】
<TABLE BORDER WIDTH=90%>
<TR ALIGN="center">
<TD COLSPAN=4>第1列</TD>
<TR ALIGN="center">
<TD COLSPAN=2>第2列A</TD><TD COLSPAN=2>第2列B</TD>
<TR ALIGN="center">
<TD>第3列A</TD><TD>第3列B</TD><TD>第3列C</TD><TD>第3列C</TD>
</TABLE>
|
・WIDTH=n
表組みを作成するとき、セル幅を最初に設定しておきたいことがある。というのも、各セルにテキストやイメージなどを定義した場合、セル幅はブラウザによって自動的に決定されてしまう。それぞれのセルに定義したものが同じ大きさや長さならいいが、それほど都合よくいくケースのほうが少ないはずだ。
そこで、最初にセル幅を決定しておく。それが可能なのがWIDTHアトリビュートだ。WIDTHにはピクセル単位で絶対的な大きさを指定するか、または表示されている表の幅に対する割合をパーセンテージで指定する。ただし、同一の表のなかで複数のWIDTHが設定されている場合、セル幅はもっとも大きなWIDTHの設定になる。
【ソース例】
<TABLE BORDER WIDTH=90%>
<TR ALIGN="center">
<TD>WIDTHを指定しなかった場合</TD>
<TD>第1行第2列</TD><TD>第1行第3列</TD></TR>
<TR ALIGN="center">
<TD>第2行第1列</TD><TD>第2行第2列</TD><TD>第2行第3列</TD>
</TR>
<TR ALIGN="center">
<TD>第3行第1列</TD><TD>第3行第2列</TD><TD>第3行第3列</TD>
</TR></TABLE><P>
<TABLE BORDER WIDTH=90%>
<TR ALIGN="center">
<TD WIDTH=33%>WIDTHを指定した場合</TD>
<TD WIDTH=33%>第1行第2列</TD><TD WIDTH=34%>第1行第3列</TD>
</TR>
<TR ALIGN="center">
<TD>第2行第1列</TD><TD>第2行第2列</TD><TD>第2行第3列</TD>
</TR>
<TR ALIGN="center">
<TD>第3行第1列</TD><TD>第3行第2列</TD><TD>第3行第3列</TD>
</TR></TABLE>
|
・HEIGHT=n
WIDTHはセル幅を指定するアトリビュートだったが、同様にセルの高さを指定するのがHEIGHTアトリビュート。これもピクセル単位で絶対的な大きさを指定する方法と、表示されている表のなかでの割合をパーセンテージで指定する方法とがある。
なお、同一の表のなかで複数の数値のHEIGHTが設定されている場合は、もっとも大きな数値の指定が有効となる。
ただし、Netscape Navigatorでは表示に変化はない。Internet Explorerでのみ有効。
【ソース例】
<TABLE BORDER WIDTH=90% HEIGHT=30%>
<TR ALIGN="center">
<TD>HEIGHTを指定しなかった場合</TD>
<TD>第1行第2列</TD><TD>第1行第3列</TD></TR>
<TR ALIGN="center">
<TD>第2行第1列</TD><TD>第2行第2列</TD><TD>第2行第3列</TD>
</TR>
<TR ALIGN="center">
<TD>第3行第1列</TD><TD>第3行第2列</TD><TD>第3行第3列</TD>
</TR></TABLE><P>
<TABLE BORDER WIDTH=90% HEIGHT=30%>
<TR ALIGN="center">
<TD HEIGHT=10%>HEIGHTを指定した場合</TD>
<TD>第1行第2列</TD><TD>第1行第3列</TD>
</TR>
<TR ALIGN="center">
<TD HEIGHT=30%>第2行第1列</TD><TD>第2行第2列</TD>
<TD>第2行第3列</TD>
</TR>
<TR ALIGN="center">
<TD HEIGHT=10%>第3行第1列</TD><TD>第3行第2列</TD>
<TD>第3行第3列</TD>
</TR></TABLE>
|
・BGCOLOR="#rrggbb/colorname"
表組みのセルに背景色をつけるアトリビュート。セルによって別々の背景色を設定できるため、色で注意を喚起するような表組みだって作成できる。
背景色の設定は、他の色指定と同じように16進数のRGB値で指定するか、または色名で指定すればいい。代表的な色については、○ページを参照していただきたい。
ただし、このアトリビュートが有効なのはInternet ExplorerかNetscape Navigator3.0以降で、Netscape Navigator2.0では無視される。
【ソース例】
<TABLE BORDER WIDTH=90% HEIGHT=30%>
<TR ALIGN="center">
<TD BGCOLOR="white">背景色 白</TD>
<TD BGCOLOR="red">背景色 赤</TD>
<TD BGCOLOR="blue">背景色 青</TD></TR>
<TR ALIGN="center">
<TD>無指定</TD>
<TD BGCOLOR="green">背景色 緑</TD>
<TD BGCOLOR="gray">背景色 灰</TD>
</TR>
</TABLE>
|
◆TH……見出しセルの定義
【書式】<TH>〜</TH>
<TH ALIGN="left/center/right" VALIGN="top/middle/bottom"
NOWRAP ROWSPAN=n COLSPAN=n WIDTH=n HEIGHT=n
BGCOLOR="#rrggbb/colorname">〜</TH>
【機能】表組みのなかのセルのうち、見出しとなるセルを定義する。
|
【解説】作成した表組みのなかの各セルを定義するタグで、機能的には前項のTDタグと同じもの。ただし、THタグで定義したセルは、初期値では見出しとしてセルのなかでセンタリングされ、テキストの場合は太字で表示される。
THタグにはTDタグの場合とまったく同じアトリビュートが設定できる。それぞれのアトリビュートは次のようになっている。
・ALIGN="left/center/right"
セル内容の左右の方向の位置を設定するアトリビュート。セル内に配置されたイメージやテキストなどを、セル内の水平位置のどこに配置するかを設定する。left(左揃え)、center(中央揃え)、right(右揃え)のいずれかが指定できる。THタグの場合は、デフォルトがcenterになっている。
なお、セルの幅によっては、ALIGNを指定しても指定どおりに表示されない場合もある。
【ソース例】
<TABLE BORDER=3 WIDTH=80% HEIGHT=200>
<TR>
<TH ALIGN="right">第1行第1列</TD>
<TD ALIGN="center">第1行第2列</TD>
<TD ALIGN="left">第1行第3列</TD></TR>
<TR>
<TH ALIGN="right">第2行第1列</TD>
<TD ALIGN="center">第2行第2列</TD>
<TD ALIGN="left">第2行第3列</TD></TR>
<TR>
<TH ALIGN="right"><IMG SRC="sample1.gif"></TD>
<TD ALIGN="center"><IMG SRC="sample2.gif"></TD>
<TD ALIGN="left"><IMG SRC="sample3.gif"></TD></TR>
</TABLE>
|
・VALIGN="top/middle/bottom"
セル内容の上下の方向の位置を設定するアトリビュート。セル内に配置されたイメージやテキストなどを、セル内の上下位置のどこに配置するかを設定する。top(上端)、middle(中央)、bottom(下端)のいずれかが指定できる。
ただし、セルの高さによっては、VALIGNを指定しても指定どおりに表示されない場合もある。
【ソース例】
<TABLE BORDER=3 WIDTH=80% HEIGHT=400>
<TR>
<TH VALIGN="top">第1行第1列</TD>
<TD VALIGN="middle">第1行第2列</TD>
<TD VALIGN="bottom">第1行第3列</TD></TR>
<TR>
<TH VALIGN="top">第2行第1列</TD>
<TD VALIGN="middle">第2行第2列</TD>
<TD VALIGN="bottom">第2行第3列</TD></TR>
<TR>
<TH VALIGN="top"><IMG SRC="sample1.gif"></TD>
<TD VALIGN="middle"><IMG SRC="sample2.gif"></TD>
<TD VALIGN="bottom"><IMG SRC="sample3.gif"></TD></TR>
</TABLE>
|
・NOWRAP
表組みの各セルには、テキストやイメージなど何でも配置することができるが、セルにテキストを定義した場合、長い文章ではブラウザが自動的に改行することもある。この改行を行わないようにするのが、NOWRAPアトリビュート。
次のソース例のように指定する。
【ソース例】
<TABLE BORDER=3>
<TR>
<TH>こちらはセル内のテキストが、ブラウザによって自動的に改行される
例。NOWRAPアトリビュートの指定はしていない。</TD>
<TH>第1行第2列</TD>
<TH>第1行第3列</TD>
<TR>
<TH>第2行第1列</TD>
<TD>第2行第2列</TD>
<TD>第2行第3列</TD>
<TR>
<TH>第3行第1列</TD>
<TD>第3行第2列</TD>
<TD>第3行第3列</TD>
</TABLE><P>
<TABLE BORDER=3>
<TR>
<TH NOWRAP>こちらはセル内のテキストが、ブラウザによって自動的に改
行されないよう、NOWRAPアトリビュートを指定している。</TD>
<TH>第1行第2列</TD>
<TH>第1行第3列</TD>
<TR>
<TH>第2行第1列</TD>
<TD>第2行第2列</TD>
<TD>第2行第3列</TD>
<TR>
<TH>第3行第1列</TD>
<TD>第3行第2列</TD>
<TD>第3行第3列</TD>
</TABLE>
|
・ROWSPAN=n
HTMLで作成できる表組みは、タテヨコ同数の単純な表組みだけでなく、もっと複雑な表も作成できる。
たとえば、横のマス(列)の数が縦のマス(行)の数と異なる表はどうだろう。複数の行にまたがるセルを定義するときは、ROWSPANアトリビュートを利用する。
ROWSPANアトリビュートでは、縦方向にまたがるセル数を記述する。ソース例とその表示例を掲載しておくから、どのように指定すればどう表示されるか、確認しておくといい。
【ソース例】
<TABLE BORDER=3 WIDTH=90%>
<TR>
<TH ROWSPAN=3>第1行</TD><TD>第2行A</TD><TD>第3行A</TD>
<TD ROWSPAN=3>第4行</TD>
<TR>
<TH ROWSPAN=2>第2行B</TD><TD>第3行B</TD>
<TR>
<TH>第3行C</TD>
</TABLE>
|
・COLSPAN=n
ROWSPANアトリビュートは、複数行にまたがるセルを定義するアトリビュートだったが、複数列にまたがるセルを定義する場合は、COLSPANアトリビュートを記述する。
COLSPANアトリビュートでも、やはり横方向にまたがるセル数を記述する。
【ソース例】
<TABLE BORDER WIDTH=90%>
<TR ALIGN="center">
<TH COLSPAN=4>第1列</TD>
<TR ALIGN="center">
<TH COLSPAN=2>第2列A</TD><TD COLSPAN=2>第2列B</TD>
<TR ALIGN="center">
<TH>第3列A</TD><TD>第3列B</TD><TD>第3列C</TD><TD>第3列C</TD>
</TABLE>
|
・WIDTH=n
表組みを作成するとき、セル幅を最初に設定しておきたいことがある。というのも、各セルにテキストやイメージなどを定義した場合、セル幅はブラウザによって自動的に決定されてしまう。それぞれのセルに定義したものが同じ大きさや長さならいいが、それほど都合よくいくケースのほうが少ないはずだ。
そこで、最初にセル幅を決定しておく。それが可能なのがWIDTHアトリビュートだ。WIDTHにはピクセル単位で絶対的な大きさを指定するか、または表示されている表の幅に対する割合をパーセンテージで指定する。ただし、同一の表のなかで複数のWIDTHが設定されている場合、セル幅はもっとも大きなWIDTHの設定になる。
【ソース例】
<TABLE BORDER WIDTH=90%>
<TR ALIGN="center">
<TH>WIDTHを指定しなかった場合</TD>
<TD>第1行第2列</TD><TD>第1行第3列</TD></TR>
<TR ALIGN="center">
<TD>第2行第1列</TD><TD>第2行第2列</TD><TD>第2行第3列</TD>
</TR>
<TR ALIGN="center">
<TD>第3行第1列</TD><TD>第3行第2列</TD><TD>第3行第3列</TD>
</TR></TABLE><P>
<TABLE BORDER WIDTH=90%>
<TR ALIGN="center">
<TH WIDTH=33%>WIDTHを指定した場合</TD>
<TD WIDTH=33%>第1行第2列</TD><TD WIDTH=34%>第1行第3列</TD>
</TR>
<TR ALIGN="center">
<TD>第2行第1列</TD><TD>第2行第2列</TD><TD>第2行第3列</TD>
</TR>
<TR ALIGN="center">
<TD>第3行第1列</TD><TD>第3行第2列</TD><TD>第3行第3列</TD>
</TR></TABLE>
|
・HEIGHT=n
WIDTHはセル幅を指定するアトリビュートだったが、同様にセルの高さを指定するのがHEIGHTアトリビュート。これもピクセル単位で絶対的な大きさを指定する方法と、表示されている表のなかでの割合をパーセンテージで指定する方法とがある。
なお、同一の表のなかで複数の数値のHEIGHTが設定されている場合は、もっとも大きな数値の指定が有効となる。
ただし、Netscape Navigatorでは表示に変化はない。Internet Explorerでのみ有効。
【ソース例】
<TABLE BORDER WIDTH=90% HEIGHT=30%>
<TR ALIGN="center">
<TH>HEIGHTを指定しなかった場合</TD>
<TD>第1行第2列</TD><TD>第1行第3列</TD></TR>
<TR ALIGN="center">
<TD>第2行第1列</TD><TD>第2行第2列</TD><TD>第2行第3列</TD>
</TR>
<TR ALIGN="center">
<TD>第3行第1列</TD><TD>第3行第2列</TD><TD>第3行第3列</TD>
</TR></TABLE><P>
<TABLE BORDER WIDTH=90% HEIGHT=30%>
<TR ALIGN="center">
<TH HEIGHT=10%>HEIGHTを指定した場合</TD>
<TD>第1行第2列</TD><TD>第1行第3列</TD>
</TR>
<TR ALIGN="center">
<TD HEIGHT=30%>第2行第1列</TD><TD>第2行第2列</TD>
<TD>第2行第3列</TD>
</TR>
<TR ALIGN="center">
<TD HEIGHT=10%>第3行第1列</TD><TD>第3行第2列</TD>
<TD>第3行第3列</TD>
</TR></TABLE>
|
・BGCOLOR="#rrggbb/colorname"
表組みのセルに背景色をつけるアトリビュート。セルによって別々の背景色を設定できるため、色で注意を喚起するような表組みだって作成できる。
背景色の設定は、他の色指定と同じように16進数のRGB値で指定するか、または色名で指定すればいい。代表的な色については、○ページを参照していただきたい。
ただし、このアトリビュートが有効なのはInternet ExplorerかNetscape Navigator3.0以降で、Netscape Navigator2.0では無視される。
【ソース例】
<TABLE BORDER WIDTH=90% HEIGHT=30%>
<TR ALIGN="center">
<TH BGCOLOR="white">背景色 白</TD>
<TD BGCOLOR="red">背景色 赤</TD>
<TD BGCOLOR="blue">背景色 青</TD></TR>
<TR ALIGN="center">
<TH>無指定</TD>
<TD BGCOLOR="green">背景色 緑</TD>
<TD BGCOLOR="gray">背景色 灰</TD>
</TR>
</TABLE>
|
◆CAPTION……表のタイトル
【書式】<CAPTION ALIGN="top/bottom">〜</CAPTION>
【機能】表にタイトルをつける。
|
【解説】作成した表組みに、タイトルを指定するタグ。アトリビュートの指定で、表の上部にタイトルをつけることも、下部につけることもできる。
アトリビュートにはALIGNがあり、表の上部にタイトルをつけたいときはtopを、下部につけたいときはbottomを指定すればいい。ALIGNを省略したときは、topを指定したのと同じ結果になる。
【ソース例】
<TABLE BORDER=3 WIDTH=80%>
<CAPTION ALIGN="top">表1</CAPTION>
<TR ALIGN="center">
<TH>第1行第1列</TD><TD>第1行第2列</TD><TD>第1行第3列</TD>
</TR>
<TR ALIGN="center">
<TH>第2行第1列</TD><TD>第2行第2列</TD><TD>第2行第3列</TD>
</TR>
<TR ALIGN="center">
<TH><IMG SRC="sample1.gif"></TD><TD><IMG SRC="sample2.gif"></TD>
<TD><IMG SRC="sample3.gif"></TD></TR>
</TABLE><P>
<TABLE BORDER=3 WIDTH=80% HEIGHT=400>
<CAPTION ALIGN="bottom">表2</CAPTION>
<TR ALIGN="center">
<TH>第1行第1列</TD><TD>第1行第2列</TD><TD>第1行第3列</TD>
</TR>
<TR ALIGN="center">
<TH>第2行第1列</TD><TD>第2行第2列</TD><TD>第2行第3列</TD>
</TR>
<TR ALIGN="center">
<TH><IMG SRC="sample1.gif"></TD><TD><IMG SRC="sample2.gif"></TD>
<TD><IMG SRC="sample3.gif"></TD></TR>
</TABLE>
|