アフィリエイトの為の
HP作成講座

テーブルの作り方
テーブルは、表を作るタグです。レイアウトで使う人も多いのですがそれは、正しい使い方ではありません。
でも、まだ現状ではテーブルを使わないと表示が崩れる場合もあるのでレイアウトで使う人も多いです。

ちょっと、難しいですが、これを覚えるととても便利なのでしっかり覚えましょう。

プロフィールのページをテーブルを使って作っていきます。
sample6

<html>
<head>
<title>プロフィール</title>
</head>
<body>
<h1>ネットで稼ごう！</h1>
<h2>プロフィール</h2>
<table width="500" border="1">
<tr>
<td width="120">名前</td>
<td width="380">dai</td>
</tr>
<tr>
<td>生息地</td>
<td>横浜</td>
</tr>
<tr>
<td>血液型</td>
<td>O型</td>
</tr>
<tr>
<td>星座</td>
<td>水瓶座</td>
</tr>
</table>
<br>
<a href="index.htm">Topページへ</a>
</body>
</html>

<table><tr><td>・・・</td></tr></table>で一つのテーブルになります。
テーブルは、表を作る為のタグなので行と列があります。
この為、テーブルを一つ作るのに3種類のタグを組み合わせて作る必要があります。

行は縦の並び、列は横の並びになります。
下のような形ですね。

1行目　1列目 2列目 3列目

2行目

3行目

まず、<table>タグですが、これで、一つの表を表します。。
次に、行をあらわす<tr>タグを書きます。
それから、一行ごとに列を表す<td>タグを書いていきます。

sample6の例では、1行に2列のものが4行あります。
そのため、
<tr>
<td></td>
<td></td>
</tr>
の組が4つ（４行分）できることになります。

以上が基本的なテーブルのタグの使い方です。
borderとかwidthは、次に説明しますのでとりあえず考えないで下さい。

これを、prof.htmという名前でindex.htmと同じフォルダに保存してください。

これで、index.htmからプロフィールをクリックするとプロフィールの画面に切り替わるようになります。

こちらをクリックするとsample6が表示されます。ここをクリック
テーブルの大きさの設定
<table width="xxx"で、テーブルの幅や列の幅を指定します。

幅の指定は、xxxの部分にpixcelか%で指定します。
sample6の例では、<table>タグで表の幅を500pixcelに指定しています。
ここの"500"を"90%"に変えると常にブラウザで表示されているうちの90%の大きさでテーブルが表示されるようになります。

<td>タグも同様です。
下の例は、1列目を50%、2列目と3列目を25%にしてあります。

1行目　1列目 2列目 3列目

2行目

3行目
テーブルの枠の設定
<table border="xxx">で、テーブルの枠線の太さを指定します。

下の例は、borderを"5"にしてみたものです。
borderを0にするかborderの記述が無い場合、枠線が表示されなくなります。

1行目　1列目 2列目 3列目

2行目

3行目

枠線に色をつけたい場合は、bordercolor="色の指定"で行います。
色の指定方法は、文字の場合と同様です。

下の例は、border="1" bordercolor="#0000FF"と指定しています。

1行目　1列目 2列目 3列目

2行目

3行目
その他の設定
今までのタグで基本的な事はできますが、ちょっと寂しいですね。
バックに色をつけたりしていきましょう。
sample7

<html>
<head>
<title>プロフィール</title>
</head>
<body>
<h1>ネットで稼ごう！</h1>
<hr>
<h2>プロフィール</h2>
<table width="500" border="1" cellspacing="0" bordercolor="#0000FF">
<tr>
<td width="120" bgcolor="#eeeeFF">名前</td>
<td width="380">dai</td>
</tr>
<tr>
<td bgcolor="#eeeeFF">生息地</td>
<td>横浜</td>
</tr>
<tr>
<td bgcolor="#eeeeFF">血液型</td>
<td>O型</td>
</tr>
<tr>
<td bgcolor="#eeeeFF">星座</td>
<td>水瓶座</td>
</tr>
</table>
<br>
<hr>
<a href="index.htm">Topページへ</a>
</body>
</html>

左側の列を紫色にしてみました。
tdタグにbgcolorの属性をつけるとバックの色が変わります。
cellspacingを"0"にすると隙間がなくなり一本の線のようになります。

こちらをクリックするとsample7が表示されます。ここをクリック

Topページも修正しておきましょう。

sample8

<html>
<head>
<title>ネットで稼ごう！</title>
</head>
<body>
<h1>ネットで稼ごう！</h1>
<hr>
<p>こんにちは！<br>
ここは、ネットでお小遣いを稼ぐ方法を紹介しています。</p>
<table width="500" border="1" cellspacing="0" bordercolor="#0000FF">
<tr bgcolor="#0000FF">
<td colspan="2" align="center"><font color="#ffffff">メール受信でポイントを貯めよう</font></td>
</tr>
<tr>
<td width="110"><font size="4">OPT-Club</font></td>
<td width="374">登録して、メールを受信していれば、<font color="#ff0000">何もしなくてもポイントが貯まっていきます</font>。<br>
1通10円と単価が高いので、ぜひ登録しておきましょう。</td>
</tr>
<tr>
<td>フルーツメール</td>
<td>メールを受信するだけで１通１円～５円が稼げます。<br>
メールの受信以外に月曜から金曜までのビンゴがありビンゴになると最高10000ポイントが貰えます。</td>
</tr>
</table>
<br>
<hr>
<a href="prof.htm">プロフィール</a>　<a href="#">メール</a>　<a href="#">掲示板</a></p>
</body>
</html>

サイトの紹介をテーブルにしてタイトルをつけてみました。
タイトルを中央に表示するのは、<td>タグにalign="center"をつけます。

もう一つ新しくでてきたcolspan="2"ですが、これは二つの列を一つにまとめます。
行をまとめるときはrowspanを使います。
指定する数字は、一つにまとめる列または行の数です。

colspanの例

rowspanの例

フルーツメールも追加してみました。
他にも追加するときは<tr>～</tr>をコピーして<td>の中を修正してください。

こちらをクリックするとsample8が表示されます。ここをクリック
画像の表示
OPT-Clubもフルーツメールもバナーが用意されているのでバナーをつけましょう。
後、それぞれのサイトへもリンクを貼っておきましょう。
バナーは、それぞれのサイトからダウンロードしてください。
index.htmがあるフォルダの中にimagesというフォルダを作ってそこに保存します。
sample9

<html>
<head>
<title>ネットで稼ごう！</title>
</head>
<body>
<h1>ネットで稼ごう！</h1>
<hr>
<p>こんにちは！<br>
ここは、ネットでお小遣いを稼ぐ方法を紹介しています。</p>
<table width="500" border="1" cellspacing="0" bordercolor="#0000FF">
<tr bgcolor="#0000FF">
<td colspan="2" align="center"><font color="#ffffff">メール受信でポイントを貯めよう</font></td>
</tr>
<tr>
<td width="110"><a href="http://www.opt-club.com/" target="_blank"><img src="images/optclub.gif" alt="OPTClub" width="95" height="38" border="0"><br>
OPT-Club</a></td>
<td width="374">登録して、メールを受信していれば、<font color="#ff0000">何もしなくてもポイントが貯まっていきます</font>。<br>
1通10円と単価が高いので、ぜひ登録しておきましょう。</td>
</tr>
<tr>
<td><a href="http://www.fruitmail.net/" target="_blank"><img src="images/fruit120.gif" alt="フルーツメール" width="120" height="60" border="0"><br>
フルーツメール</a></td>
<td>メールを受信するだけで１通１円～５円が稼げます。<br>
メールの受信以外に月曜から金曜までのビンゴがありビンゴになると最高10000ポイントが貰えます。</td>
</tr>
</table>
<br>
<hr>
<a href="prof.htm">プロフィール</a>　<a href="#">メール</a>　<a href="#">掲示板</a></p>
</body>
</html>

画像を表示させるには<img>タグを使用します。
srcの後ろに表示したい画像のファイルを指定します。
sample9では、imagesというフォルダに画像を保存してあるので "images/ファイル名"となります。

widthとheightは、画像の縦と横の大きさをpixcelで指定します。

altは、画像が表示されないときに変わりに表示される文字を指定しておきます。
<img>タグは、終了タグはいりません。

imgタグを、<a href・・・>～</a>で囲むと画像をクリックしたときにリンク先が表示されるようになります。

こちらをクリックするとsample9が表示されます。ここをクリック
最後に
sampleのソースは、自由に改変して使ってください。
これを、元に独自のホームページを作ってください。
その際は、管理人が運営するサイトをTOPページにリンクして下さい(^^;

Opt-Clubもフルーツメールも会員になると、他の人に紹介できるようになります。
Opt-Clubは、一人紹介すると100ポイント、フルーツメールは、300ポイントが貰えます。
会員になると紹介用のアドレスが貰えるので、そのアドレスをsampleのURLと置き換えてください。
そうすれば、あなたのサイトから入会する人がいればポイントになります。

OPT-Clubはこちらから
フルーツメールはこちらから
登録できます。

他にも、
ちょびリッチ.com

わくわくメール

 iMiネット

等ありますのでこれだけでも5つのサイトを紹介できます。

注意
上記から登録すると、管理人にポイントが入ります。
それが、いやな方は、他から登録してください。

前のページへ

検索エンジン登録代行・検索エンジン上位表示でアクセスアップ！ 1980円～！

日本各地の名産品・特産品のうまいもの.biz　　美容と健康、癒しの情報館　美・遊・亭　　映画を観よう！　　レーシックって何？

アフィリエイトの為の HP作成講座

はじめてでもホームページが作れる

ホームページの作り方2

アフィリエイトの為の
HP作成講座