トップへ
田村研究室

インターネット利用技術演習

2009年度

メニュー

目次

2009
4/27

HTMLの作表機能

基本的な表の作り方

大量の情報を整理して表示するために表は有効である．もちろんWebページでも頻繁に使用される．Webページに表を作成するためのタグが <table>タグである．

表は<table>と</table>で中身を囲み，この間に項目名と各セルのデータ内容を書く．表は行ごとに左から右へ内容を記述する．各行の定義は行全体を<tr>(Table Row)と</tr>で囲み，その中で<th>(Table Header)タグと<td>(Table Data)タグを使って表見出しやデータを指定する．例えば，HTMLファイル中で，

<TABLE BORDER="1">
    <TR><TH>身長</TH><TH>体重</TH></TR>
    <TR><TD>178cm</TD><TD>76.5kg</TD></TR>
</TABLE>

と記述すれば，

身長 体重
178cm 76.5kg

のように表示され，

<TABLE BORDER="1">
    <TR><TH>身長</TH><TD> 178cm</TD></TR>
    <TR><TH>体重</TH><TD>76.5kg</TD></TR>
</TABLE>

と記述すれば，

身長 178cm
体重 76.5kg

と表示される．<TH>は見出しのみに利用し，ひとつの表に対して先頭行または先頭列のどちらかだけに揃えて使用する．(単に文字強調の意味では使用しないこと．文字強調は後述する．)

表の大きさ指定

表の幅や高さはそれぞれWIDTH(幅)とHEIGHT(高さ)で指定できる．指定する数字の単位はピクセル（画素）数である．例えばHTMLファイル中で，

<TABLE BORDER="1" WIDTH="300">
    <TR><TH>身長</TH><TD> 178cm</TD></TR>
    <TR><TH>体重</TH><TD>76.5kg</TD></TR>
</TABLE>

と記述すれば，

身長 178cm
体重 76.5kg

と表示される．

枠の太さ指定

外枠の太さやセル間の空白はそれぞれBORDERとCELLSPACINGで指定する．例えば，

<TABLE BORDER="8" CELLSPACING="8">
    <TR><TH>身長</TH><TD> 178cm</TD></TR>
    <TR><TH>体重</TH><TD>76.5kg</TD></TR>
</TABLE>

と記述すれば，

身長 178cm
体重 76.5kg

のように立体的に表示される．

表内のデータ指定と文字装飾

表内のデータの文字を強調したいときには，HTMLの基礎で説明した<B>タグや<STRONG>タグなど，通常の文字装飾用のタグを用いることができる．

また，表のセル内は<IMG>タグのインライン画像を指定できるし，リンクを張ることもできる．

また，セル内で自由に位置合せをすることもできる．画像cube.gif(HTMLファイルと同じディレクトリ内に存在したとして)を，セル内で位置合せする例を示す．

<TABLE BORDER="3">
    <TR>
        <TH></TH>
        <TH>左揃え</TH>
        <TH>センタリング</TH>
        <TH>右揃え</TH>
    </TR>
    <TR>
        <TH>上</TH>
        <TD ALIGN="LEFT"   VALIGN="TOP"><IMG SRC="cube.gif"></TD>
        <TD ALIGN="CENTER" VALIGN="TOP"><IMG SRC="cube.gif"></TD>
        <TD ALIGN="RIGHT"  VALIGN="TOP"><IMG SRC="cube.gif"></TD>
    </TR>
    <TR>
        <TH>中央</TH>
        <TD ALIGN="LEFT"   VALIGN="MIDDLE"><IMG SRC="cube.gif"></TD>
        <TD ALIGN="CENTER" VALIGN="MIDDLE"><IMG SRC="cube.gif"></TD>
        <TD ALIGN="RIGHT"  VALIGN="MIDDLE"><IMG SRC="cube.gif"></TD>
    </TR>
    <TR>
        <TH>下</TH>
        <TD ALIGN="LEFT"   VALIGN="BOTTOM"><IMG SRC="cube.gif"></TD>
        <TD ALIGN="CENTER" VALIGN="BOTTOM"><IMG SRC="cube.gif"></TD>
        <TD ALIGN="RIGHT"  VALIGN="BOTTOM"><IMG SRC="cube.gif"></TD>
    </TR>
</TABLE>

このように記述すると，

左揃え センタリング 右揃え
上
中央
下

と表示される．

複数セルの結合(大きなセルの作り方)

複数の行や列にまたがったセルを設定するにはCOLSPANとROWSPANを<TH>や<TD>タグで用いる．例えば以下の例の通り．

<TABLE BORDER="1">
    <TR><TH COLSPAN="4">学生数</TH></TR>
    <TR><TD>1年</TD><TD>2年</TD><TD>3年</TD><TD>4年</TD></TR>
    <TR><TD>200</TD><TD>200</TD><TD>200</TD><TD>200</TD></TR>
</TABLE>

と記述すると，

学生数
1年 2年 3年 4年
200 200 200 200

と実際の画面では表示される．「学生数」というセルが４つのセルにまたがっていることが確認できる．これは Excel のセルの結合と類似している．

セルの背景色指定

<BODY>で色指定すると，表全体を着色できた．

セルひとつひとつを個別に着色するには，BGCOLORを用いて，BODYの時と同じように背景色を指定できる．例えば，先ほどの結合された見出しセルの背景色を "#ffff00"（黄色）で

<TABLE BORDER="1">
    <TR><TH COLSPAN="4" BGCOLOR="#ffff00">学生数</TH></TR>
    <TR><TD>1年</TD><TD>2年</TD><TD>3年</TD><TD>4年</TD></TR>
    <TR><TD>200</TD><TD>200</TD><TD>200</TD><TD>200</TD></TR>
</TABLE>

と指定すると，

学生数
1年 2年 3年 4年
200 200 200 200

と表示される．もちろん，これはTD内に記述してセル単位，TR内に記述して行単位でも指定指定できる．色の指定は，HTMLの基礎でページ全体の色指定で説明したのと同様に，光の３原色を16進数で指定する．

表の見出し

表に見出しを付ける場合には，<caption>タグを用いる．

<TABLE BORDER="1">
    <caption>表1 ●●学科の学生数</caption>
    <TR><TH COLSPAN="4" BGCOLOR="#ffff00">学生数</TH></TR>
    <TR><TD>1年</TD><TD>2年</TD><TD>3年</TD><TD>4年</TD></TR>
    <TR><TD>200</TD><TD>200</TD><TD>200</TD><TD>200</TD></TR>
</TABLE>
表1 ●●学科の学生数
学生数
1年 2年 3年 4年
200 200 200