|
|
テーブルちょい技
▼基本を覚えたところで少し複雑なことをしてみましょう。
- ここでは、やはり使えるテーブルをちょっとだけ紹介してみますね。
コピペもいいけど、やはり自分でタグを打ち込むという基本を守って使おうね。
テキストエリアの中からコピーして、メモ帳に写したあとは見ながら自分で打ち込んでみようね。
●テーブル内の文字位置や書式を変更しています。
そのままでも、なにか使えそうな感じのテーブルだね。
※上の例はわざと派手めに作ってありますが、色などの指定を変更するといいです。
※RANCOMXの部分とリンクのURLは自分で変更してくださいね。
※文字の位置ですが、わざとこんな風にしていますが、これも変更してください。
★上のテーブルの変更箇所の説明
- RANCOMXの文字・・・自分の好きな文字（タイトルなど）
- リンク先URL・・・自分のジャンプしたいページのURL（コンテンツなど）
- テーブルの幅・高さ(WIDTH/HEIGHT)を好きな大きさにする。（このままでもよい）
- 文字の位置・・・好きな文字の位置（下で説明あり）
- 一部にスタイルシートを使用・・・記述の仕方は下で説明。
なんだかいきなり難しすぎたかな？でも、基本は同じですからいろいろ試してね。
★上の項目4．の説明
<TD ALIGN="n" VALIGN="b">
（ｎ＝RIGHT・CENTER・LEFTで指定。つまり野球で考えるとわかるかな？ｗ）
（b＝TOP・MIDDLE・BOTTOMで指定。上段・中段・下段だね。回し蹴り？ｗ）
★上の項目5．の説明と記述
最初に説明した通り、ページには<HEAD></HEAD>という部分がありますね。
そのタグの間に挿入するスタイルシートというものを記述しておきます。
文字色が変わるのは、この記述のせいなのです。（いらない場合は入れない）
<HEAD>〜</HEAD>の間に入れるよ。
※このテーブルには、かなりいろいろな指定がなされていますが、これをいろいろといじってみて、個性的なものを仕上げてみたらいかがですか？
※それ以外にも、各指定を個別に判断してみて、違う場面でも使ってみるいいですね。文字色変更だけ使うとか、背景変更だけ使うとか、いろいろです。(o^-')b
●セルの中に画像を貼り付けたもの
<HEAD>〜</HEAD>の間に入れる。（前のと同じだね）
設置するページの<BODY>〜</BODY>設置したい場所に入れる。
●変則的なテーブルを作ってみよう。
ちょっと複雑になりますが、基本的なことを覚えてしまえばしめたものです。
■サンプルテーブル
|
| ★ |
項目１ |
項目２ |
項目３ |
項目４ |
項目５ |
| 横項目１ |
★★★ |
★★★ |
★★★ |
★★★ |
○○○ |
| 横項目２ |
△△△ |
△△△ |
| 横項目３ |
◆◆◆ |
◆◆◆ |
◆◆◆ |
◆◆◆ |
●●● |
| 横項目４ |
◇◇◇ |
□□□□ |
|
■サンプルのソース
※このテーブルは、何も目的ナシで作ってありますが、用途に合わせてカスタマイズして使ってください。
◆セルの結合について
２行目・３行目の項目５のセルの場合、縦に並んだセル同士がくっついています。
これをセルの結合と言って、このように縦のセル同士を結合させる場合の指定は
書式の中にあるように rowspan="n"（ｎは結合させるセルの個数）で指定します。
同じく、横項目２の項目３・４・５のセルのように、横のセル同士を結合させるには
colspan="n"（ｎは結合させるセルの個数）で指定します。
この指定で、自由に結合させるセルをコントロールできるわけですから、今度は自
分で自由なテーブルを作ってみてください。
●カレンダー・時刻表・時間割・スケジュール表など作ってみるといいですね。
|
さて、テーブルについてかなり把握できたかな？（できない？）
とりあえず、テストだと思って自分でカスタマイズに挑戦してみてくださいね。
そこから生まれた疑問点を解決していくことが、マスターへの近道だと思いますよ。
あとは、大技・小技編にて。 |
|
|
|
