[Up] [Next] [Previous]

表<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)に設定されます。 TRTDで位置が指定してあった場合、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>タグと同じように HSPACEVSPACEも使用できます。

<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__
テキストの縦位置

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

NOWRAP表
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で、CELLSPACINGCELLPADDING を指定してもスペースのみが取られ、広がった表になります。

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
表、セル幅の指定

<[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
表、セルの高さ

表の入れ子

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

セルの背景色

マイクロソフトエクスプローラや 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:



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

<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

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

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

左側の文書

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

右側の文書

</TD>
</TABLE>


[Up] [Next] [Previous]