Table

表＜ＴＡＢＬＥ＞

表は Mosaic 2.5 からも使用できますが不完全な実装です。しかし、 Netscape や Microsoft Internet Explorer ではHTML 3.0の機能を満足しており、独自な拡張も施されています。

表作成

表を作成する際のタグで、開始タグ<TABLE>と </TABLE>で囲んだ部分で表タグが有効となり、表が作成できます。BORDER を加えると罫線が表示されます。そして、TABLEタグの前後は改行されます。

なお、TABLEタグは入れ子にできるため、より複雑な表を作成できます。

<TABLE>
.
.
表のタグ
.
.
</TABLE>

表は、以下の要素から構成されています。

データヘッダ <TH>: 表の横縦列の見出しに使用します。テキストはボールドで中央寄せされます。
データセル <TD>: 表のデータに使用します。
横列要素 <TR>: 表の横列を指定します。
表題 <CAPTION>: 表のタイトルに使用します。

表題
データヘッダ	データヘッダ	データヘッダ
データセル	データセル	データセル
データセル	データセル	データセル
データセル	データセル	データセル
←───────横列要素───────→

表の中に表のタグを使用しない文書を挿入すると、表の上部に表示しようとします。

<TABLE BORDER> <TR><TD>データ</TD></TR> <H3>天気予報</H3> 今日の天気は雪です。<P> </TABLE>

天気予報
今日の天気は雪です。

データ

横列要素

<TR>～</TR>に表の横列要素を入れます。横列を複数またがせる場合、ROWSPAN属性を使用します。

データセル

真中の横列はデータセルが一つ少ない設定
AAAAA	BBBBB	CCCCC
DDDDD	EEEEE
FFFFF	GGGGG	HHHHH

<TD>～</TD>に表データ(データセル)を入れます。各横列はセルの数が同一になるようにしなければなりませんが、数が合わなければそのデータセルはブランクになります。データは左寄せ (ALIGH=left)、縦に中央(VALIGN=middle)に設定されます。 TRとTDで位置が指定してあった場合、TDで指定した方が優先されます。

ヘッダ項目

<TH>～</TH>に表のヘッダ項目を入れます。この部分は太文字(ボールド)体になり、中央寄せされます(ALIGN=center)。

表題 <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

基本的な表

罫線 (BORDER、BORDERCOLOR)

この属性はTABLEタグで使用され、表中セルの周りに罫線を引かれます(BORDERを指定しなければ、罫線は引かれません)。なお、 Netscape Navigator ではvalueで罫線の幅をピクセル単位で指定できます。

罫線幅の値を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>

AAAAA BBBBB CCCCC

AAAAA BBBBB CCCCC

AAAAA BBBBB CCCCC

表の罫線幅 BORDER=20

AAAAA BBBBB CCCCC

AAAAA BBBBB CCCCC

AAAAA BBBBB CCCCC

表の罫線幅 BORDER=0

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 属性は表の立体的な罫線の側面の色を指定する場合に用いられます。

AAAAA BBBBB CCCCC

AAAAA BBBBB CCCCC

AAAAA BBBBB CCCCC

BORDER=20、BORDERCOLORLIGHTD=RED

AAAAA BBBBB CCCCC

AAAAA BBBBB CCCCC

AAAAA BBBBB CCCCC

BORDER=20、BORDERCOLORDARK=RED

表、セル、表題の位置

ALIGN 属性は表題(CAPTION)や、セル等の位置を指定します。

表作成(TABLE)タグ

<IMG>タグの時のように次に続くテキストを回り込ませる事ができます。左(left)と右(right)が指定できます。 <IMG>タグと同じように HSPACEや VSPACEも使用できます。

<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

表本体の位置
文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。文書が続きます。

表題(CAPTION)タグ

表題の上(top)下(bottom)が指定できます。デフォルトでは上(top)です。

TR, TH, TDタグ

表のセルに関連するタグは、セル中のテキストや図の水平位置を制御します。位置は左(left)、右(right)、中央 (center)が指定できます。デフォルト位置は左寄せ (left)です。

<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

左中央右

セルデータの位置

セル中テキストの縦位置

TR, TH, TDタグで指定できるVALIGN属性はセル中のテキストや図の縦位置を制御します。位置は上(top)、下(bottom)、中央(middle)、ベースライン(baseline)が指定できます。デフォルト位置は中央寄せ(middle)です。

<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__

テキストの縦位置

テキストの縦位置
上(TOP)__	AAAAA AAAAA	__AAyy__
中(MIDDLE)__	BBBBB BBBBB	__BByy__
下(BOTTOM)__	CCCCC CCCCC	__CCyy__
ベースライン(BASELINE)__	DDDDD DDDDD	__DDyy__

<[TH | TD] NOWRAP>

表は各セルのテキスト長とブラウザのウィンドウ幅を考慮して、うまく収まるようにセル幅が決められます。そのため、テキストが任意の位置で改行されてしまいます。THまたはTDタグで指定できる <NOWRAP>属性はセル内のテキストを改行させたくない場合に用います。NOWRAPを指定したセル中のテキストを改行させるには、 <BR>タグを用います。この方法を使用してユーザが改行させたい場所で改行を指定できます。

標準の表<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

aaaaa	bbbbb
aaaaa	bbb bbbbb bbb bbbbb bbb bbbbb

NOWRAP表

aaaaa bbbbb

aaaaa bbb bbbbb
bbb bbbbb bbb bbbbb

aaaaa	bbbbb
aaaaa	bbb bbbbb bbb bbbbb bbb bbbbb

<[TH | TD] COLSPAN=value>

セルが複数の縦行をまたがせるかを指定します。デフォルトの数は1です。このタグはTHまたはTDで使用します。下記の例では <TH COLSPAN=2>というタグが縦2列にまたがるセルで、次の横2列のセル分を意味します。

<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

COLSPANの例

<[TH | TD] ROWSPAN=value>

セルが複数の横行をまたがせるかを指定します。デフォルトの数は1です。このタグはTHまたはTDで使用します。下記の例では <TD ROWSPAN=2>というタグが横2列にまたがるセルで、次の縦2列のセル分を意味します。

<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

ROWSPANの例

<TABLE CELLSPACING=value>

CELLSPACING属性はセルの周りを囲む罫線幅を指定します。デフォルトでは2つのスペースです。

<TABLE CELLPADDING=value>

CELLPADDING属性は、セルの中身(テキスト、図)とセルの罫線の間の幅(スペース)を指定します。デフォルトでは1つのセルパディングです。 BORDERで指定する外枠幅と異なる値にすると以下のような表となります。

<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=20 CELLSPACING=10,CELLPADDING=10

BORDERを指定しない、あるいはBORDER=0で、CELLSPACINGやCELLPADDING を指定してもスペースのみが取られ、広がった表になります。

AAAAA BBBBB CCCCC

AAAAA BBBBB CCCCC

AAAAA BBBBB CCCCC

罫線のない表の画面

<[TABLE | TH | TD] WIDTH=value>

WIDTH属性は表全体の幅やセル毎に幅を指定するために、 THまたはTDでも指定します。幅はピクセル的な幅あるいは書類サイズの割合(パーセンテージ)で指定します。指定された幅が、この表を作るのに必要な幅以下の場合は、無視されます。

<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

表、セル幅の指定

表、セル幅の指定
70%幅	30%幅
AAAAA	BBBBB

<[TABLE | TH | TD] HEIGHT=value>

HEIGHT属性は表全体の高さやセル毎に高さを指定するために、 THまたはTDで指定します。高さはピクセル的な高さあるいは書類サイズの割合(パーセンテージ)で指定します。指定された高さが、この表を作るのに必要な高さ以下の場合は、無視されます。

指定例は次のとおり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

表、セルの高さ

表、セルの高さ
Height 15%	Item
100	1000

表の入れ子

Netscape の表では、表の中に表を作る事もできます(表の入れ子)。表の入れ子は、より複雑な表を作る場合に使用できます。下記が表の入れ子例です。

<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>

作曲家作品

ベートーヴェン

交響曲 9

ピアノ協奏曲 5

ヴァイオリン協奏曲 1

ブラームス

交響曲 4

ピアノ協奏曲 2

ヴァイオリン協奏曲 1

2B

空セル

Netscapeの表では空のセルを作る(<TH></TH>や <TD></TD>)と下左図のように、縦横の並んだセルが一つにつながってしまいます。

AAAAA BBBBB CCCCC

AAAAA BBBBB

AAAAA BBBBB

AAAAA BBBBB CCCCC

AAAAA BBBBB

AAAAA BBBBB

これは、項目の境界()であれば特に問題ないのですが、他のセル部分ではちょっと違和感があります。そこで、空のセルをつながっていないようなセルにするには、セル内に改行タグ(<BR>)を挿入し、<TH><BR></TH>や <TD><BR></TD>のように記述します。(上図左)

この空のセルは表の縦横の罫線を太く表示させたい場合に利用できます。横方向では<TR></TR>を、縦方向では、 <TH></TH>、<TD></TD>を使用します。

<TABLE BORDER>
<TR><TH>項目１</TH> <TH></TH>
<TH>項目２</TH> <TH>項目２</TH></TR>
<TR></TR><TR></TR>
<TR><TD>データ１</TD> <TD></TD>
<TD>データ２</TD> <TD>データ３</TD></TR>
<TR><TD>データ４</TD> <TD></TD>
<TD>データ５</TD> <TD>データ６</TD></TR>
<TR><TD>データ７</TD> <TD></TD>
<TD>データ８</TD> <TD>データ９</TD></TR>
</TABLE>

項目１項目２項目２

データ１データ２データ３

データ４データ５データ６

データ７データ８データ９

項目１	項目２	項目２
データ１	データ２	データ３
データ４	データ５	データ６
データ７	データ８	データ９

セルの背景色

マイクロソフトエクスプローラや Netscape 3.0では、BGCOLOR属性によって、データセルに背景色を付けることが可能です。

<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>

タイトル(赤色)

第一番目のセル(緑色)

第二番目のセル(青色)

タイトル(赤色)
第一番目のセル(緑色)
第二番目のセル(青色)

セルの背景

マイクロソフトエクスプローラでは、BACKGROUND属性によって、データセルに背景色を付けることが可能です。

<TABLE ALIGN=RIGHT BORDER=1 WIDTH=50%>
<TR><TD BACKGROUND="raindrop.gif">背景図付きセル</TD></TR>
</TABLE>

背景図
付き
セル

表の応用

Netscape の表では、セルに入る文書には特に制限はなく、見出し、図、リスト、フォームや水平線なども入れることができます。下記の例では、それぞれのセルに見出し、図、リスト、フォーム、水平線を入れています。

Test
This is a level-2 head

form input:

First.
Second.

form input:

見出し、図、リスト、フォーム、水平線を挿入した表

見出し、図、リスト、フォーム、水平線を挿入した表
Test This is a level-2 head
form input:	First. Second. form input:

<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 女


名前	年齢	性別

山田太郎	31	男
山田花子	27	女
鈴木一朗	22	男
鈴木幸子	20	女

このように表のセル内に自由に文書や図を置けることを利用して、複数カラムの文書を作成することもできます。論文等で利用するダブルカラム(二段組)の場合、次のようにします。基本構造をこのようにしておけば、三段組、四段組も可能でしょう。なお、ROWSPANやCOLSPAN属性を応用すれば、もっと複雑なレイアウトも可能だと思われます。( マルチコラムタグ)

<TABLE SIZE="100%">
<TR>
<TD VALIGN=TOP SIZE="50%">

左側の文書

</TD>
ここが段の切れ目です。プレビューしながら、ちょうどよい場所で切って下さい。
<TD VALIGN=TOP SIZE="50%">

右側の文書

</TD>
</TABLE>

[Up] [Next] [Previous]