|
テーブルを作ってみましょう。
解説書によっては 「表」 と表現されていますが、
どちらも同じものだと考えてください。
<table> 〜 </table> で囲まれた部分は そこがテーブルになっています。
ちょっと下のテーブルを見てください。
今回は わかりやすくするために テーブルに枠線を入れています。
HTMLソースはこんな感じになっています。
<table border="1">
<tr>
<td>セル１</td>
<td>セル２</td>
</tr>
<tr>
<td>セル３</td>
<td>セル４</td>
</tr>
</table> |
ホームページビルダーでテーブルを配置すると
<Tbody> というタグも挿入されます。
これは テーブルのボディという意味が
あります。
テーブルのタグは 本来 <Thead> <Tfood> <Tbody> という順序で
記述するように定義されていて 今後 HTMLに正式に対応したブラウザが
登場すると ヘッダ と フッダ部分は固定されて ボディの部分は
スクロールさせるといったことができるようになるそうです。
では ひとつひとつ見ていきましょう。
● 行と列
ホームページ作成ソフトで テーブルを指定すると
行 とか 列 といった言葉がでてきます。
慣れてないうちは どっちが行で どっちが列なのか
とまどってしまうかもしれませんが、
縦に○行 横に○列 というふうに覚えておけば
間違うことはないと思います。
縦の行にあたるタグは <tr> 〜 </tr>で表します。
● セル
表のそれぞれのマス目のことを セル といいます。
この部分には 文字や絵を入れることができます。
セルは <td> 〜 </td>で表します。
<tr> 〜 </tr>の行の中に
<td> 〜 </td>が入って列になっているわけです。
● テーブルタグの基礎の基礎
まず 縦に２行 横に１列のテーブルを作ります。
この場合 縦２行に それぞれセルが１つずつ並んでいますね
<table border="1">
<tr>
<td>セル１</td>
</tr>
<tr>
<td>セル２</td>
</tr>
</table>
今回の場合は <tr> 〜 </tr> が２つ入って
縦に２行になっているのがわかります。
横の列は １つですので <tr> の中に
<td> 〜 <td> は それぞれ１つずつ入っているのがわかりますね。
次に 縦１行 横２列のテーブルを作ってみます。
HTMLソースはこんな感じになります。
<table border="1">
<tr>
<td>セル１</td>
<td>セル２</td>
</tr>
</table>
縦は１行ですので <tr> 〜 </tr> は１つ
その１行にセルが２つ並んでいますから
<td> 〜 </td> が ２つ入っているのがわかりますね。
これを踏まえて 一番上のソースをもう一度みてみましょう
<table border="1">
<tr>
<td>セル１</td>
<td>セル２</td>
</tr>
<tr>
<td>セル３</td>
<td>セル４</td>
</tr>
</table> |
１行目には セル１とセル２ が
２行目には セル３とせる４ が入っています。
このようにテーブルは １行目のセルをすべて指定してから
次の２行目のセルを指定するというのがわかりますね。
● <table>タグとWebデザイン 今回のテーブルタグは 会社の概要とか統計データのように
純粋に「表」として使う場合と
ページのレイアウトとして用いる場合とがあります。
現在ではむしろ こちらの利用が多いでしょうね。
HTMLでは 「このタグは絶対こう使いなさい」 といったものが
ないため この テーブルタグの特色である配列機能に注目して
よく使われているわけなんです。
この特色を上手に利用すれば ページをスマートに表示させたり
かなり複雑なレイアウトも綺麗にこなすことができます。
ただ テーブルは ソースが複雑になりやすいという欠点もあります。
テーブルタグは 開始タグの <table> から 終了タグの</table>
までを読み込んで内容を表示する性質があるため、テーブルを使って
あまりにも複雑なレイアウトをした場合 読み込みに時間がかかって
しまうわけなんです。
また テーブルを使ったレイアウトに関しては ある程度の慣れも
必要です。慣れないうちは 思ったようなレイアウトや表示になら
ないこともあるでしょう。
そんなときは ホームページ作成ソフトのテンプレートや 実際に
テーブルを上手に使ってレイアウトしているホームページのHTML
ソースを参考にしてみるというのもいいと思います。
あと HTML4.01では テーブルを使ったページのレイアウトは
好ましくないという考えから、レイアウトにはスタイルシートを
使いましょう と定義してあります。（一応 覚えておいてください）
でも スタイルシートの場合は まだすべての環境において有効と
いうわけではありませんし、制作側としても スタイルシートを
設定するよりも テーブルタグを使うほうがずっと簡単ですので、
どうしてもテーブルレイアウトを使ったサイトが多いわけです。
つまり テーブルでレイアウトする場合は
複雑にしすぎないこと、そして
表示速度に気を配ることがポイントになってきます。
|
