ゼロから始めるＨＰ作り４
８． テーブルタグでレイアウトしてみる
テーブルタグは、本来表を作るためのタグですが、スタイルシートなどを使わないで、HTMLタグだけでページのレイアウトをつけるために利用したりすることも出来るので、憶えておくと便利なタグですからぜひ憶えておきみましょう。まず、実際に表を作ってみましょう。
HTMLソース
ブラウザの表示画面
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テーブルのページ</title>
</head>
<body>
<table border=1 style="width:200px; margin:8px auto; text-align:center;">
<caption>【テーブルの例】</caption>
<tr> <th> </th> <th>列A</th> <th>列B</th> <th>列C</th> </tr>
<tr> <td>行1</td> <td>A1</td> <td>B1</td> <td rowspan=2>C1-C2</td> </tr>
<tr> <td>行2</td> <td>A2</td> <td>B2</td> </tr>
<tr> <td>行3</td> <td>A3</td> <td colspan=2>B3-C3</td> </tr>
</table>
</body>
</html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テーブルのページ</title>
</head>
<body>
<table border=1 style="width:200px; margin:8px auto; text-align:center;">
<caption>【テーブルの例】</caption>
<tr> <th> </th> <th>列A</th> <th>列B</th> <th>列C</th> </tr>
<tr> <td>行1</td> <td>A1</td> <td>B1</td> <td rowspan=2>C1-C2</td> </tr>
<tr> <td>行2</td> <td>A2</td> <td>B2</td> </tr>
<tr> <td>行3</td> <td>A3</td> <td colspan=2>B3-C3</td> </tr>
</table>
</body>
</html>
| 🗋 テーブルのページ | |||||||||||||||
| 🠤 🠦 ⟳ ✕ ☖ ⓘ ファイル･･･ | |||||||||||||||
| |||||||||||||||
- テーブルは<table>～</table>の間に記述します。
- テーブルの表題は<caption>～</caption>に記述します。
- さらに<tr>～</tr>で行を、その中の各セルの中身を<td>～</td>内に記述します。
- テーブルの枠線は border=1 の時に表示し、border=0 では非表示となります。
- 各列を繋ぐには rowspan=m、各行を繋ぐには colspan=n のように記述して、m列、n行を繋ぎます。
- さらに詳しくは、こちらで
写真なども貼り付けてみましょう。
HTMLソース
ブラウザの表示画面
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テーブルのページ</title>
</head>
<body>
<table border=1 style="width:160px; margin:8px auto; text-align:center;">
<tr>
<td style="background-color:#eeeeaa ;">秋の富士</td>
<td style="background-color:#ccffcc ;">河口湖</td>
</tr> <tr>
<td colspan=2><img src="y0399s.jpg" alt="秋の富士"></td>
</tr>
</table>
</body>
</html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テーブルのページ</title>
</head>
<body>
<table border=1 style="width:160px; margin:8px auto; text-align:center;">
<tr>
<td style="background-color:#eeeeaa ;">秋の富士</td>
<td style="background-color:#ccffcc ;">河口湖</td>
</tr> <tr>
<td colspan=2><img src="y0399s.jpg" alt="秋の富士"></td>
</tr>
</table>
</body>
</html>
| 🗋 テーブルのページ | ||||
| 🠤 🠦 ⟳ ✕ ☖ ⓘ ファイル･･･ | ||||
| ||||
さらに詳しくは、こちらで
以上基本的なタグを使った記述について述べました。 実際のページについては、 サンプルページ等で、さらに勉強して下さい。
いずれにしても、ＨＰ作りではまず簡単なものを作って、ブラウザで確認して、誤りや不足分を修正・追加してゆくのが結局は早道だと思います。 すべて勉強してからではなくて、利用頻度の多いタグを作りながら覚えるのがコツのように思います。がんばりましょう。
９． ホームページを公開する
ページが出来たらは、公開して、皆さんに見てもらわなければなりません。公開方法について詳しくは、アップロードをご覧下さい。
その際トラブルにならないよう、特に下記の点には注意しましょう。- ファイル名は原則として、半角英数字以外は使えません。また大文字と小文字も別文字として区別されます。
- サーバー上のファイルはいわばPC上のファイルの「コピー」を作ることですから、その配置は PC上の相対配置と同じにします。
- サーバーによって利用条件が異なることがあります。プロバイダの注意書等で、 サーバの使用条件をよく把握しておきましょう。
自分のＰＣ上に作ったホームページの「原稿」は公開する前にWebブラウザで必ず確認します。この際色々な不都合も修正してから「アップロード」しましょう。
また「アップロード」したら、実際の見栄えも確認して見ましょう。転送の仕方によっては、 画像が変になったりすることがあります。その時はアップロードの仕方 などをもう一度確認してみましょう。
前へ
Top> ＨＰ作りTop> HPの仕組> 基本タグ/ 作成ﾌﾛｰ∥ ゼロ１/ ゼロ２/ ゼロ３/ ゼロ４∥ HTMLの初歩/ 演習∥ 手軽に作る∥