ホームページを自作しよう≪JoyWave便利箱≫
ジョイのHTML勉強 ホームページを自作しよう≪JoyWave便利箱≫
ジョイのHTMLソース勉強部屋
制作:ジョイ@関西

 トップ | ≪HTML基本構成≫ | ≪タグの書き方≫ | ≪スタイルシートの書き方≫ | ≪サイトマップ≫


テーブル作成の基礎講座1/3〜3/3はそれぞれ3〜4時間くらい必要ですので、時間があるときに読んでください。
利用したペンギンGIF画像は Emperor Penguin Empire 様から拝借しています。

判りやすいようにテーブル枠を表示しています。

■テーブル作成の基礎講座1/3 | 基礎講座2/3 | 基礎講座3/3


はじめにメモ帳(Notepad)やテキストエディタなどに

------------------------------
<html>
<body>
<table>
<tr>
<td></td>
</tr>
</table>
</body>
</html>

------------------------------

メモ帳などに貼り付け

をコピペしましょう。

この「赤色」部分がテーブルの基本の形です。
<table>〜</table>・・・「テーブルを作ります・終わります」という宣言です。
<tr>〜</tr>・・・・・・・・「横の列を作ります・終わります」という宣言です。
<td>〜</td>・・・・・・・・これがひとつずつの枠で、複数書くと横に並びます。
               やはり「始めます・終わります」の宣言をします。

<tr>〜</tr><td>〜</td>を複数組み合わせることにより、色々なテーブルを作ることができます。


<td>〜</td>を並べていきますが、縦に書いても横に書いても同じで、横に並びます。
例えば、

<td>〜</td><td>〜</td>
と、
<td>〜</td>
<td>〜</td>

とは同じことで、赤・緑の順で横に2個並べるということです。

space space

縦に2個並べたいなら、ひとつずつ横の列を終わらないといけないので<tr>〜</tr>を使い、

<tr><td>〜</td></tr>
<tr><td>〜</td></tr>
と書きます。
この場合も、2つ横に並べて書いても同じことです。
<tr>
<td>〜</td>
</tr>
<tr>
<td>〜</td>
</tr>
のように並び替えると、先ほどコピペした感じとよく似ています。

space
space

例えば横3個、縦1段のテーブルでしたら
<table>
<tr>
<td></td><td></td><td></td>
</tr>
</table>
と書きます。

実際の表示は、

こんな風になります。


横1個、縦3段のテーブルでしたら
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
と書きます。

実際の表示は、

こんな風になります。


以上を組み合わせて、
例えば横3個、縦2段のテーブルでしたら
<table>
<tr>
<td>上左</td><td>上中</td><td>上右</td>
</tr>
<tr>
<td>下左</td><td>下中</td><td>下右</td>
</tr>
</table>
と書きます。

実際の表示は、

上左上中上右
下左下中下右

こんな風になります。


横2個、縦3段のテーブルでしたら
<table>
<tr>
<td>上左</td><td>上右</td>
</tr>
<tr>
<td>中左</td><td>中右</td>
</tr>
<tr>
<td>下左</td><td>下右</td>
</tr>
</table>
と書きます。

実際の表示は、

上左上右
中左中右
下左下右

といった表になります。


テーブルタグは慣れるまで難しいです。こちらの方が判りやすいかと思い図解にしてみました。
colspan="2"・・・すぐ右側の <td>〜</td> と結合します。(数字は結合するマス目の数を書きます)
rowspan="2"・・・すぐ下側の <td>〜</td> と結合します。(数字は結合するマス目の数を書きます)

次のようなテーブルの場合

テーブルタグの図解1

ソースは次のようになります。

テーブルタグの図解2


ページ先頭へ

★ここから、横2個・縦3段の練習をしてみましょう。
最初にコピペした中の「赤色」部分を、<td></td>や<tr></tr>をコピーして、下記のように完成させます。

<table border="1">
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
<tr>
<td>5</td><td>6</td>
</tr>
</table>

<td>〜</td>の部分は順番が判りやすいように、1〜6の数字を書いておきます。
数字は半角でも全角でもいいです。
また、<table>も最初は枠を表示したほうが判りやすいので、<table border="1">としておきます。
( border="1" は最後に、削除するか、border="0" とすればいいです。)


ここで一度保存しましょう。

判りやすくするために、「 table 」という名前でフォルダーを1つ作ります。
場所は判りやすいところなら、どこでもいいです。

左上の「ファイル」→「名前を付けて保存」を選び、「保存する場所」は、先ほど作った「 table 」を選びます。
「ファイル名」は「 table.html 」とします。
(本当は何でもいいです。)
「ファイルの種類」は「テキスト文書(*.txt)」を選びます。
訂正 「HTML文書」と書いていましたが、メモ帳の場合は「テキスト文書」でした。
良ければ「保存」ボタンを押してください。

名前をつけて保存1
名前をつけて保存2

保存したファイル「 table.html 」をダブルクリックして開いて見てください。

保存状態 → 表示1

こんな風に表示されましたか?
違った表示になっている場合、タグ一文字が間違っていたり「/」が抜けていたり「 b 」が「 d 」になっていたり、必ず、どこかがまちがっています。

うまく表示しました?


ここからは、1〜6に文章や画像を入れるだけです。

例として、文章3点・画像3点用意しました。
用意した画像を利用されるのでしたら、画像の上で右クリックして、先ほどの「 table 」内に「名前を付けて画像を保存」してください。
(名前は変えず、そのままで)
また、あなた自身でご用意されるのでしたら、用意した画像は「 table 」に入れましょう。
そうしないと、画像が表示されなくなります。

1・・・・右側は、「 HELLO 」と挨拶しているペンギンです^^
2・・・・gif画像 peep_pen06.gif サイズ32×32
3・・・・gif画像 peep_pen08.gif サイズ32×32
4・・・・何か思い当たる節でもあるのでしょうか!?
5・・・・こんな感じで、できてきます。それではこの辺で失礼します。
6・・・・gif画像 peep_pen09.gif サイズ32×32

gif画像1 gif画像2 gif画像3

画像はEmperor Penguin Empire 様から頂きました。


1〜6を組み合せると、

右側は、「 HELLO 」と挨拶しているペンギンです^^

gif画像1
gif画像2

何か思い当たる節でもあるのでしょうか!?

こんな感じで、できてきます。それではこの辺で失礼します。

gif画像3


ページ先頭へ

如何ですか?
取り敢えず完成ですが、テーブル内の文章や画像の位置を「 align 」「 valign 」属性で調節し
文章の段落などに改行タグ <br> を入れてバランスを取ります。
属性 bgcolor で、背景色など入れてもいいですね。
そうして border="0" にすると、下記のようにもできます。

表示2

画像で貼り付けていますので、ペンギンは動きませんが実際はアニメGIFなので動きますよ。


このソースは、以下のようになっています。

<html>
<body>
<table border="0">
<tr>
<td bgcolor="#eeeeff">右側は、「 HELLO 」と<br>
挨拶しているペンギンです^^</td>
<td align="center"><img src="peep_pen06.gif" alt="gif画像1"></td>
</tr>
<tr>
<td align="center"><img src="peep_pen08.gif" alt="gif画像2"></td>
<td bgcolor="#eeffee">何か思い当たる節でも<br>
あるのでしょうか!?</td>
</tr>
<tr>
<td bgcolor="#ffeeee">こんな感じで、できてきます。<br>
それではこの辺で失礼します。</td>
<td align="center"><img src="peep_pen09.gif" alt="gif画像3"></td>
</tr>
</table>
</body>
</html>

≪注≫
画像のところ、一般的には「 width="32" 」や「 height="32" 」などのサイズを書いていますがなくても大丈夫です。


ページ先頭へ

如何でしたか?書いたり、コピペしたり、表示させたり、訂正したり・・・・、何回も繰り返さないと完成しないので、疲れたでしょう?
何々、1回でできた?!・・・お見事!!!

今回は、この辺で終わりにしましょう。お疲れ様でした!

■テーブル作成の基礎講座1/3 | 基礎講座2/3 | 基礎講座3/3

 トップ | ≪HTML基本構成≫ | ≪タグの書き方≫ | ≪スタイルシートの書き方≫ | ≪サイトマップ≫

Copyright(C) 2005 ホームページを自作しよう≪JoyWave便利箱≫ All Rights Reserved.