*トレーニング*
表を自由自在に使いこなせるよう、練習しましょう！
その前に、下準備。
(1)テキストエディタにて、
「ファイル」→「新規作成」を選び、まっさらな状態にしてください。
(2)<HTML><BODY>～</BODY></HTML>という基本骨格だけは作っておいてください。
問題の答えが書けたら、
(1)「test.html」という名前で保存しブラウザで見てみる
(2)答えを見て、添削する
というように確認してください。
それでは、いってみましょー！！
- 問題１．次の表を作ってください。
- ヒント：<td>のかわりに<th>と書くと、太字＆セル内センタリングになります。
答えを見る
- 問題２．次の表を作ってください。
- ヒント：「border=1」を消す、もしくはborder=0にすると、ワクが消えます。
| チョコレート・・・ | カカオが原料の甘いお菓子。
もともとは飲み物。 |
| キャンディ・・・ | 砂糖や果汁などで作る、
西洋風のあめ菓子。 |
答えを見る
- 問題３．次の表を作ってください。
- ヒント：<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"(セル内上寄せ)」
など、役に立ちそうなものがいろいろあります。
７タグ全工程が終了したら、そういうのを勉強してみると、きっと楽しいですよ♪
※あくまで<table>は「表」ですので、本来はデザイン・レイアウトに使うものではないのですが、まぁその辺は・・・(^-^;)
キ～ンコ～ン♪カ～ンコ～ン♪・・・
本日はここまで!
ただし、このあと補講がありますので、まだ帰らないでね★
Copyright (C) 7tag project dv
