ホームページ作成支援Ran.comX
 

テーブルちょい技


▼基本を覚えたところで少し複雑なことをしてみましょう。
  • ここでは、やはり使えるテーブルをちょっとだけ紹介してみますね。
    コピペもいいけど、やはり自分でタグを打ち込むという基本を守って使おうね。
    テキストエリアの中からコピーして、メモ帳に写したあとは見ながら自分で打ち込んでみようね。
 ●テーブル内の文字位置や書式を変更しています。
     そのままでも、なにか使えそうな感じのテーブルだね。
                

RANCOMX RANCOMX
RANCOMX RANCOMX

※上の例はわざと派手めに作ってありますが、色などの指定を変更するといいです。
RANCOMXの部分とリンクのURLは自分で変更してくださいね。
※文字の位置ですが、わざとこんな風にしていますが、これも変更してください。


★上のテーブルの変更箇所の説明
  1. RANCOMXの文字・・・自分の好きな文字(タイトルなど)
  2. リンク先URL・・・自分のジャンプしたいページのURL(コンテンツなど)
  3. テーブルの幅・高さ(WIDTH/HEIGHT)を好きな大きさにする。(このままでもよい)
  4. 文字の位置・・・好きな文字の位置(下で説明あり)
  5. 一部にスタイルシートを使用・・・記述の仕方は下で説明。
なんだかいきなり難しすぎたかな?でも、基本は同じですからいろいろ試してね。

 ★上の項目4.の説明
<TD ALIGN="n" VALIGN="b">
(n=RIGHT・CENTER・LEFTで指定。つまり野球で考えるとわかるかな?w)
(b=TOP・MIDDLE・BOTTOMで指定。上段・中段・下段だね。回し蹴り?w)
 ★上の項目5.の説明と記述
最初に説明した通り、ページには<HEAD></HEAD>という部分がありますね。
そのタグの間に挿入するスタイルシートというものを記述しておきます。
文字色が変わるのは、この記述のせいなのです。(いらない場合は入れない)
<HEAD>〜</HEAD>の間に入れるよ。
               
※このテーブルには、かなりいろいろな指定がなされていますが、これをいろいろといじってみて、個性的なものを仕上げてみたらいかがですか?
※それ以外にも、各指定を個別に判断してみて、違う場面でも使ってみるいいですね。文字色変更だけ使うとか、背景変更だけ使うとか、いろいろです。(o^-')b


 ●セルの中に画像を貼り付けたもの
<HEAD>〜</HEAD>の間に入れる。(前のと同じだね)
             
設置するページの<BODY>〜</BODY>設置したい場所に入れる。
             


乱のページへ


乱のページへ


これも乱のページ


しつこく乱のページ


 ●変則的なテーブルを作ってみよう。
ちょっと複雑になりますが、基本的なことを覚えてしまえばしめたものです。

■サンプルテーブル
項目1 項目2 項目3 項目4 項目5
横項目1 ★★★ ★★★ ★★★ ★★★ ○○○
横項目2 △△△ △△△
横項目3 ◆◆◆ ◆◆◆ ◆◆◆ ◆◆◆ ●●●
横項目4 ◇◇◇ □□□□
■サンプルのソース
              
※このテーブルは、何も目的ナシで作ってありますが、用途に合わせてカスタマイズして使ってください。
◆セルの結合について
    2行目・3行目の項目5のセルの場合、縦に並んだセル同士がくっついています。
    これをセルの結合と言って、このように縦のセル同士を結合させる場合の指定は
    書式の中にあるように rowspan="n"(nは結合させるセルの個数)で指定します。
    同じく、横項目2の項目3・4・5のセルのように、横のセル同士を結合させるには
    colspan="n"(nは結合させるセルの個数)で指定します。
    この指定で、自由に結合させるセルをコントロールできるわけですから、今度は自
    分で自由なテーブルを作ってみてください。
●カレンダー・時刻表・時間割・スケジュール表など作ってみるといいですね。

さて、テーブルについてかなり把握できたかな?(できない?)
とりあえず、テストだと思って自分でカスタマイズに挑戦してみてくださいね。
そこから生まれた疑問点を解決していくことが、マスターへの近道だと思いますよ。
あとは、大技・小技編にて。
COPYRIGHT © 2004-2007 FREEMETHOD ALL RIGHTS RESERVED. ランキングナビ