ゼロから始めるＨＰ作り４

８． テーブルタグでレイアウトしてみる
　 テーブルタグは、本来表を作るためのタグですが、スタイルシートなどを使わないで、HTMLタグ だけでページのレイアウトをつけるために利用したりすることも出来るので、憶えておくと 便利なタグですからぜひ憶えておきみましょう。

　 まず、実際に表を作ってみましょう。
テキストファイル ブラウザの表示画面
<html><head><title>リンクページ</title>
   <meta http-equiv="content-type" content="text/html; charset=shift_jis">
</head><body>
   <table border=4 width=160 align=center bgcolor="#ccffcc">
     <caption>【テーブルの例】</caption>
     <tr bgcolor="#ffcccc">
       <th><br></th> <th>列A</th> <th>列B</th> <th>列C</th>
     </tr>
     <tr align=center>
       <td>行1</td> <td>A1</td> <td>B1</td>
       <td rowspan=2>C1-C2</td>
     </tr>
     <tr align=center>
       <td>行2</td> <td>A2</td> <td>B2</td>
     </tr>
     <tr align=center>
       <td>行3</td> <td>A3</td> <td colspan=2>B3-C3</td>
     </tr>
  </table>
</body></html>
　
　リンクページ - Microsoft････
File　Edit　 View　fAvorite　Tool　Help　
　
【テーブルの例】

列A 列B 列C
行1 A1 B1 C1-C2
行2 A2 B2
行3 A3 B3-C3

  • テーブルは<table>〜</table>の間に記述します。
  • その中で<tr>〜</tr>で行を、さらにその中の列を<td>〜</td>で記述します。
  • テーブルの枠線は border=n のように書き、n がその太さを記述します。border=0 では結果として各配置が指定されます。
  • 各列を繋ぐには rowspan=m、各行を繋ぐには colspan=n のように記述し、m列、n行繋ぎます。
  • さらに詳しくは、こちらで
    • 　 写真なども張付けてみましょう。
    テキストファイル ブラウザの表示画面
    <html><head>
       <title>秋の富士</title>
       <meta http-equiv="content-type" content="text/html; charset=shift_jis">
    </head><body>
       <table border=0 align=center bgcolor="#eeeeaa">
         <tr>
           <td align=center bgcolor="#eeeeaa">秋の富士</td>
           <td align=center>河口湖</td>
         </tr>
         <tr>
           <td colspan=2><img src="y0399s.jpg" alt="秋の富士"></td>
         </tr>
      </table>
    </body></html>
    　秋の富士 - Microsoft････
    File　Edit　 View　fAvorite　Tool　Help　
    秋の富士 河口湖
    秋の富士
    　 このようにテーブルは、枠内の背景を設定したり、写真のレイアウト配置をしたりすることが出来ます。
    さらに詳しくは、こちらで

    　 以上基本的なタグを使った記述について述べました。 実際のページについては、 サンプルページ等で、さらに勉強して下さい。

    　 いずれにしても、ＨＰ作りではまず簡単なものを作って、ブラウザで確認して、誤りや不足分を 修正・追加してゆくのが結局は早道だと思います。 すべて勉強してからではなくて、 利用頻度の多いタグを作りながら覚えるのがコツのように思います。がんばりましょう。

    ９． ホームページを公開する
    　 ページが出来たらは、公開して、皆さんに見てもらわなければなりません。 公開方法について詳しくは、アップロードをご覧下さい。 その際のトラブルにならないよう、特に下記の点には注意しましょう。

  • ファイル名は原則として、半角英数字以外は使えません。また大文字と小文字も別文字として区別されます。
  • サーバー上のファイルはいわばPC上のファイルの「コピー」を作ることですから、その配置は PC上の相対配置と同じにします。
  • サーバーによって利用条件が異なることがあります。プロバイダの注意書等で、 サーバの使用条件をよく把握しておきましょう。
    　
    • 　 自分のＰＣ上に作ったホームページの「原稿」は公開する前にWebブラウザで確認します。 この際色々な不都合も修正してから「アップロード」しましょう。
    　 また「アップロード」したら、実際の見栄えも確認して見ましょう。転送の仕方によっては、 画像が変になったりすることがあります。その時はアップロードの仕方 などをもう一度確認してみましょう。

    　　 前へ
    　 Top>  ＨＰ作りTop>  HPの仕組>  基本タグ/ 作成ﾌﾛｰ‖ ゼロ１/ ゼロ２/ ゼロ３/ ゼロ４‖ HTMLの初歩/ 演習‖ 手軽に作る‖