*トレーニング*

表を自由自在に使いこなせるよう、練習しましょう!

その前に、下準備。
(1)テキストエディタにて、「ファイル」→「新規作成」を選び、まっさらな状態にしてください。
(2)<HTML><BODY>〜</BODY></HTML>という基本骨格だけは作っておいてください。

問題の答えが書けたら、
(1)「test.html」という名前で保存しブラウザで見てみる
(2)答えを見て、添削する
というように確認してください。

それでは、いってみましょー!!

問題1.次の表を作ってください。
ヒント:<td>のかわりに<th>と書くと、太字&セル内センタリングになります。
年齢4238
職業会社員専業主婦

答えを見る

問題2.次の表を作ってください。
ヒント:「border=1」を消す、もしくはborder=0にすると、ワクが消えます。
チョコレート・・・カカオが原料の甘いお菓子。
もともとは飲み物。
キャンディ・・・砂糖や果汁などで作る、
西洋風のあめ菓子。

答えを見る

問題3.次の表を作ってください。
ヒント:<td>の属性には、width="300"(横幅300px) height="100"(縦幅100px)
align="center"(セル内センタリング)などがあります。
好き。

答えを見る

いかがでしたか?

なんでこんなに<table>の練習をしたかというと、
<table>はページのデザイン、レイアウトにとても有用だからなんです。
たとえばこんなページがあったとします↓

こんなページ

ちょっとかっこいいですね。でも実はこれ、こんな風に<table>が使われてるんです↓

こんな風に。

<FONT size="x" color="xxx">〜</FONT>や
<A HREF="xxx.html">〜</A>など、これまでに習ったものをうまく組み合わせれば、
ホームページを思い通りのデザインにすることが、できるはずですよ(^-^)

問題では出てきませんでしたが、<TD>の属性には、上で挙げた他に、
nowrap(セル内折り返し禁止)」
align="right"(セル内右詰め)」
valign="top"(セル内上寄せ)」
など、役に立ちそうなものがいろいろあります。
7タグ全工程が終了したら、そういうのを勉強してみると、きっと楽しいですよ♪

※あくまで<table>は「表」ですので、本来はデザイン・レイアウトに使うものではないのですが、まぁその辺は・・・(^-^;)

キ〜ンコ〜ン♪カ〜ンコ〜ン♪・・・
本日はここまで!

ただし、このあと補講がありますので、まだ帰らないでね★







Copyright (C) 7tag project dv