Chapter2：一歩進んだテーブルの使い方

■テーブルに取り組む前に

一番基礎になる簡単なテーブルの事は以前触れましたが慣れてくればいろいろ複雑な事もできて便利です。こちらではそういった事にほんの少しだけ触れたいと思います。

ただ中級者以上になっても意外と落とし穴になりがちなのがこのテーブルです。いえ。ほんとうに。ちょっとした事で大変な事になったりしているページをよく見かけます。逆にいえばそれだけ利用頻度が高いともいえる訳ですね。

そうなので初心者の方はとりあえず一度に覚えようとせず（大変でしょうしね）慌てずのんびりと余裕を持っていきまっしょい。

■基本的な構造と実際の書き方

では一番基本的な構造と実際の書き方を確認しておきましょう。


<table>

<tr>

<td>
これは構造を見る為の簡単な例です。
</td>

</tr>

</table>

<table>はテーブル全体に。次の<tr>は横1列に。その中の<td>はセル1つにそれぞれ該当します。文字（文章）が入れられるのは基本的にセルの中だけ（この場合だと<td>から</td>で囲まれた間だけ）と覚えておいてください。原則として<tr>から</tr>または<table>から</table>の中に直接文字や一般的な他のタグ等を入れる事は出来ません。

基本的にはこの「入れ子状のタグの構成（順番）」は変わりませんので早めに覚えておいてくださいね。実際に書く時は下記のようになります。

■table.html - 偽テキストエディタ

ファイル(F)　編集(E)　書式(O)　ヘルプ(H)　


<html>

  <head>

    <title>テーブルの練習</title>

  </head>

  <body>
 

    <p>テーブルの練習です。</p>
 

    <table border="1">

      <tr>

        <td>これは構造を見る為の簡単な例です。</td> 

      </tr>

    </table>
 

  </body>

</html>

今までと同じ事なのでもう分かりますね。ただ今までのタグより少し複雑なのでテーブルに気をとられてHTML文書の基本構造にそって書く事を忘れないように気をつけましょう。では簡単な解説を加えつつ例をあげていきますのでいろいろ試してみてください。

■縦横2列ずつのテーブル

■3-A：通常のデータセルのみの構成

縦横に2セル（文字の入っている枠1つが1セルです）のテーブルです。ここからは少しずつ覚えることが増えますけれど慌てず落ち着いていきましょう。

1	2
A	B


<table border="1" width="300">

 <tr>

  <td width="50%">1</td>

  <td width="50%">2</td>

 </tr>

 <tr>

  <td>A</td>

  <td>B</td>

 </tr>

</table>

ではここで少し説明です。

「border="1"」は境界線の太さを指定しています。何も指定しない場合は「border="0"」と同じ事になるので線は表示されません。「2」や｢5｣のように数値を指定しますと太さが変わります。

「width="300"」は「テーブルの横幅は300ピクセルにしてね」とゆう意味です。その後の「td」の中で「width="50%"」とゆうのが出てくるので分かると思いますがこの幅は全体の割合をパーセントで指定する事も出来ます。

■3-B：テーブルにヘッダを含む構成

header-1	header-2
data-A	data-B


<table border="1" width="300">

 <tr>

  <th width="50%">header-1</th>

  <th width="50%">header-2</th>

 </tr>

 <tr>

  <td>data-A</td>

  <td>data-B</td>

 </tr>

</table>

「th」という部分が出てきましたね。これは「このセルはヘッダですよ」と宣言しています。見かけが若干変わりますが「見かけを変える目的」では使わないようにしましょう（見かけだけなら他のタグ等で変えましょう）。
意味以外は「td」と同じように使えます。

またこの「td」や「th」は「tr」というタグで必ず挟まれていますよね。この「tr」で挟まれた部分に「ここからここまでがテーブルの中で横1列になりますよ」という意味を持たせるタグです。これらの入れ子状のタグの組み合わせの意味は使っていくうちに自然に（習慣として）覚えると思います。読んでいて「難しいなあ」と感じても気にしなくて平気だと思います。

■ひとつのセルで複数のセルをまたぐ

テーブル内のセルは1つのセルで複数のセルをまたぐ事が出来ます。ここではその初歩的な例を説明を交えつついくつか見てみましょう。

■4-A：セルに橋（はし）を架けます。

colspan="2" を使って左右2つのセルに橋を架けました
右	左


<table border="1" width="400">

  <tr>

    <td colspan="2">

      colspan="2"  を使って左右2つのセルに橋を架けました

    </td>

  </tr>

  <tr>

    <td width="50%">右</td>

    <td width="50%">左</td>

  </tr>

</table>

解りやすいように色を変えてありますのですぐ気が付きますね。ここで橋を架ける役目を果たしているのは<td>の中に書かれているcolspan="2"の部分です。何も指定しなかった場合は「colspan="1"」になります。

今回は2つのセルに橋を架けるので「colspan="2"」となっていますがこの数字は「橋を架けたいセルの数」によって変える事が出来ます。これは次に紹介する上下に梯子をかける場合も同じですので覚えておきましょう。

■4-B：セルに梯子（はしご）を架けます。

rowspan="2" を使って上下のセルに梯子をかけました。	上
	下


<table border="1" width="300">

  <tr>

    <td rowspan="2" width="50%">

      rowspan="2" を使って上下のセルに梯子をかけました。

    </td>

    <td width="50%">上</td>

  </tr>

  <tr>

    <td width="50%">下</td>

  </tr>

</table>

先ほどと同じように「rowspan="2"」が梯子を架ける役目をしています。何も書かなかった場合は通常「rowspan="1"」と解釈されます。梯子を架けるセルを増やしたい場合は橋を架ける場合と同じように中の数字を変化させてあげる事になります。

またこれらは同時に組み合わせて使うことも出来ます。
例えば<td colspan="3" rowspan="2">のように書けば「セル3つに橋を架けつつ同時にセル2つに梯子も架けますよ」とゆう事になります。とはゆいましても最初は難しいと思いますのであまり複雑に考えず必要に応じて簡単なものから少しずつ覚えていったのでよいと思います。

■属性の追加指定いろいろ

途中で少し触れたような「border="1"」のような「タグの中で追加指定する項目」は「属性」と言われます。ここではその属性を使った簡単な指定とそれに伴う変化を一部紹介します。興味をもたれたらご自分でいろいろ値を変えて試してみてくださいね。いろいろな発見があって楽しめると思いますよ。

■「border="値"」のいくつかの例です。

境界は1です。
◆実際のタグ◆


<table border="1">

 <tr>

  <td>

   境界は1です。

  </td>

 </tr>

</table>

境界は6です。
◆実際のタグ◆


<table border="6">

 <tr>

  <td>

   境界は6です。

  </td>

 </tr>

</table>

境界は12です。
◆実際のタグ◆


<table border="12">

 <tr>

  <td>

   境界は12です。

  </td>

 </tr>

</table>

■「bgcolor="値"」（テーブル・セルの色）の指定。

これは他の属性と違い「table・tr・th・td」の全てで個別指定可能です。

背景を白くしました。
◆実際のタグ◆


<table border="1" bgcolor="white">

 <tr>

  <td>

   背景を白くしました。

  </td>

 </tr>

</table>

ここは赤色です。	ここは緑色です。
ここは青色です。
ここは白色です。 ◆実際のタグ◆ `<table border="1" bgcolor="white"> <tr> <td bgcolor="red"> <font color="white">ここは赤色です。</font> </td> <td bgcolor="green"> <font color="white">ここは緑色です。</font> </td> </tr> <tr bgcolor="blue"> <td colspan="2"> <font color="white">ここは青色です。</font> </td> </tr> <tr bgcolor="white"> <td colspan="2">ここは白色です。</td> </tr> </table>`

■テーブルに関する備考

■FC2WEBでの注意点

ここは少しだけ難しいお話になるかもしれません。 HTMLではスタイルシート（CSS）というものを組み合わせて見かけを調節することが出来ます。このスタイルシートを使う場合に少し覚えておいたほうがいい事があります。 FC2WEBの広告はテーブルを使った物になっています（最終確認：2003年4月現在）。
ですのでテーブル要素自体にスタイルシートを適用させようとすると表示が崩れてしまう事があります。これを避けるためにはますテーブル自体にそれぞれ適当なクラスを与えます。その後でそのクラスに対してスタイルシートを適用すればより安全のようです。特に覚える必要はありませんが参考までに。

■いくつかの実例（古いんだけど）

少しくらいは参考になるかもしれないと思って実際に使ったファイルを置いてみました。興味のある人はクリックすると新しいウインドウで開きます。

サンプル1：Processor Module Data Seet
こちらはテーブル本来の使い方です。多少複雑に見えるかもしれませんが実際はこちらでご紹介した方法の組み合わせで出来上がっています。
（*2000年頃に作った古い物で内容も（間違ってはいませんが）古いです。）

サンプル2：テーブルでレイアウトしたガイダンスページ
こちらはテーブル本来の使い方から逸脱した使い方です。このようにテーブルをレイアウトに使うのはホントはいくないのです。
（*実情（互換性）の問題でレイアウトに使う人が多いのではと思います。）

■お疲れ様でした

今回はテーブルの使い方について少し触れました。今までと違って詳細な説明は省いて実際の例を書いてみましたがいかがでしたか？内容を省略した事によりすっきりしたぶんだけ本当の初心者の方には逆に判り辛くなってしまったかもしれません。もしここを見て判りづらいと感じた場合はもう一度基礎編をおさらいしてみてくださいね。

表紙へ

SEO		[PR] 爆速!無料ブログ無料ホームページ開設無料ライブ放送