2014年04月19日

表組 その1 基本

表組 その1 基本

成績表・料金表・時刻表…と、世の中にはいろいろな表があります。もちろん、ホームページの中にも表はあります。ホームページの中の表は、表組(テーブル)と呼ばれています。

表組(テーブル)は、HTMLの中でも難しいタグの一つです。実際の表は縦横にいくつかの枠が組み合わさって出来ているのに対し、HTML文書を記述する時には、文字だけでタテ一列に記述していかなければならないからです。
言い換えれば、マンションの設計図を、図面ではなく文章で書いていくようなものです。

さらに、HTML文書をMyEditで編集する際には、もうひとつの問題があります。それは、MyEditの「HTMLタグの入力支援」のメニューの中に、「表組」の項目が無いことです。
その代わりに、前の記事で説明した「HTMLタグの入力支援」の中の、「お気に入りタグ」の項目と、「タグの入力」の項目を活用していくことにします。

■セル

HTML文書で表組を作るのは、横長の長方形のブロックを、横方向と縦方向に並べていく、
という作業になります。
このブロックは、「セル」と呼ばれています。Excelの「セル」と同じです。
セルには、ふたつの種類があります。見出しの部分を表示する「見出しセル」と、それに対応したデータを表示する「データセル」のふたつです。

●見出しセル

<th> 見出しセル ここから
</th> 見出しセル ここまで

t は table の t 
h は 見出しの h です。

表の見出し、たとえば名簿なら 氏名・住所・電話番号などの項目を入れるためのセルです。
このタグで囲まれた文字列は、自動的に中央揃えになります。そして、少しだけ太字で表示されます。

●データセル

<td> データセル ここから
</td> データセル ここまで

d は data の d です。

これは、表の中のいろいろなデータを書き込んでいくためのセルです。
入力するデータは、見出しに対応するように記述していきます。
このタグに囲まれた文字列は、他の部分の文字と同じ大きさ・太さで、左寄せで表示されます。

■HTMLタグの入力支援メニュー

表組タグを効率的に入力していくために、HTMLタグの入力支援メニューの「タグの入力」の項目を利用します。
この項目は前の記事でも紹介しましたが、あらためてその使い方を紹介しておきます。

1.タグを付けたい(タグで囲みたい)文字列を範囲選択します。

2.Ctrlキー+Tで、HTMLタグの入力支援メニューを開きます。

3.上矢印キーで「タグの入力」を選んで、右矢印キーでサブメニューを開きます。

4.上下矢印キーで「前後 選択範囲の前後に開始 終了タグを挿入」を選んでEnterキーを押します。

5.ダイアログボックスが開いて、挿入するタグを入力するボックスにフォーカスされていますので、半角英数小文字で次の三つの文字のうち、該当する文字を入力します。
< や > を入力する必要はありません。

tr
th
td

tr = 行
th = 見出しセル
td = データセル

6.Tabキーで「OK」のボタンに移動してEnterキーを押します。

■簡単な名簿を表組にしてみる

ここでは例として、簡単な名簿を表組にしてみます(データは架空のものです)。

●元になる名簿

氏名   年齢 メールアドレス
青木一郎 35才 ichiroh@gmail.com
鈴木洋子 28才 yohko@hotmail.com
村山浩二 48才 murayama@sakura.jp

見出しセルには、氏名・年齢・メールアドレスという項目名を入れます。
データセルには、その項目に沿ったデータを入れます。

まず、「氏名」をタグで囲んで、見出しセルを作ります。

<th>
氏名
</th>

次に、「年齢」をタグで囲んで、同じように見出しセルを作ります。

<th>
年齢
</th>

次に、「メールアドレス」をタグで囲んで、同じように見出しセルを作ります。

<th>
メールアドレス
</th>

■表組の「行」の指定

こうして作った見出しセル = 氏名・年齢・メールアドレスを、表の一番上の行に並べて表示するために、表の一行を表すタグで、三つのタグをつなげて括ります。

<tr> 行の始まり
</tr> 行の終わり

というのが、表組の中の行を表すタグです。r は Row(タテ列)のrです。
先ほどの三つの見出しセルを、このタグで囲んでみます。

ここでも、HTMLタグの入力支援メニューの「タグの入力」を使います。
一行にしたいセルをまとめて範囲選択してから、ダイアログボックスを開き、挿入するタグのボックスに tr と入力して実行して下さい。
結果は以下のようになります。
※わかりやすくするために、<tr> と </tr> は、行を一つ空けて表示しています。また、見出しセルの間も一つ空けています。

<tr>

<th>
氏名
</th>

<th>
年齢
</th>

<th>
メールアドレス
</th>

</tr>

■データセル

これで、見出しセルが横一列に並び、1行目が出来ました。
次は、同じようにして2行目を並べていきます。1行目の見出しに対応するデータを、データセル=<TD></TD>で囲んでいきます。

<tr>
<td>
青木一郎
</td>
<td>
35才
</td>
<td>
ichiroh@gmail.com
</td>
</tr>

■3行目以降も同じようにして作成する

ここでは例文を記しませんが、3行目以降も同じようにして作成してみて下さい。

■最初に作った1行目と2行目をつなげる

最初に作った1行目の並びと、2行目をつなげます。

<!-- 1行目=見出しの行 -->

<tr>
<th>
氏名
</th>
<th>
年齢
</th>
<th>
メールアドレス
</th>
</tr>

<!-- 2行目=データの行 -->
<tr>
<td>
青木一郎
</td>
<td>
35才
</td>
<td>
ichiroh@gmail.com
</td>
</tr>

■3行目以降をつなげる

上の1行目と2行目に続けて、3行目以降もつなげていって下さい。
これで、表組の中身が出来上がりです。この中身を表の形にするためのタグについては、次の記事で紹介します。

posted by yanikun at 07:25| Comment(0) | 日記