表作りシリーズの２回目です。
今回は表の位置を左右どちらかに寄せる練習をしてみます。
だいたいのイメージとしては、こんなように表示をさせたい時の使い方です。表全体を右寄せにしてみたいわけです。
この時にも ALIGN（アライン）タグが活躍してくれます。このタグはとっても便利なんで、業界では何と呼ばれているかご存じでしょうか。「アラインと魔法のランプ」、ﾅﾝﾁｯﾃ。(^_^;;
タグは次のように書きました。 今までとの違いはすぐにおわかりでしょう。
<table border>の部分が<table border align="right">となっているだけですね。
こうすることで、表全体が右寄りになります。
<table border align="right">
<caption align="top">ふろよんオールスターズ</caption>
<tr>
<td>ハンドル</td>
<td>ショップ定食</td>
<td>講座</td>
<td>夕食</td>
</tr>
<tr>
<td>Sortie</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<td>ひでりん</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<td>にゃんこ</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<td>幽</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
</table>
これを table7.htm とでも名付けて保存し、ブラウザで開いてみてください。
上の表示例のように表示されましたでしょうか。
この ALIGNタグは表をどちらかに寄せて表示させるだけでなく、表のとなりにスペースがあればそこにテキストを置くこともできます。
では、次に、表のとなりにあいているスペースを利用してテキストを回り込ませて置いてみる練習です。
特に技は必要ありません。さきほどのタグの最後にテキストを追加するだけでオッケーです。
こんなふうに記述してみました。追加したテキストの部分は区別しやすいように、青い色を指定してみました。
久しぶりに登場の <font color="色">テキスト文</font>を使っています。なつかしいですね。
<table border align="right">
<caption align="top">ふろよんオールスターズ</caption>
<tr>
<td>ハンドル</td>
<td>ショップ定食</td>
<td>講座</td>
<td>夕食</td>
</tr>
<tr>
<td>Sortie</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<td>ひでりん</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<td>にゃんこ</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
<tr>
<td>幽</td>
<td>○</td>
<td>○</td>
<td>○</td>
</tr>
</table>
<font color="blue">
自作オフは東京に続き
神戸三宮でも行います。
今回はスタッフが手取り足取り
教えてくれるはずです。
自分でＰＣを自作すると
仕組みが少しは分かるし、
アップグレードへの自信も
つきますよ。
そんな楽しい自作の世界へ
あなたもはやくおいでませ。
お待ちしてますよー。
(^_^)
</font>
これを table8.htm とでも名付けて保存してブラウザで開いてみると、こんなふうになるずです。
追加したテキストの改行位置は、ブラウザの幅によって左右されますので、必ずしも上の例と同じ位置にはなりません。
こんなふうに、表を寄せたうえに、テキストを空いたスペースに書き込むことが簡単にできてしまうわけですね。
さて、本日最後の練習は問題形式にさせていただきましょう。
とっても簡単な問題です。
上の table8.htm のサンプルは表が右で、テキストが左に表示されています。これを、表を左にして、テキストを右に表示させるようにしてタグを書き換えてください。さらに、表のとなりに表示させるテキストの色を赤に変えましょう。これを問題３ (table9.htm) とします。
ヒントは不要かな。「あそこ」をちょっと書き換えるだけでオッケーです。
超ウルトラスーパーミラクルヒント：右は right 左は left です。青は blue 緑は green 赤は red です。(^_^)
では、次回も表を使って遊びたいと思います。幅を指定したり、大きさを
指定して遊ぶつもりです。
スィーユー！
＊問題３の解答：(table9.htm)
<table border align="right"> の部分を <table border align="left">に
置き換える。
<font color="blue"> の部分を <font color="red> に置き換えると完成です。
これを index9.htm と名付けて保存してブラウザで確かめてみてください。
すると、こんな表示になれば正解ですね。
では、また次回まで。(^_^)/~
