初心者必見！お小遣い稼ぎ完全マニュアル

【お小遣い稼ぎ完全マニュアル】では、インターネットを使ってお小遣い・副収入を稼ぐ方法を紹介します。もちろん無料で始められるので初心者でも安心！みんなでお小遣い・副収入をGETしましょう！

TOP > > 表を作る！　基礎編TOP > HP(ブログ)をカスタマイズする！ > 表を作る！　基礎編

表を作る！　基礎編

2006/10/13(金)

前回は、サイトの構成を例に挙げてタグのイメージを説明しました。

前回の記事はコチラ→「表を作る！･･･その前に･･･」

では早速、表の作り方について説明します。

前回の記事で、簡単に説明しましたが、タグの基本は

<タグ>と<タグ>の間に、内容が含まれる

ということです。

もう一度確認するという方はコチラ	次へ進む方はコチラ
↓	↓
<html> 　<head> 　</head> 　<body> 　</body> 　</html> ・htmlタグの間にheadタグとbodyタグが含まれていますね。・そしてheadタグの間にはタイトルやスタイルシートを指定する内容が含まれると説明しました。・では→右→の説明へ進んでください。	・表は一般的に「テーブル」と呼ばれます。・以降、テーブルとして説明しますね。・テーブルを作る基本タグは以下の通りです。　<table> 　<tr> 　<td> 　</td> 　</tr> 　</table> ・どうですか？・<table></table>のなかに<tr></tr>が含まれていて、更にその中に<td></td>が含まれていますね。

では次に、テーブルタグの説明をします。
ここまでは大丈夫ですか？

・<table></table>
　これは<html>と同じように、「ココからココまでがテーブルですよ。テーブルを表示してね。」と指定するタグです。

・<tr></tr>
　これは1行を表すタグです。「ココからココまでを1行としますよ」と言っているわけですね。
　ちなみに「行」というのは、excelを使ったことがある人ならわかりますよね？
　使ったことがない方は、ルービックキューブを思い浮かべてください。
　縦横に3列ずつ並んでますよね。
　その中の横1列のことを「行」と言います。
　↑　余計わかりにくい？　↑

・<td></td>
　上記のtrタグに対して、これは列（縦）を指定するタグです。
　それと同時に1マスを指します。

これだけの説明ではなかなかイメージがつかみにくいですよね。
では、↓下の画像↓ではどうですか？

いきなり行列が増えましたが、考え方は簡単ですよ。
わかりやすいように順番に考えていきましょう。

①まず<table></table>でテーブルの土台を作ります。

②次は、①のなかに「行」を入れますよ。
　上の表に「行」はいくつありますか？
　3行ですね。<tr></tr>が1行を示すということは･･･
　①とあわせると
<table> <tr></tr> <tr></tr> <tr></tr> </table>
　となります。

③その次は<tr></tr>の中に、縦列（マス）を入れます。
　1行の中に3マスありますね。なので、1行は
<tr><td></td><td></td><td></td></tr>
と表されます。
これを②の中に入れると･･･
<table> <tr> <td></td> <td></td> <td></td> </tr>
　　　　　<tr> <td></td> <td></td> <td></td> </tr>
　　　　　<tr> <td></td> <td></td> <td></td> </tr></table>

これで上の3行×3列の表ができあがりです。
どうですか？
あとは、<td></td>の間に文章でもリンク画像でも入れれば、立派な一覧表ができてしまいますよ。

ここまで理解できたらもう説明することはないのですが、
一応、次回は表の応用や注意点について説明します。

HP(ブログ)をカスタマイズする！ | トラックバック：0 | コメント：16 | Page Top↑

≪表を作る！･･･注意点･･･ | ホーム | 表を作る！･･･その前に･･･≫

この記事へのコメント

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2006/10/14(土) 12:48 | | #[ 編集]

こんばんは

すつきりしましたね。
依頼の件完了しましたよ
カッチャ

2006/10/14(土) 18:27 | URL | 四十の手習い　カッチャマン #FDDq9IZE[ 編集]

こんばんは＾＾
リンク名変更完了です！

ってかこのシリーズめちゃめちゃ楽しみです。
期待していますね！
では　＾＾)ノシ

2006/10/14(土) 18:29 | URL | げん玉＆裏技大好き★おさる★ #-[ 編集]

こんばんわ

テンプレ変わりましたね^^
今までなんとなく使っていたタグですがこれだと判りやすくていいですね^^
アップはまたの機会を～
では、ポチポチ

2006/10/14(土) 18:46 | URL | ぱれす #-[ 編集]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2006/10/14(土) 18:50 | | #[ 編集]

そっか！リンク名変更しないとｗ

こんばんわ～
う～～ん！いいネーミングですね～～ｗｗｗ
このタイトルで、アクセスが増えることを切に願っている
一人です＾＾

応援！ぶちっ！！

・・・って、応援(・_・ ) ( ・_・) ドコドコ

2006/10/14(土) 21:02 | URL | ぶちパパ #IJVWg67c[ 編集]

こんばんは～☆

reo様！！スゴイわ♪
出来そうな気がしてきた～～。
こんなこと、タダで教えてくれるなんて･･･。
末永く、みんなの師匠として、手取り足取り頑張ってね！！

･･･って、出来ないの私だけ！？
ではでは、続き楽しみにしてま～す(^_^)/~

2006/10/14(土) 22:33 | URL | 小金持ちユリリィ #wopSWj6I[ 編集]

タイトル変更したよ♪
テンプレ自体、かえたんだねー。
さわやかだわ。
ＳＥＯ対策かな？すごくわかりやすいね。
いいタイトルだと思います。私ももうちょっと考えりゃよかったよ・・・

図解されてて(・∀・)ｲｲﾈ!!
イメージつかみやすいです☆
応援ぽち

2006/10/14(土) 22:51 | URL | nikonyan #-[ 編集]

ってあれ？
ランキングはずしたの？？？？

2006/10/14(土) 22:52 | URL | nikonyan #-[ 編集]

こんばんは

リンク名変更しました。
ピッタリな名前ですね～
ホント、マニュアルですね、こちらは。

今度の記事もすごいわかりやすいです！
今度表をつくるときは参考にします。

2006/10/14(土) 23:16 | URL | BlueComet #-[ 編集]

こんばんは

テンプレ変わりましたね。
リンクタイトル変更しました。

タイトル変更すると、登録サイトの変更ってちょっと面倒ではないですか？
ウチも変えようかと思ってるのですが、それが気になって。。
またよろしくお願いしますね。
ではでは。。

2006/10/15(日) 00:21 | URL | けんすた #-[ 編集]

了解です！

タイトル変更了解いたしました～
テンプレ良いですね！
今回の記事じっくり読まないと
私には…(><)
また自分の表と見比べながらちゃんと読んでみます～
本当だ？ランキングないですか？

2006/10/15(日) 17:13 | URL | NNO #-[ 編集]

こんばんは

黄金ランキング名称変更しました
黄金ネットワークです
バナー本日の記事で紹介してますんで
お手数ですが張替え願います

ｺﾋﾟﾍﾟですんまそ
ｶｯﾁｬ

2006/10/15(日) 20:32 | URL | 黄金ネットワーク　宴会部長 #FDDq9IZE[ 編集]

こんばんわ～

愛の布教活動中のぶちパパです。
ｒｅｏさんの記事は一つ一つが充実してるので
ＵＰが大変ですね～

ぶちパパには想像もつきません！！
思いつくまま気の向くままでヾ(・ε・。)ォィォィ

では～愛の応援！ぶちっ！！
・・・て、だから、ないんだってｗ

2006/10/16(月) 00:08 | URL | 自分で稼ぐお小遣い：ぶちパパ #IJVWg67c[ 編集]

はじめまして

ｓｈｉｎ（こころ）ともうします。ランキングからきました。

表の作り方、とてもわかりやすくて勉強になりました。次回の応用も楽しみにしています。
また遊びに来ます。
応援ポチッとして行きます☆

2006/10/16(月) 01:00 | URL | ネットで稼ぐ！のｓｈｉｎ（こころ） #Bnw.0gjE[ 編集]

こんにちは。

サイト名変更完了しました。
自分が判っていることを人に説明するのは大変ですよね。
娘が算数の問題が判らないと言うので教えるのですが、どう説明したら理解してくれるのだろうと日々、悪戦苦闘してます（汗
だからreoさんの説明を見ていると、師匠と呼びたくなります（←ユリリィさんに同感）
次の更新も楽しみにしてますね♪

2006/10/16(月) 15:30 | URL | ブルーミント #-[ 編集]

コメントを投稿する