なお、TABLEタグは入れ子にできるため、より複雑な表を作成できま す。
<TABLE> . . 表のタグ . . </TABLE>
表は、以下の要素から構成されています。
データヘッダ | データヘッダ | データヘッダ |
---|---|---|
データセル | データセル | データセル |
データセル | データセル | データセル |
データセル | データセル | データセル |
←───────横列要素───────→ |
表の中に表のタグを使用しない文書を挿入すると、表の上部に表示しようとし ます。
<TABLE BORDER> <TR><TD>データ</TD></TR> <H3>天気予報</H3> 今日の天気は雪です。<P> </TABLE> |
|
AAAAA | BBBBB | CCCCC |
DDDDD | EEEEE | |
FFFFF | GGGGG | HHHHH |
表題 <CAPTION>
これは表のタイトル(表題)を表します。このタグはTABLEタグの中に
置かなければなりません。どこに置いてもいいのですが、列要素タグの中に置
けません。デフォルトでは表題は表の上(ALIGN=top)に表示されます
が、下に置きたい場合、<CAPTION ALIGN=bottom>〜
</CAPTION>と設定します。なお、表題は必ず中央寄せされます。
これまでのタグの説明で、基本的な表を作成できるようになりました。
<TABLE BORDER> <TR> <TH>AAAAA</TH> <TH>BBBBB</TH> <TH>CCCCC</TH> </TR> <TR> <TD>AAAAA</TD> <TD>BBBBB</TD> <TD>CCCCC</TD> </TR> <TR> <TD>AAAAA</TD> <TD>BBBBB</TD> <TD>CCCCC</TD> </TR> <CAPTION ALIGN=bottom>基本的な表<CAPTION> </TABLE>
AAAAA | BBBBB | CCCCC |
---|---|---|
AAAAA | BBBBB | CCCCC |
AAAAA | BBBBB | CCCCC |
罫線幅の値を0 (BORDER=0)に指定すると罫線は引かれません(すなわち BORDERを指定しないのと同じ効果が得られます)。また、Netscape ではマイナス数字を設定した場合、border=1 と同じように表示されるようで す。
<TABLE BORDER=20> <TR> <TH>AAAAA</TH> <TH>BBBBB</TH> <TH>CCCCC</TH> </TR> <TR> <TD>AAAAA</TD> <TD>BBBBB</TD> <TD>CCCCC</TD> </TR> <TR> <TD>AAAAA</TD> <TD>BBBBB</TD> <TD>CCCCC</TD> </TR> <CAPTION ALIGN=bottom>BORDER=20の場合<CAPTION> </TABLE>
|
|
HTML 3.0 では罫線の色を BORDERCOLOR 属性で指定できます。
<TABLE BORDER=20 BORDERCOLOR=RED> <TR> <TH>AAAAA</TH> <TH>BBBBB</TH> <TH>CCCCC</TH> </TR> <TR> <TD>AAAAA</TD> <TD>BBBBB</TD> <TD>CCCCC</TD> </TR> <TR> <TD>AAAAA</TD> <TD>BBBBB</TD> <TD>CCCCC</TD> </TR> <CAPTION ALIGN=bottom>表の罫線を赤に設定した場合<CAPTION> </TABLE>
AAAAA | BBBBB | CCCCC |
---|---|---|
AAAAA | BBBBB | CCCCC |
AAAAA | BBBBB | CCCCC |
また、BORDERCOLORLIGHT、BORDERCOLORDARK 属性は表の立体的な罫線の側面の 色を指定する場合に用いられます。
|
|
<TABLE BORDER ALIGN=left HSPACE=15 VSPACE=5> <TR> <TH>LEFT</TH> <TH>CENTER</TH> <TH>RIGHT</TH> </TR> <TR> <TD>AAAAA</TD> <TD>BBBBB</TD> <TD>CCCCC</TD> </TR> <TR ALIGN=center> <TD ALIGN=left>A</TD> <TD>B</TD> <TD ALIGN=right>C</TD> </TR> <CAPTION>表本体の位置</CAPTION> </TABLE> 文書が続きます。
LEFT | CENTER | RIGHT |
---|---|---|
AAAAA | BBBBB | CCCCC |
A | B | C |
<TABLE BORDER> <TR> <TH>LEFT</TH> <TH>CENTER</TH> <TH>RIGHT</TH> </TR> <TR> <TD>AAAAA</TD> <TD>BBBBB</TD> <TD>CCCCC</TD> </TR> <TR align=center> <TD align=left>左</TD> <TD>中央</TD> <TD align=right>右</TD> </TR> <CAPTION ALIGN=bottom>セルデータの位置</CAPTION> </TABLE>
LEFT | CENTER | RIGHT |
---|---|---|
AAAAA | BBBBB | CCCCC |
左 | 中央 | 右 |
<TABLE BORDER> <TR valign=top> <TH>TOP</TH> <TD>AAAAA<br>AAAAA</TD> <TD valign=bottom>AAAAA</TD> </TR> <TR> <TH>MIDDLE</TH> <TD>BBBBB<br>BBBBB</TD> <TD valign=top>BBBBB</TD> </TR> <TR valign=bottom> <TH>BOTTOM</TH> <TD>CCCCC<br>CCCCC</TD> <TD align=middle>CCCCC</TD> </TR> <CAPTION ALIGN=bottom>テキストの縦位置<CAPTION> </TABLE>
上(TOP)__ | AAAAA AAAAA | __AAyy__ |
---|---|---|
中(MIDDLE)__ | BBBBB BBBBB | __BByy__ |
下(BOTTOM)__ | CCCCC CCCCC | __CCyy__ |
ベースライン(BASELINE)__ | DDDDD DDDDD |
__DDyy__ |
標準の表<BR> <TABLE BORDER WIDTH=30%> <TR><TH>aaaaa</TH> <TH>bbbbb</TH></TR> <TR><TD>aaaaa</TD> <TD>bbb bbbbb bbb bbbbb bbb bbbbb</TD></TR> </TABLE> NOWRAP表<BR> <TABLE BORDER WIDTH=30%> <TR><TH>aaaaa</TH> <TH>bbbbb</TH></TR> <TR><TD>aaaaa</TD> <TD NOWRAP>bbb bbbbb<b><BR></b> bbb bbbbb bbb bbbbb</TD></TR> </TABLE>
標準の表
aaaaa | bbbbb |
---|---|
aaaaa | bbb bbbbb bbb bbbbb bbb bbbbb |
NOWRAP表
aaaaa | bbbbb |
---|---|
aaaaa | bbb bbbbb bbb bbbbb bbb bbbbb |
<TABLE BORDER> <TR> <TH>AAAAA</TH> <TH COLSPAN=2>BBBBB</TH> </TR> <TR> <TD>AAAAA</TD> <TD>BBBBB</TD> <TD>CCCCC</TD> </TR> <TR> <TD>AAAAA</TD> <TD>BBBBB</TD> <TD>CCCCC</TD> </TR> <CAPTION ALIGN=bottom>COLSPANを使って例<CAPTION> </TABLE>
AAAAA | BBBBB | |
---|---|---|
AAAAA | BBBBB | CCCCC |
AAAAA | BBBBB | CCCCC |
<TABLE BORDER> <TR> <TH>AAAAA</TH> <TH>BBBBB</TH> <TH>CCCCC</TH> </TR> <TR> <TD>AAAAA</TD> <TD ROWSPAN=2>BBBBB</TD> <TD>CCCCC</TD> </TR> <TR> <TD>AAAAA</TD> <TD>CCCCC</TD> </TR> <CAPTION ALIGN=bottom>ROWSPANを使った例<CAPTION> </TABLE>
AAAAA | BBBBB | CCCCC |
---|---|---|
AAAAA | BBBBB | CCCCC |
AAAAA | BBBBB |
<TABLE BORDER=20 CELLSPACING=10 CELLPADDING=10> <TR> <TH>AAAAA</TH> <TH>BBBBB</TH> <TH>CCCCC</TH> </TR> <TR> <TD>AAAAA</TD> <TD>BBBBB</TD> <TD>CCCCC</TD> </TR> <TR> <TD>AAAAA</TD> <TD>BBBBB</TD> <TD>CCCCC</TD> </TR> <CAPTION ALIGN=bottom>BORDERが20、CELLSPACINGが10、CELLPADDINGが10の表<CAPTION> </TABLE>
AAAAA | BBBBB | CCCCC |
---|---|---|
AAAAA | BBBBB | CCCCC |
AAAAA | BBBBB | CCCCC |
BORDERを指定しない、あ るいはBORDER=0で、CELLSPACINGやCELLPADDING を指定してもスペースのみが取られ、広がった表になります。
AAAAA BBBBB CCCCC AAAAA BBBBB CCCCC AAAAA BBBBB CCCCC 罫線のない表の画面
<TABLE BORDER WIDTH="50%">p <TR> <TD WIDTH="70%">70%幅</TD> <TD WIDTH="30%">30%幅</TD> </TR> <TR> <TD>A</TD> <TD>B</TD> </TR> <CAPTION align=bottom>表の幅の変更例</CAPTION> </TABLE>
70%幅 | 30%幅 | AAAAA | BBBBB |
指定例は次のとおりdえす。
<TABLE BORDER WIDTH="50%" HEIGHT="15%"> <TR> <TD>高さ15%</TD> <TD>アイテム</TD> </TR> <TR> <TD>100</TD> <TD>1000</TD> </TR> <CAPTION align=bottom>表の高さの変更例</CAPTION> </TABLE>
Height 15% | Item |
100 | 1000 |
<TABLE BORDER> <TR> <TH>作曲家</TH> <TH>作品</TH> </TR> <TR> <TD>ベートーヴェン</TD> <TD> <TABLE BORDER WIDTH="100%"> <TR><TD>交響曲</TD> <TD>9</TD></TR> <TR><TD>ピアノ協奏曲</TD> <TD>5</TD></TR> <TR><TD>ヴァイオリン協奏曲</TD> <TD>1</TD></TR> </TABLE> </TR> <TR> <TD>ブラームス</TD> <TD> <TABLE BORDER WIDTH="100%"> <TR><TD>交響曲</TD> <TD>4</TD></TR> <TR><TD>ピアノ協奏曲</TD> <TD>2</TD></TR> <TR><TD>ヴァイオリン協奏曲</TD> <TD>1</TD></TR> </TABLE> </TR> <CAPTION align=bottom>2B</CAPTION> </TABLE>
作曲家 | 作品 | ||||||
---|---|---|---|---|---|---|---|
ベートーヴェン |
| ||||||
ブラームス |
|
|
|
これは、項目の境界()であれば特に問題ないのですが、 他のセル部分ではちょっと違和感があります。そこで、空のセルをつながって いないようなセルにするには、セル内に改行タグ(<BR>)を挿 入し、<TH><BR></TH>や <TD><BR></TD>のように記述します。(上図左)
この空のセルは表の縦横の罫線を太く表示させたい場合に利用できます。 横方向では<TR></TR>を、縦方向では、 <TH></TH>、<TD></TD>を使用し ます。
<TABLE BORDER> <TR><TH>項目1</TH> <TH></TH> <TH>項目2</TH> <TH>項目2</TH></TR> <TR></TR><TR></TR> <TR><TD>データ1</TD> <TD></TD> <TD>データ2</TD> <TD>データ3</TD></TR> <TR><TD>データ4</TD> <TD></TD> <TD>データ5</TD> <TD>データ6</TD></TR> <TR><TD>データ7</TD> <TD></TD> <TD>データ8</TD> <TD>データ9</TD></TR> </TABLE>
項目1 | 項目2 | 項目2 | |
---|---|---|---|
データ1 | データ2 | データ3 | |
データ4 | データ5 | データ6 | |
データ7 | データ8 | データ9 |
<TABLE | TR | TH | TD [ BGCOLOR=#rrggbb | color_name ]>
<TABLE ALIGN=RIGHT BORDER=1 WIDTH=50%> <TR><TH BGCOLOR="red">タイトル(赤色)</TH></TR> <TR><TD BGCOLOR="green">第一番目のセル(緑色)</TD></TR> <TR><TD BGCOLOR="blue">第二番目のセル(青色)</TD></TR> </TABLE>
タイトル(赤色) |
---|
第一番目のセル(緑色) |
第二番目のセル(青色) |
<TABLE ALIGN=RIGHT BORDER=1 WIDTH=50%> <TR><TD BACKGROUND="raindrop.gif">背景図付きセル</TD></TR> </TABLE>
背景図 付き セル |
TestThis is a level-2 head |
|
| |
<TABLE BORDER WIDTH=80% BGCOLOR="aquamarine"> <TR><TD><H2>Test</H2>This is a level-2 head</TD> <TD ALIGN=center><IMG SRC="foo.gif"></TD></TR> <TR><TD><FORM>form input: <INPUT SIZE=10 TYPE=text></FORM></TD><TD> <UL> <LI> First. <LI> Second. </UL> <FORM> form input: <INPUT SIZE=10 TYPE=text></FORM> </TD></TR> <TR><TD COLSPAN=2><BR><HR SIZE=10 NOSHADE><BR></TD></TR> </TABLE>
水平線を使って、次のような表を作る事ができます。
<TABLE> <TR><TD COLSPAN=3><HR NOSHADE></TD></TR> <TR><TH>名前</TH> <TH>年齢</TH> <TH>性別</TH></TR> <TR><TD COLSPAN=3><HR NOSHADE></TD></TR> <TR><TD>山田太郎</TD> <TD>31</TD> <TD>男</TD></TR> <TR><TD>山田花子</TD> <TD>27</TD> <TD>女</TD></TR> <TR><TD>鈴木一朗</TD> <TD>22</TD> <TD>男</TD></TR> <TR><TD>鈴木幸子</TD> <TD>20</TD> <TD>女</TD></TR> <TR><TD COLSPAN=3><HR NOSHADE></TD></TR> </TABLE>
名前 | 年齢 | 性別 |
---|---|---|
山田太郎 | 31 | 男 |
山田花子 | 27 | 女 |
鈴木一朗 | 22 | 男 |
鈴木幸子 | 20 | 女 |
このように表のセル内に自由に文書や図を置けることを利用して、複数カラム の文書を作成することもできます。論文等で利用するダブルカラム(二段組)の 場合、次のようにします。基本構造をこのようにしておけば、三段組、四段組 も可能でしょう。なお、ROWSPANやCOLSPAN属性を応用すれ ば、もっと複雑なレイアウトも可能だと思われます。( マルチコラムタグ)
<TABLE SIZE="100%"> <TR> <TD VALIGN=TOP SIZE="50%"> 左側の文書 </TD> ここが段の切れ目です。プレビューしながら、ちょうどよい場所で切って下さい。 <TD VALIGN=TOP SIZE="50%"> 右側の文書 </TD> </TABLE>