2014年04月20日

表組 その2

表組 その2

■表組全体の指定

前回 作成した四行のセルの列を、表組としてページに表示させるためのタグを記述します。この表組のタグで囲うと、表の前後は、自動的に改行されて表示されます。

<table> 表組(テーブル) ここから
</table> 表組(テーブル) ここまで

ただ、これだと 表の罫線が表示されません。料金表や名簿などの表は、やはり罫線があった方が見やすいので、罫線を引くように指定します。

<table border>

※table と border の間に半角スペースを必ず入れて下さい。

<table border> 罫線付きの表組 ここから
</table> 罫線付きの表組 ここまで

※表組を閉じるタグ </table> には、border を入れる必要はありません。

border という文字を入れると、罫線付きの表がページに表示されます。
外枠の罫線やセルの罫線の太さ・セルと文字の間隔などを数値で指定することも出来ますが、目視で確認するのが難しい場合は省略してかまいません。
<table border>
だけで、外の枠線とセルを仕切る罫線がブラウザの画面上に表示されます。
※セルを仕切る罫線は、厳密に言うと、セルの四方を囲う線になりますが、細かいことは気にせずいきましょう。

それでは、前回 作成した表の中身をまとめてみます。

<html>
<head>
<title>
表組のテスト
</title>
</head>
<body>

<!-- 罫線付きの表組 ここから -->
<table border>

<!-- 1行目=見出しの行 -->
<tr>
<th>
氏名
</th>
<th>
年齢
</th>
<th>
メールアドレス
</th>
</tr>

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

<!-- 3行目 -->
<tr>
<td>
鈴木洋子
</td>
<td>
28才
</td>
<td>
yohko@hotmail.com
</td>
</tr>

<!-- 4行目 -->
<tr>
<td>
村山浩二
</td>
<td>
48才
</td>
<td>
murayama@sakura.jp
</td>
</tr>

<!-- 表組 ここまで -->
</table>

</body>
</html>

■空白のセルの扱い

表の中には、データの無い空白のセルが含まれるケースがあります。
たとえば、女性が「年齢を書くのはやめてくれ」と言って、年齢の欄を空白にしなければならない時はどう扱ったらいいでしょうか。
その場合は、中身が空白のセルは、データの文字を何も記述しないで、セルだけを作る、ということになります。

表組の例で言うと、鈴木洋子さんの列を作る時に、

<td>
28才
</td>

と入力した部分の年齢のデータ「28才」を消去して、セルだけを作ります。

<!-- 3行目 -->
<tr>
<td>
鈴木洋子
</td>
<td>

</td>
<td>
yohko@hotmail.com
</td>
</tr>

こうすると、表の全体の形はそのままで、一つのセルだけ何も表示されていない状態になります。
※空白ではなく - というような文字を入力してもかまいません。
posted by yanikun at 10:22| Comment(0) | 日記