ＨＴＭＬの勉強（テーブル編）

＜目次＞
　７．テーブル
　　１）とりあえずテーブルを作って見ましょう。（３行４列のテーブルを作ります。）
　　２）テーブルヘッダの指定方法
　　３）テーブルの表示位置の指定
　　４）テーブルのキャプションの定義
　　５）複数行にわたるセル（縦）
　　６）複数行にわたるセル（横）

７． テーブル
  　テーブルとは、ホームページ上の表のことです。複雑なテーブルを構成することでＤＴＰ風のレイアウトが可能です。
以下のディレクトリを作成しましょう。（図Fig6-1の赤の部分を作ってください。）
  １） とりあえずテーブルを作って見ましょう。（３行４列のテーブルを作ります。）
    ａ． 「page4」ディレクトリ（フォルダ）の下にホームページファイル「html7-1.htm」を作成します。
    ｂ． ａ．で作成したファイルを「SimpleText」で開いて以下のプログラムを入力します。入力終了後「上書き保存」します。
      <html>
<head>
<title>とりあえずテーブルを作って見ましょう。（３行４列のテーブルを作ります。）</title>
</head>
<body>
３行４列のテーブルを作ります。<br>
<table border="1">
<tr>
<td>１行１列</td>
<td>１行２列</td>
<td>１行３列</td>
<td>１行４列</td>
</tr>
<tr>
<td>２行１列</td>
<td>２行２列</td>
<td>２行３列</td>
<td>２行４列</td>
</tr>
<tr>
<td>３行１列</td>
<td>３行２列</td>
<td>３行３列</td>
<td>３行４列</td>
</tr>
</table>
</body>
</html>
    ｃ． ブラウザで「html7-1.htm」を開いてテーブルが以下のように表示されることを確認してください。
（サンプルの表示）
    ｄ． 実行結果
      ３行４列のテーブルを作ります。
１行１列 １行２列 １行３列 １行４列
２行１列 ２行２列 ２行３列 ２行４列
３行１列 ３行２列 ３行３列 ３行４列
    ｅ． プログラムの説明です。
      　テーブルの以下宣言は、以下のタグで行われます。
　　<table border="1">
　　　ここにテーブルのセルのプログラム（タグ）を書きます。
　　</table>
　　border="1"　→　は、テーブルのボーダーライン（枠）の太さで、「０」を指定したり省略するとボー
　　　　　　　　　　 ダーラインが表示されなくなります。このような使用方法は、DTP風にレイアウト
　　　　　　　　　　するときに使用されます。
　一つのホームページに複数のテーブルの宣言をして、複数のテーブルを配置することができます。
また、セルの中に複数のテーブルを置くこともできます。
　セルを配置するタグは、以下になります。
　　<tr>～</tr>は、１行を構成するタグでこの間に列を構成するタグ<td>～</td>を列の数分挿入し
ます。<td>～</td>の間には、セルに配置する情報を書きます。この情報は、必ず配置しなくてはい
けません。（配置しないとセルが生成されません。）もし、配置していないように見せかけるためには
、「全角スペース」か 「見かけ上のスペース（&nbsp；）を配置します。「半角スペース」は、ホームペー
ジ上では無視される ため使用できません。
  ２） テーブルヘッダの指定方法
    　テーブルヘッダは、テーブルのセル内の情報を強調表示させてヘッダにすることができます。
たヘッダは、センターリングされてしまうので、ヘッダの意味を持たない場合や、センターリングが
不要な場合は、<b>～</b>を<td>～</td>の間に書いたほうがいいでしょう。
　テーブルヘッダタグは、<th>～</th>で<td>～</td>を置き換えて使用します。
    ａ．

「page4」ディレクトリ（フォルダ）の下にある「html7-1.htm」を「html7-2.htm」としてコピーします。
    ｂ． 「html7-2.htm」を「SimpleText」で開いて以下のプログラムのように修正します。（赤字の所を修正してください。）入力終了後「上書き保存」します。
      <html>
<head>
<title>テーブルヘッダの指定方法</title>
</head>
<body>
１行目と１列目をテーブルヘッダにします。<br>
<table border="1">
<tr>
<th>１行１列</th>
<th>１行２列</th>
<th>１行３列</th>
<th>１行４列</th>
</tr>
<tr>
<th>２行１列</th>
<td>２行２列</td>
<td>２行３列</td>
<td>２行４列</td>
</tr>
<tr>
<th>３行１列</th>
<td>３行２列</td>
<td>３行３列</td>
<td>３行４列</td>
</tr>
</table>
</body>
</html>
    ｃ． ブラウザで「html7-2.htm」を開いてテーブルヘッダが以下のように表示されることを確認してください。
（サンプルの表示）
    ｄ． 実行結果
      １行目と１列目をテーブルヘッダにします。
１行１列 １行２列 １行３列 １行４列
２行１列 ２行２列 ２行３列 ２行４列
３行１列 ３行２列 ３行３列 ３行４列
  ３） テーブルの表示位置の指定
   

テーブルをブラウザの右又は左に表示できるように設できます。そのタグ属性は、以下になります。
　　<table align="表示位置">～</table>
　表示位置　・・・　「left」（デフォルト）は、ブラウザの左に表示します。
　　　　　　　　・・・　「right」は、ブラウザの右に表示します。
　　　　　　　　・・・　「center」は、ブラウザの中央に表示します。
    ａ． 「page4」ディレクトリ（フォルダ）の下にホームページファイル「html7-3.htm」を作成します。
    ｂ． ａ．で作成したファイルを「SimpleText」で開いて以下のプログラムを入力します。入力終了後「上書き保存」します。
      <html>
<head>
<title>テーブルの表示位置の指定</title>
</head>
<body>
左に表示します。<br>
<table border="1">
<tr>
<td>１行１列</td><td>１行２列</td><td>１行３列</td><td>１行４列</td>
</tr>
<tr>
<td>２行１列</td><td>２行２列</td><td>２行３列</td><td>２行４列</td>
</tr>
<tr>
<td>３行１列</td><td>３行２列</td><td>３行３列</td><td>３行４列</td>
</tr>
</table>
<div align="center">中央に表示します。</div>
<table border="1" align="center">
<tr>
<td>１行１列</td><td>１行２列</td><td>１行３列</td><td>１行４列</td>
</tr>
<tr>
<td>２行１列</td><td>２行２列</td><td>２行３列</td><td>２行４列</td>
</tr>
<tr>
<td>３行１列</td><td>３行２列</td><td>３行３列</td><td>３行４列</td>
</tr>
</table>
<div align="right">右に表示します。</div>
<table border="1" align="right">
<tr>
<td>１行１列</td><td>１行２列</td><td>１行３列</td><td>１行４列</td>
</tr>
<tr>
<td>２行１列</td><td>２行２列</td><td>２行３列</td><td>２行４列</td>
</tr>
<tr>
<td>３行１列</td><td>３行２列</td><td>３行３列</td><td>３行４列</td>
</tr>
</table>
</body>
</html>
    ｃ． ブラウザで「html7-3.htm」を開いてテーブルが以下のように表示されることを確認してください。
（サンプルの表示）
      左に表示します。
１行１列 １行２列 １行３列 １行４列
２行１列 ２行２列 ２行３列 ２行４列
３行１列 ３行２列 ３行３列 ３行４列
中央に表示します。
１行１列 １行２列 １行３列 １行４列
２行１列 ２行２列 ２行３列 ２行４列
３行１列 ３行２列 ３行３列 ３行４列
右に表示します。
１行１列 １行２列 １行３列 １行４列
２行１列 ２行２列 ２行３列 ２行４列
３行１列 ３行２列 ３行３列 ３行４列
  ４） テーブルのキャプションの定義
    　表の表題を上のか、下におくことができます。<table>タグのすぐ下に以下のタグを書くことでキャプションをつけることができます。
　　<caption align="表示位置">～</caption>
　　　表示位置：top →　表の上に表題をつけます。
　　　　　　　　　　bottom　→　表の下に表題をつけます。
    ａ． 「page4」ディレクトリ（フォルダ）の下にホームページファイル「html7-4.htm」を作成します。
    ｂ． ａ．で作成したファイルを「SimpleText」で開いて以下のプログラムを入力します。入力終了後「上書き保存」します。
      <html>
<head>
<title>テーブルのキャプションの定義</title>
</head>
<body>
<p>テーブルのキャプションの定義</p>
<table border="1">
<caption align="top">テーブルのキャプションの定義（上付き）</caption>
<tr>
<td>１行１列</td><td>１行２列</td><td>１行３列</td><td>１行４列</td>
</tr>
<tr>
<td>２行１列</td><td>２行２列</td><td>２行３列</td><td>２行４列</td>
</tr>
<tr>
<td>３行１列</td><td>３行２列</td><td>３行３列</td><td>３行４列</td>
</tr>
</table>
<p>&nbsp;</p><table border="1">
<caption align="bottom">テーブルのキャプションの定義（下付き）</caption>
<tr>
<td>１行１列</td><td>１行２列</td><td>１行３列</td><td>１行４列</td>
</tr>
<tr>
<td>２行１列</td><td>２行２列</td><td>２行３列</td><td>２行４列</td>
</tr>
<tr>
<td>３行１列</td><td>３行２列</td><td>３行３列</td><td>３行４列</td>
</tr>
</table>
</body>
</html>
    ｃ． ブラウザで「html7-4.htm」を開いてテーブルが以下のように表示されることを確認してください。
（サンプルの表示）
     

テーブルのキャプションの定義

テーブルのキャプションの定義（上付き）
１行１列 １行２列 １行３列 １行４列
２行１列 ２行２列 ２行３列 ２行４列
３行１列 ３行２列 ３行３列 ３行４列

 

テーブルのキャプションの定義（下付き）
１行１列 １行２列 １行３列 １行４列
２行１列 ２行２列 ２行３列 ２行４列
３行１列 ３行２列 ３行３列 ３行４列
  ５） 複数行にわたるセル（縦）
    　セルの行同士をマージして行を拡大することができます。行を拡大するには、以下のタグが使われます。
　　<td rowspan="またがるセル数">～</td>
　　<th rowspan="またがるセル数">～</th>
    ａ． 「page4」ディレクトリ（フォルダ）の下にホームページファイル「html7-5.htm」を作成します。
    ｂ． ａ．で作成したファイルを「SimpleText」で開いて以下のプログラムを入力します。入力終了後「上書き保存」します。
      <html>
<head>
<title>複数行にわたるセル（縦）</title>
</head>
<body>
複数行にわたるセル（縦）<br>
<table border="1">
<tr>
<td rowspan="3">マージされたセル</td>
<td>１行２列</td>
</tr>
<tr>
<td>２行２列</td>
</tr>
<tr>
<td>３行２列</td>
</tr>
</table>
</body>
</html>
    ｃ． ブラウザで「html7-5.htm」を開いてテーブルが以下のように表示されることを確認してください。
（サンプルの表示）
      複数行にわたるセル（縦）
マージされたセル １行２列
２行２列
３行２列
  ６） 複数行にわたるセル（横）
    　セルの列同士をマージして列を拡大することができます。列を拡大するには、以下のタグが使われます。
　　<td colspan="またがるセル数">～</td>
　　<th colspan="またがるセル数">～</th>
    ａ． 「page4」ディレクトリ（フォルダ）の下にホームページファイル「html7-6.htm」を作成します。
    ｂ． ａ．で作成したファイルを「SimpleText」で開いて以下のプログラムを入力します。入力終了後「上書き保存」します。
      <html>
<head>
<title>複数行にわたるセル（横）</title>
</head>
<body>
複数行にわたるセル（横）<br>
<table border="1">
<tr>
<td colspan="3">マージされたせる</td>
</tr>
<tr>
<td>２行１列</td><td>２行２列</td><td>２行３列</td>
</tr>
<tr>
<td>３行１列</td><td>３行２列</td><td>３行３列</td>
</tr>
</table>
</body>
</html>
    ｃ． ブラウザで「html7-5.htm」を開いてテーブルが以下のように表示されることを確認してください。
（サンプルの表示）
      複数行にわたるセル（横）
マージされたせる
２行１列 ２行２列 ２行３列
３行１列 ３行２列 ３行３列
      以下は、次のバージョンになります。

ページ４
ページ３へ　　ページ５へ