HTML4.0の基本

テーブルの基本

2009年8月6日

テーブルの基本

 テーブルってやつは、とにかく複雑だ。困ったことに、ネットスケープとエクスプローラで表示が違っていたり、こいつのおかげでレイアウトが崩れることがあるんだ。
 テーブルの説明は結構ボリュームがあるんで、3回に分けて説明するよ。

テーブルタグ

<TABLE></TABLE>

テーブル作成に関する全てのタグを<TABLE></TABLE>タグで囲みます。囲まれる部分をテーブルコンテンツといいます。コンテンツだけ書き入れても<TABLE>タグがないと,表組は現れません。まずこのタグを記入してください。

<TABLE>テーブルコンテンツ</TABLE>

表は、以下の要素から構成されています。

テーブルヘッダ <TH>
(Table Header):表の横縦列の見出しに使用します。テキストは太字で中央寄せになります。
テーブルセル <TD>
(Table Data):表のデータに使用します。
テーブルの段区切り <TR>
(Table Row):表の横列を指定します。
表題 <CAPTION>
表のタイトルに使用します。

<TABLE border="1" cellpadding="5">
  <TR>
    <TH>テーブルヘッダ</TH>
    <TH>テーブルヘッダ</TH>
    <TH>テーブルヘッダ</TH>
  </TR>
  <TR>
    <TH>テーブルヘッダ</TH>
    <TH>テーブルヘッダ</TH>
    <TH>テーブルヘッダ</TH>
  </TR>
  <TR>
    <TH>テーブルヘッダ</TH>
    <TH>テーブルヘッダ</TH>
    <TH>テーブルヘッダ</TH>
  </TR>
  <TR>
    <TD colspan=3>テーブルデータ(3列分)</TD>
  </TR>
  <CAPTION>表題</CAPTION>
</TABLE>

表題
テーブルヘッダ テーブルヘッダ テーブルヘッダ
テーブルデータ テーブルデータ テーブルデータ
テーブルデータ テーブルデータ テーブルデータ
テーブルデータ(3列分)

横方向の枠を作る

<TD></TD>

(Table Data):<TD>~</TD>に表データを入れます。 各横列はセルの数が同一になるようにしなければなりませんが、数が合わなけ ればそのデータセルはブランクになります。データは左寄せ (ALIGH=left)、縦に中央(VALIGN=middle)に設定されます。TRとTDで位置が指定してあった場合、TDで指定 した方が優先されます。

<TABLE>
<TD>1列</TD><TD>2列</TD><TD>3列</TD>
</TABLE>

1列 2列 3列


各枠の中に入るテキストの長さに応じてテーブルは自動的に伸び縮みします。

テーブルの段区切り

<TR>

(Table Row):テーブルの段を区切ります。<TR>は終了タグがなく,区切りたいテーブルデータの後ろに置くだけでじっこうされます。<BR>を使う要領でしようするといいでしょう。
 横列を複数またがせる場合、rowspan属性を使用します。

次の例は2列3段のシンプルなものです。ごらんのように<TD></TD>を1行にまとめ,<TR>を行間に入れればわかりやすいHTMLテキストとなります。
以下に簡単な例を上げます。

<TABLE>
<TD>1段目1列</TD><TD>1段目2列</TD><TD>1段目3列</TD>
<TR>
<TD>2段目1列</TD><TD>2段目2列</TD><TD>2段目3列</TD>
</TABLE>

この出力結果は

1段目1列 1段目2列 1段目3列
2段目1列 2段目2列 2段目3列

というようになります。


ヘッダとタイトルの付け方

ヘッダをつけるタグ

<TH></TH>

(Table Header):通上表の最左列と最上列に置かれ,行や列の見出しとなります。
使い方は<TD>と同じです。<TH>~</TH>に表のヘッダ項目を入れます。この部分は 太文字(ボールド)体になり、中央寄せになります。


<TABLE>
  <TR>
    <TH>ヘッダ1</TH>
    <TH>ヘッダ2</TH>
    <TH>ヘッダ3</TH>
  </TR>
  <TR>
    <TD>内容</TD>
    <TD>内容</TD>
    <TD>内容</TD>
  </TR>
  <TR>
    <TD>内容</TD>
    <TD>内容</TD>
    <TD>内容</TD>
  </TR>
</TABLE>

ヘッダ1 ヘッダ2 ヘッダ3
内容 内容 内容
内容 内容 内容

表題をつけるタグ

<CAPTION></CAPTION>

これは表のタイトル(表題)を表します。このタグはTABLEタグの中に置かなければなりません。どこに置いてもいいのですが、列要素タグの中に置けません。
デフォルトでは表題は表の上に表示されますが、下に置きたい場合、<CAPTION ALIGN=bottom>~ </CAPTION>と設定します。なお、表題は必ず中央寄せされます。

<TABLE>
  <TR>
    <TH>ヘッダ1</TH>
    <TH>ヘッダ2</TH>
    <TH>ヘッダ3</TH>
  </TR>
  <TR>
    <TD>内容</TD>
    <TD>内容</TD>
    <TD>内容</TD>
  </TR>
  <TR>
    <TD>内容</TD>
    <TD>内容</TD>
    <TD>内容</TD>
  </TR>
  <CAPTION>表題</CAPTION>
</TABLE>

この出力結果は,

表題
ヘッダ1 ヘッダ2 ヘッダ3
内容 内容 内容
内容 内容 内容

というようになります。

次に表題を下に表示します。

<table>
<caption valign="bottom">表題</caption>
  <tr>
    <th>ヘッダ1</th>
    <th>ヘッダ2</th>
    <th>ヘッダ3</th>
  </tr>
  <tr>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
  </tr>
  <tr>
    <td>内容</td>
    <td>内容</td>
    <td>内容</td>
  </tr>
</table>

この出力結果は、

表題
ヘッダ1 ヘッダ2 ヘッダ3
内容 内容 内容
内容 内容 内容

というように表示されます。バランスを考えて表題の文字をFONTタグを使ってやや小さめにしています。

関連記事

Comment

コメントを残す

メールアドレスが公開されることはありません。

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。