|
tableタグを使う
みなさん、STEP３へようこそ♪ここではSTEP２より一歩進んでもっと応用的なテクニックを学んで行こうと思います。少し難しいかもしれませんが、焦らずゆっくり進めていきましょう！
さて、STEP３で始めに登場するのが<table>というタグです。このタグを使いこなすのはおそらく初心者にとって最大の難関となることでしょう。 しかしこの<table>を使いこなせるようになれば、ホームページ作成の幅がグッと広がります。それだけ重要なタグなのです。 それではさっそく基本的な<table>タグの使い方を学んでいきましょう。 先ほど作った自己紹介のページのソースを開いて編集できるようにしておいて下さい。 次に<body>内に数行間隔を空けておいて、次のように入力します
なにやらたくさん新しいタグが出てきましたね（＾＾；）では一度ブラウザで確認してみましょう。下のようになれば正解です。
ごらんのように"名前"という文字が枠で囲まれたと思います。この枠こそが<table>であります。さらにこの枠はたくさん増やしたり繋げたりすることができます。試しに"名前"の右に文字を表示してみましょう。
うまく右側に"吉宗"という文字が表示されたでしょうか？このように、横側に囲いを増やしたい場合は<td>タグを使って増やします。数に制限はないので、右側にどんどん増やす事も可能です。 では次に、縦にも増やしてみたいと思います。次のように入力してみて下さい。
下の段に"特技"と表示されれば正解です。続いて特技の右側にも文字を入力してみましょう。
これで段々自己紹介らしくなってきましたね。ここまでの流れどうですか？以外に簡単だったのではないでしょうか。もし全然意味がわからないという方がいたらスミマセン！私の説明が悪いのですm(_ _)m しかしこのtableタグ。人が教える通りに作ってもなかなか覚えることはできません。実際に自分で試行錯誤しながら作った方が断然覚えやすいですよ。 ではここで一つ練習してみましょう！下のような表を作ることができたら、取りあえずはtableタグは合格です。ぜひ自分の自分の力だけで作ってみて下さいね！ ＜練習問題＞
簡単ですね（＾＾；）次のページではtableタグの属性について勉強しま〜す！ 次へ進む |