STEP6: 表を入れてみよう！

表を入れてみます。 HTML 4 ではかなり複雑な表 (TABLE) を作ることが出来ます。

最も単純な表でもかなり複雑な要素構造を持ちますが、順を追って説明します。ゆっくり理解するようにして下さい。

表の基本構造

first.html をテキストエディタで開きましょう。

<body> から </body> までの間に、次のように記述しましょう；

...省略...
<h3>TABLE 要素</h3>
<table>
<tr>
  <th>要素名</th><th>説明</th>
  <th>タグの省略可能性</th>
</tr>
<tr>
  <th>TABLE</th><td>表を表す要素</td>
  <td>開始タグ必須、終了タグ必須</td>
</tr>
<tr>
  <th>TR</th><td>行を表す要素</td>
  <td>開始タグ必須、終了タグ省略可</td>
</tr>
<tr>
  <th>TD</td><td>行内でデータが入る桝目（セル）を表す</td>
  <td>開始タグ必須、終了タグ省略可</td>
</tr>
<tr>
  <th>TH</td><td>データの見だしが入るセルを表す</td>
  <td>開始タグ必須、終了タグ省略可</td>
</tr>
</table>

記述できたら、「上書き保存」してください。

first.html をブラウザで開いて下さい。先ほど開いたままになっている場合は、「更新」 (reload) すれば結構です。

次のように表示されれば成功です；

【表示例】

TABLE 要素

要素名	説明	タグの省略可能性
TABLE	表を表す要素	開始タグ、終了タグ必須
TR	行を表す要素	開始タグ、終了タグ省略可
TD	行内でデータが入る桝目（セル）を表す	開始タグ、終了タグ省略可
TH	データの見だしが入るセルを表す	開始タグ、終了タグ省略可

これが最も単純な表の構造です。それでも、 TABLE 要素の内部構造は、かなり複雑に見えます。順を追って説明しましょう。

ここで現れた要素は、 TABLE, TR, TH, TD の四つです；

表を意味する要素は TABLE 要素です。
```
<table>
...
</table>
```

表は行に分けられます。各行を TR 要素 (TABLE Row) で表します。

<table>
  <tr>
    ...一行目...
  </tr>
  <tr>
    ...ニ行目...
  </tr>
  <tr>
    ...三行目...
  </tr>
</table>

行内の桝目をセルと呼び、各セルは TD 要素 (TABLE Data) で表します。

<table>
  <tr>
    <td>(1,1)</td><td>(1,2)</td>
  </tr>
  <tr>
    <td>(2,1)</td><td>(2,2)</td>
  </tr>
  <tr>
    <td>(3,1)</td><td>(3,2)</td>
  </tr>
</table>

表示例
(1,1)	(1,2)
(2,1)	(2,2)
(3,1)	(3,2)

必要が有れば、各セルに見出しをつけます。見出しは TH 要素 (TABLE Headings) で表します。

<table>
  <tr>
    <th>一行目</th><td>(1,1)</td><td>(1,2)</td>
  </tr>
  <tr>
    <th>ニ行目</th><td>(2,1)</td><td>(2,2)</td>
  </tr>
  <tr>
    <th>三行目</th><td>(3,1)</td><td>(3,2)</td>
  </tr>
</table>

表示例
一行目	(1,1)	(1,2)
ニ行目	(2,1)	(2,2)
三行目	(3,1)	(3,2)

次のように表示されていれば成功です；

一行目	(1,1)	(1,2)
ニ行目	(2,1)	(2,2)
三行目	(3,1)	(3,2)

HTML では、表のセル (TH, TD) は行 (TR) に属していることになります。

罫羅線を表示

表の罫線、羅線を表示する様に設定できます；

<table border="4">
...省略...
</table>

border 属性の値が罫羅線の太さです。次のように表示されます；

一行目	(1,1)	(1,2)
ニ行目	(2,1)	(2,2)
三行目	(3,1)	(3,2)

セルの結合

表では隣接するセルを結合して一つのセルにすることが良くあります。

一行目	(1,1), (1,2)
ニ行目	(2,1)	(2,2), (3,2)
三行目	(3,1)	(2,2), (3,2)

横方向に隣接するセルを結合する場合は colspan 属性、縦方向は rowspan 属性を用います。上の表示例の HTML は次のようになっています。

<table border="4">
  <tr>
    <th>一行目</th><td colspan="2">(1,1), (1,2)</td>
  </tr><tr>
    <th>ニ行目</th><td>(2,1)</td><td rowspan="2">(2,2), (3,2)</td>
  </tr><tr>
    <th>三行目</th><td>(3,1)</td>
  </tr>
</table>

表の配置

こうして作った TABLE を、前後の要素に対してどこに配置するか指定することが出来ます。

ページの水平方向で中央に配置; align="center"
ページの左端に配置し、後続の要素を表の右側に表示; align="left"
ページの右端に配置し、後続の要素を表の左側に表示; align="right"

ニ番目と三番目は、「 TABLE をフロート（浮動化）する」と云います。具体例を見てみましょう；

<table align="left">
...省略...
</table>

これが「左にフロート」した表の例です。

一行目	(1,1)	(1,2)
ニ行目	(2,1)	(2,2)
三行目	(3,1)	(3,2)

フロートした要素に後続する内容は、フロートした要素の脇に流れ込みます。フロート要素の縦の長さが続く限り、流れ込みも続き、フロート要素の下端に至って初めて流れ込みが終了します。

流れ込みを途中で終了させる場合は、 BR 要素に clear 属性を与えます。左にフロートした要素に対する流れ込みの禁止は <br clear="left"> 、右にフロートした要素に対しては、 <br clear="right"> を記述します。

HMTL 4 では、より詳細な情報を表に与えることが出来ますが、以上だけでも、基本的な表は作れると思います。

ページ・レイアウト

TD 要素の中には、単純なテキストから、任意の要素にいたるまで、何でも内容に記述することが出来ます。そのため、大きな表を利用して、ページを多段にレイアウトするのにも利用されます。

ただし、この利用法はクロスブラウザの見地からは推奨できません。出来るだけ避けるようにした方が安全です。

HTML, CSS 作成入門

このサイトでは、「ホームページ」を作成するために、
HTML と CSS に付いて解説します。

What's New!

16th/Oct.

「HTML スピードラーニング」を更新しました。
「CSS 入門」を更新しました。

ToC

HTML 入門
CSS 入門
Tips
30 分入門

LINKS

Yahoo!
Google
goo
W3C

このページは SUGAI,M が作成しています。御意見、御感想などがございましたら、是非御願い致します。

レイアウト目的で表を利用する場合は、音声読み上げ式のブラウザやテキストブラウザに迷惑のかからないように注意する必要があります。これらのブラウザでは、上の行の左から右にセル内容を読み上げたり表示したりします。ですから、重要な内容を左に、補足的な内容は右に配置するようにしてください。逆にすると、本文が随分下の方に表示されてしまいます。

この例では表である事を強調するために border 属性でボーダーを表示しましたが、実際にはボーダーを表示する必要は有りません。

このようにページを多段組にすると、一見できる情報量が増えますので、閲覧者には利用しやすくなります。

その一方で、 TABLE 要素は表示に時間が掛かり勝ちですので、読み込み速度が遅くなる可能性があります。特に、「行数・セルが多い TABLE 」、「 TABLE の中でさらに TABLE が記述されている」などの場合には、回線速度によってはストレスを与えるるほど遅くなる可能性があります。

これを回避するには、「TABLE を幾つかに分ける」、「 TABLE の中で TABLE を利用するような場合は出来るだけ最初の TABLE のセルで実現する」、「 TABLE の代わりに CSS を利用する」などの方法が考えられます。

レイアウト目的で巨大なテーブルを利用する場合には、あまり複雑になり過ぎないように注意した方が安全でしょう。上に挙げた例程度ならば、全く問題は生じませんし、読み込み速度の低下も体験できない程度です。

previous (P) next (T) contents (C)

FC2>		モビット