オンラインテキスト目次
Webページの作成目次

mizutani@rsch.tuis.ac.jp
参考書『インターネット時代のコンピュータリテラシー』(水谷正大、共立出版)

表組みの方法

ここで紹介する表組の方法はLaTeXでの表組での表組に対応している。
Webページ内に表を作成するときには、 などが問題となる。

表組とその配置例

以下の例を観察して表組みの方法を理解しよう。 表はタグ <table>...</table> を使って書く。

HTML記述
これらはどれも同じ『表』を表しているが、その出現の仕方に差がある。
最初の表は tabular 環境だけを使って表を書いたものである。
<p>
<table border="1">
<tr>
<td>国名</td> <td>人口(百万人)</td> <td>首都</td>
</tr>
<tr>
<td>日本</td> <td>120</td> <td>東京</td>
</tr>
<tr>
<td>フランス</td> <td>50</td> <td>パリ</td>
</tr>
<tr>
<td>アメリカ合衆国</td> <td>200</td> <td>ワシントン</td>
</tr>
</table>
</p>
見ての通り、表部分は文章中の文字の1部として
(それも大きな文字として)文中に登場..
表示結果 これらはどれも同じ『表』を表しているが、その出現の仕方に差がある。

国名 人口(百万人) 首都
日本 120 東京
フランス 50 パリ
アメリカ合衆国 200 ワシントン

見ての通り、表部分は文章中の文字の1部として(それも大きな文字として)文中 に登場..

表のを表示するために<table>タグのオプションとして border="枠の値" を指定していることに注意する。

通常、このような表の使い方はせず、見やすくするために次のように表を作成するのが普通である。 次の表では、表にタグ<caption>...</caption>を使って表の説明文(caption)が添えられ、また、表見出しのためのタグ<th>...</th>を使っていることに注意する。

HTML記述
これらはどれも同じ『表』を表しているが、その出現の仕方に差がある。
最初の表は tabular 環境だけを使って表を書いたものである。
<P>
<table border>
<caption>国の人口とその首都</caption>
<tr>
<th>国名</th> <th>人口(百万人)</th> <th>首都</th>
</tr>
<tr>
<td>日本</td> <td>120</td> <td>東京</td>
</tr>
<tr>
<td>フランス</td> <td>50</td> <td>パリ</td>
</tr>
<tr>
<td>アメリカ合衆国</td> <td>200</td> <td>ワシントン</td>
</tr>
</table>
<p>
見ての通り、表部分は文章中の文字の1部として
(それも大きな文字として)文中に登場..
表示結果 これらはどれも同じ『表』を表しているが、その出現の仕方に差がある。 最初の表は tabular 環境だけを使って表を書いたものである。

国の人口とその首都
国名 人口(百万人) 首都
日本 120 東京
フランス 50 パリ
アメリカ合衆国 200 ワシントン

見ての通り、表部分は文章中の文字の1部として(それも大きな文字として)文中 に登場..

表の作成

表を書くためには、一般的には表の行(横列:row)と行(縦列:column)のそれぞれの表要素を指定する。 行項目の並びとは表を構成する横一列の項目並びとする。 M行N列の表とは、表がM行の行並びからなり縦列ごとのにN個の項目があるような次の構造を持つもの。

1列目↓2列目↓....N列目↓
1行目→
項目(1,1) 項目(1,2) ..... 項目(1,N)
項目(2,1) 項目(2,2) .... 項目(2,N)
.... ............
項目(M,1) 項目(M,2) .... 項目(M,N)
2行目→
.....
M行目→

HTMLでは、表の行要素(Table Row elements)をそれぞれの行の要素並びとして、次のように書く:

表の行の表し方
書 式説 明
<tr>各行の要素並び</tr> 行の項目並びの指定

行の要素並びとは表の行要素群を横に並べたもので、表要素は次のように表見出形式(Table Header:太字で表される)と項目データ形式(Table Data)の2つの表わし方がある。

表要素の表わし方
書 式説 明
<th>表見出</th> 表見出形式
<td>項目データ</td> 表データ形式

表タグの位置オプション

表タグ<caption><tr><th><td>には表要素の配置に関するオプション aling="位置"がある。

表項目のalign指定
書式 効果
キャプション <caption align="top"> 表の上部中央に
<caption align="bottom"> 表の下部中央に
列要素並び <tr align="left"> 行の要素群を左寄せ
<tr align="center"> 行の要素群を中央に
<tr align="right"> 行の要素群を右寄せ
表見出 <th align="left"> 表見出を左寄せ
<th align="center"> 表見出を中央に
<th align="right"> 要素を右寄せ
表データ <td align="left"> 表見出を左寄せ
<td align="center"> 要素を中央に
<td align="right"> 要素を右寄せ

作表の例

キャプションが表下部にある次の表は次のように書く。

HTML記述
<table border="1">
<caption align="botton">簡単な表</caption>
<tr> <th>項目A</th> <th>項目B</th> ..... <th>項目N</th> </tr>
<tr> <td>項目(1,1)</td> <td>項目(1,2)</td> ..... <td>項目(1,N)</td> </tr>
<tr> <td>項目(2,1)</td> <td>項目(2,2)</td> ..... <td>項目(2,N)</td> </tr>
<tr> .. .. .... </tr>
<tr> <td>項目(M,1)</td> <td>項目(M,2)</td> ..... <td>項目(M,N)</td> </tr>
</table>
表示結果

簡単な表
項目A項目B。。。。項目N
項目(1,1)項目(1,2)。。。。項目(1,N)
項目(2,1)項目(2,2)。。。。項目(2,N)
。。。。。。。。
項目(M,1)項目(M,2)。。。。項目(M,N)

少し複雑な例を紹介しよう。 表要素を縦または横につなげて(ぶち抜いて)1つの表要素とすることができる。 「ぶち抜き」の部分が最初に登場する表要素<th><td>に行(横)方向のぶち抜き要素数をオプションcolspan、縦(列)方向のぶち抜き要素数をrowspanで指定する。

書 式意 味
<th colspan="数"> 横方向に"数"だけぶち抜く
<td colspan="数">
<th rowspan="数"> 縦方向に"数"だけぶち抜く
<td rowspan="数">

ぶち抜きの例を次に示す。

HTML記述
<table border="1">
<tr><th colspan="3">シュークリームの材料</th></tr>
<tr><th align=center>品名</th> <th align=center>量</th> <th align=center>用途</th></tr>
<tr><td>バター</td> <td>100g</td> <td rowspan="4">シュー生地</td></tr>
<tr><td>塩</td> <td>2g</td></tr>
<tr><td>小麦粉</td> <td>100g</td></tr>
<tr><td>卵</td> <td>3個</td></tr>
<tr><td>卵黄身</td> <td>4個分</td> <td rowspan="6">カスタードクリーム</td></tr>
<tr><td>砂糖</td> <td>100g</td></tr>
<tr><td>小麦粉</td> <td>50g</td></tr>
<tr><td>ミルク</td> <td>500cc</td></tr>
<tr><td>バニラエッセンス</td> <td>少々</td></tr>
<tr><td>洋酒</td> <td>少々</td></tr>
</table>
表示結果

シュークリームの材料
品名 用途
バター 100g シュー生地
2g
小麦粉 100g
3個
卵黄身 4個分 カスタードクリーム
砂糖 100g
小麦粉 50g
ミルク 500cc
バニラエッセンス 少々
洋酒 少々


Webページの作成目次
オンラインテキスト目次

mizutani@rsch.tuis.ac.jp