テーブルタグについて

こんにちは。あきです。


前回先輩よりブログデザインで意識する事に
ついて学んだアキヒロ。今日はテーブルタグについて学びます。



アキヒロ:
「それじゃあ今日はテーブルタグについてお教えください。」


先輩:
「うむ。テーブルタグとは基本的に表を作成する為のタグだという事はいいな。」


アキヒロ:
「ええ。こんなのですね。」











セル1-1 セル1-2
セル2-1 セル2-2




先輩:
「うむ。このタグはこのようにただ表を作成するだけでなく、文字や画像をバランスよく綺麗に表示するのにも非常に有効なタグなんだ。」


アキヒロ:
「はあ。」


先輩:
「まず画像を貼り付けた場合、画像のすぐ横に何か説明文を入れたい時があるだろう。」


アキヒロ:
「いえ。特には。下に説明文を書けばいいじゃないですか」


先輩:
うるさーい。俺は横に書きたいんだ。文字が画像に回り込んだりせず綺麗に並べて書きたい事がしょうっちゅうあるんだ!」


アキヒロ:
「分かりましたよ。まあまあそんなに興奮しないで」


先輩:
「ふーっ。ふーっ。そんな時は以下の様に書くと綺麗に表示される。」

——————————————————————


<TABLE cellSpacing=5 cellPadding=10 border=0>
<TBODY>
<TR>
<TD><IMG style=”src=”side1.jpg” border=0>
<TD vAlign=top>
これは川です。<BR>
くもが川にうつってました。<BR>
とてもきれいでした。<BR>
すこし小さい川でした。
</TD>
</TR>
</TBODY>
</TABLE>

——————————————————————





これは川です。
くもが川にうつってました。
とてもきれいでした。
すこし小さい川でした。

アキヒロ:
「小学生の作文ですか?」

先輩:
「うるさい!配置はどうだ?美しくないかね?」


アキヒロ:
「はあ。まあ。でもただの自己満足な気が。」


先輩:
「まったく。お前って奴は本当につまらん奴だの。この画像、見てみろ。素晴らしいだろ。
    ほら何か感想を言ってみろ!」


アキヒロ:
「はあ。青いです。」


先輩:
「『はあ。青いです』


   なんだその反応。もっと気持ちを込めて言葉にしろ!」


アキヒロ:
先輩も変わらないでしょ。それより。先輩。また話が大きく横にそれてます。いくつか分からない言葉があるんで教えてください。
     この『cellpadding』ってなんですか?」


先輩:
「ああ。これはだな各セル内の余白を設定できるんじゃ。」


アキヒロ:
「『cellspacing』は?」


先輩:
「これはテーブルの罫線の幅を設定する為のものだ。枠がないから分かりにくいのだろう。実際に枠を表示してみよう。」


 






これは川です。
くもが川にうつってました。
とてもきれいでした。
すこし小さい川でした。

 



先輩:
「『border』を設定すると外枠の幅が決められこれを”0″にするか、何も設定しないと枠を消すことができるのだ。」


アキヒロ:
「へー。でも設定するの面倒くさそうだし画像なんてめったに使わないから、あまりこのタグを使うメリットが感じられないなあ。」


先輩:
「そうか?横に並べても適切に表示できるというのはあることに非常に役に立つと思わないか?」


アキヒロ:
「あること?」


先輩:
「そうだ。」


アキヒロ:
「うーん。なんでしょう?」


先輩:
「お前もっと考えろよ。それはだな


   記事の目次だ。」


アキヒロ:
「記事の目次?」


先輩:
「そうだ。記事を書くたびに目次をトップに追加していくだけだと、縦幅がどんどん長くなり最新記事に行くまでにスクロールを多くしなければならなくなるだろう。」


アキヒロ:
「はい。」


先輩:
「だがこのテーブルタグを使い、余白や罫線の幅などを調節して横に並べて表示すれば、見やすい目次を作る事ができるのだ。こんな感じで」







TEST

 ・TEST11111
 ・TEST2
 ・TEST3
 ・TEST4
TEST

 ・TEST1
 ・TEST22222
 ・TEST3
 ・TEST4
TEST

 ・TEST1
 ・TEST2
 ・TEST333333
 ・TEST4

アキヒロ:
「なるほど。これはいいですね。」


先輩:
「まだ他にも画像を丸く表示したり、額縁を付けたりと色々な小技があるのだがそれらはあまり覚える必要はないだろう。」


アキヒロ:
「わかりました。」


先輩:
「以下のサイトにアクセスしてみろ。簡単にテーブルを作る事ができる。


   テーブルタグ作成ツール


アキヒロ:
「わかりました。今日もありがとうございます。」

テーブルタグについて」への18件のフィードバック

  1. AKI

    ●作田さん
    コメントありがとうございます。
    HPでは避けて通れません。
    なので自分はまだHP作りは先ですね。

    返信
  2. AKI

    ●コー太郎さん
    コメントありがとうございます。
    訪問ありがとうございます。
    この後コー太郎さんのサイトにも行かして
    もらいます。
    ●スズキさん
    コメントありがとうございます。
    ぜひとも試してみてください。
    ツールを使うと簡単に作成できます。
    ●HATATOさん
    コメントありがとうございます。
    >丁寧で親切でいいですね
    ありがとうございます。
    これからもがんばりまっす。
    ●かめちきさん
    コメントありがとうございます。
    試してみてください。
    時間をかけずにすぐにテーブルを
    作ることができます。
    ●ザルガバースさん
    コメントありがとうございます。
    自分もはじめは全然作り方がわかりません
    でした。でも色々と役に立つので使ってみてください。

    返信
  3. れま

    こんにちは!れまです!
    お久しぶりです!
    相変わらず文章の書き方うまいですね~
    かなわないです(ノД`)ヽ
    いつも、専門知識が面白く頭に
    吸収されていくのが分かります。
    それと同時に「先輩」の発言も
    頭に吸収されていますが(ノД`)ヽ
    実は最近ブログを休止しました。
    大幅にリニューアルしたいなぁ
    と思ってしまったので^^;
    すぐに復活しますので
    これからもよろしくお願いします!
    応援栗ぽちっとな♪

    返信
  4. スーパー大学生?しょう【商材作成中】

    こんばんは!しょうですd(′∀`o)
    遊びに来るのが遅くなってしまい本当に申し訳ないっす(´;ェ;`)
    さすが先輩!
    今日も丁寧な説明っす♪
    僕マジ先輩のファンです(笑)
    ところで…
    実はブログで重要な発表をしています(´;ェ;`)
    お時間のあるときにでも見てやってください…
    癒し応援クリックぽっちん♪

    返信
  5. おやじ

    こんにちは、おやじです。
    タグは覚えないとブログ作成が大変ですね。
    おやじは表だと以前書いた記事からコピペです。(覚える気がないらしい^^;)
    応援 ポチッ ポチッ ♪

    返信
  6. AKI

    皆さんコメントありがとうございます。
    テーブルタグは非常に便利ですので
    ぜひ使ってみてください。

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>