|
テーマ:タグに挑戦!(102)
カテゴリ:タグ教室
今日も復習がてらテーブルのおさらいをしてみましょう(〃⌒▽⌒)
初めて読む方向けに書きますので・・・ 2回目な方はさらーっと読み飛ばしてください。 今回はあまり余分な機能の説明は省いて、テーブルの基本について勉強しましょう( ̄▽ ̄人) まずはテーブルって何か知ってますか? 英語では「Table」のように記述します。 おそらく日本人が真っ先に思い浮かぶのは机と言う意味の「テーブル」でしょうが、今回はもちろん違います。 テーブルにはもう一つ意味があり、「表(ひょう)」と和訳することもできるのです。 まずは例を見てもらいましょう。 例)
上記の例では「○×ゲーム」っぽく表(ひょう)を使いましたが、 これをテーブルと呼んでいます。 これから紹介しますテーブルタグを使用することによって、 Webページ上でいろいろな表(ひょう)を描画することができるというわけです。 ただ、テーブルには表を描画する以外に、もう一つとてもよく使う使い道があります。 もう一度例を見てください。 例)
表(ひょう)の線を消すことにより、HTMLタグだけでは難しい配置に関するデザインもできるようになるというわけです。 テーブルは作表のためだけに使われているのではない、ということも理解しておいて下さい。 さてテーブルを作る方法ですが、これは少し複雑な記述となっています。 基本的に3つのタグを組み合わせることにより、一つのテーブルを表現します。 逆を言えば、テーブルを構成するタグは3つそろって1セットです。 一つ一つでは意味をなさないことに注意してください。 では早速記述例を見てみましょう。 例) <table border="1"> <tr><td>名前</td><td>住所</td></tr> <tr><td>七鍵</td><td>www.7key.jp</td></tr> </table> 表示結果)
3つのタグを使っていることは分かってもらえましたか? 順番に解説していきましょう。 <table border="1">~</table> で囲まれた範囲はテーブルであることを表しています。 「今からテーブルを記述します」「ここまでがテーブルでした」と宣言を行っているわけですね( ̄▽ ̄人) <tr>~</tr> で囲まれた範囲は一行であることを表しています。 「今から行が始まります」「ここまでで1行は終わりです」と宣言していることになります(〃⌒▽⌒) ですから、行を増やしたい場合は次のように記述します。 例) <table border="1"> <tr><td>名前</td><td>住所</td></tr> <tr><td>七鍵</td><td>www.7key.jp</td></tr> <tr><td>○○</td><td>××</td></tr> </table> 表示結果)
そして最後に <td>~</td> で囲まれた範囲は一ますであることを宣言しています。 ちなみに余談ではありますが、この一ますのことをセルと呼びますので 覚えておくとよいかもしれません(〃⌒▽⌒) 上記例では行を増やしましたので、列を増やす例も紹介しておきましょう。 例) <table border="1"> <tr><td>名前</td><td>住所</td><td>○○</td></tr> <tr><td>七鍵</td><td>www.7key.jp</td><td>××</td></tr> </table> 表示結果)
見てもらえば分かる通りなのですが「<tr>~</tr>」と「<td>~</td>」を増やすことにより 行や列を増やしたり減らしたりできるというわけです(〃⌒▽⌒) お気に入りの記事を「いいね!」で応援しよう
[タグ教室] カテゴリの最新記事
七鍵さん、なんてタイムリーな・・・
ここのところページを何とかテンプレでまとめようと四苦八苦しているのです。 どうしても画像が入らないんですよね。 またやってみます! ありがとうございましたm()m (Sep 28, 2004 06:15:58 PM)
もとsunさん
いらっしゃーい(〃⌒▽⌒) テーブルで細かいデザインをされるのでしたら・・・ <td style="width:99px"> <tr style="height:99px"> <td align="right"> <td valign="bottom"> などを駆使して・・・ 後は根性と根気で何とかなると思います(笑 がんばってくださいね( ̄▽ ̄人) (Sep 28, 2004 06:54:48 PM)
テーブルって以外に一番使いますよね?
重要ですよね? これ、自由に配置できるようになったら 凄いですよね・・ バランスが整わなくて、四苦八苦・・ 思ったとおりに作るのって難しいですね。(*‥*) (Sep 29, 2004 12:12:35 AM)
な~~るさん
いらっしゃーい(〃⌒▽⌒) >テーブルって以外に一番使いますよね? 私の経験ですが・・・ 初心者の頃は何がなんだか分からず作っていました。 自称中級者の頃はテーブルを使いまくって複雑なデザインにこっていました。 自称上級者になると・・・ http://www.7key.jp/hp/_link/5.html のような感じでどんどんシンプルな作りに(笑 いえいえ、まだまだ自称上級者なだけで これからが伸び盛りですのでまだ進化するはずです( ̄▽ ̄人) ただ、テーブルを使ってのデザインって本当に難しいですよね(´・ω・`) HTMLを書いてるうちにわけわからなくなるし(笑 (Sep 30, 2004 12:19:22 AM) |