Web初心者のホームページを作ろう~第4回~「tableとdiv」

 皆さんこんにちはKUJIRAです。前回はヘッダーについてその重要性と書き方について説明しました。今日は、<table>と<div>について説明していきたいと思います。

 <table>とは表を作るときに使うタグで、基本的に<tr>(table row)、<td>(table data)を組み合わせて使います。

 他にもタイトルを表示する<th>や、ヘッダーを定義する<thead>、ボディ、フッターをそれぞれ定義する<tbody>や<tfoot>等のタグがあります。それでは例を見てみましょう。

——————————————————————————————————————-

<table>
 <thead>
  <tr>
   <th colspan=”3″ align=”center” bgcolor=#FFFF00>KUJIRAの好きなもの</th>
  </tr>
  <tr>
   <th align=”center” bgcolor=#FF9999>歌手</th>
   <th align=”center” bgcolor=#99FF99>本</th>
   <th align=”center” bgcolor=#9999FF>食べ物</th>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <td colspan=”3″ align=”right” bgcolor=#999999>by KUJIRA<td>
  <tr>
 </tfoot>
 <tbody>
  <tr>
   <td rowspan=”2″ align=”center” bgcolor=#FFFF99>RYTHEM</td>
   <td align=”center” bgcolor=#99FFFF>小暮写真館</td>
   <td rowspan=”4″ align=”center” bgcolor=#FF99FF>何でも食べるから全部好き</td>
  </tr>
  <tr>
   <td align=”center” bgcolor=#99FFFF>リア王</td>
  </tr>
  <tr>
   <td rowspan=”2″ align=”center” bgcolor=#FFFF99>花*花</td>
   <td align=”center” bgcolor=#99FFFF>魔女の宅急便</td>
  </tr>
  <tr>
   <td align=”center” bgcolor=#99FFFF>リレキショ</td>
  </tr>
 </tbody>
</table>

——————————————————————————————————————-

 結果はこちら

 では順に説明します。先ず基本は<tr>と<td>です。<tr>はテーブルの横一列を指定します。<td>は、テーブルのデータを格納するためのタグです。<td>で囲まれた情報はセルに格納されます。<td>は増やすとセルが横方向に増えていきます。

 <tbody>、<thead>、<tfoot>に関しては先ほど説明いたしました。ポイントは何処に書いても<thead>は一番上へ、<tbody>は真ん中、<tfoot>は下へ配置される事です。<th>はタイトルです。自動的に中に格納されるデータを太字にして表示します。

 align属性「left、center、right」のパラメータを取り、データを左に寄せるか、中央に構えるか、右に寄せるかを決めます。他にも均等割付の「justify」や指定文字揃えの「char」等があります。上下の設定はvalignです。これは「top、middle、bottom、baseline、center」のパラメータを取ります。topが上揃え、middle、centerが中央揃え、bottomが下揃え、baselineはベースラインを中心に表示されます。

 colspan、rowspan属性は、セルの連結を行います。colspanはパラメータ値分だけ横にセルを連結し、rowspanはパラメータ値分だけ縦にセルを連結します。

 次に<div>について説明します。divは、データを一纏まりのブロック要素として括るためのタグです。似たようなものに<span>がありますが、こちらはインライン要素として一纏めにします。

 ブロック要素とインライン要素の違いですが、ブロック要素は基本的に見出しや段落などの文章を構成する基本的な要素で、前後で改行が入ります。それに比べインライン要素はブロック要素内の特定部分をまとめます。そのため、インライン要素には改行が入りません。

 他にも、ブロック要素の中には別のブロック要素や、インライン要素をいくつでも入れることができますが、インライン要素の中には、これらのものを入れることができないという特徴を持っています。

 それでは例を見てみましょう。

——————————————————————————————————————-

皆さん始めまして、<span style=”color:#FF0000;”>KUJIRA</span>です。

<div style=”margin:10px 0px 0px 10px;”>
 <div>
  <span style=”color:#00FF00;”>食べるの</span>大好きです。
 </div>
 <div>
  <span style=”color:#00FF00;”>お酒</span>が大好きです。
 </div>
</div>

——————————————————————————————————————-

 結果はこちら

 どうでしょうか?イメージはつかめましたか?今日はここまでにします。次回はCSSの使い方を説明します。

 それでは、KUJIRAでした。