オンラインテキスト目次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> 見ての通り、表部分は文章中の文字の１部として （それも大きな文字として）文中に登場.. |
||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 表示結果 |
これらはどれも同じ『表』を表しているが、その出現の仕方に差がある。
|
表の枠を表示するために<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> 見ての通り、表部分は文章中の文字の１部として （それも大きな文字として）文中に登場.. |
||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 表示結果 |
これらはどれも同じ『表』を表しているが、その出現の仕方に差がある。
最初の表は tabular 環境だけを使って表を書いたものである。
見ての通り、表部分は文章中の文字の１部として（それも大きな文字として）文中 に登場.. |
表を書くためには、一般的には表の行（横列:row）と行（縦列:column）のそれぞれの表要素を指定する。 行項目の並びとは表を構成する横一列の項目並びとする。 M行N列の表とは、表がM行の行並びからなり縦列ごとのにN個の項目があるような次の構造を持つもの。
| 1列目↓ | 2列目↓ | ．．．． | N列目↓ | |||||||||||||||||
| 1行目→ |
|
|||||||||||||||||||
| 2行目→ | ||||||||||||||||||||
| ..... | ||||||||||||||||||||
| M行目→ | ||||||||||||||||||||
HTMLでは、表の行要素(Table Row elements)をそれぞれの行の要素並びとして、次のように書く：
| 書 式 | 説 明 |
| <tr>各行の要素並び</tr> | 行の項目並びの指定 |
行の要素並びとは表の行要素群を横に並べたもので、表要素は次のように表見出形式（Table Header：太字で表される）と項目データ形式（Table Data）の2つの表わし方がある。
| 書 式 | 説 明 |
<th>表見出</th>
|
表見出形式 |
<td>項目データ</td> |
表データ形式 |
表タグ<caption>、<tr>、<th>、<td>には表要素の配置に関するオプション aling="位置"がある。
| 書式 | 効果 | |
|---|---|---|
| キャプション | <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>
|
||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 表示結果 |
|
少し複雑な例を紹介しよう。
表要素を縦または横につなげて（ぶち抜いて）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> |
||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 表示結果 |
|
||||||||||||||||||||||||||||