こんにちは。あきです。
前回先輩よりブログデザインで意識する事に
ついて学んだアキヒロ。今日はテーブルタグについて学びます。
アキヒロ:
「それじゃあ今日はテーブルタグについてお教えください。」
先輩:
「うむ。テーブルタグとは基本的に表を作成する為のタグだという事はいいな。」
アキヒロ:
「ええ。こんなのですね。」
セル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 |
アキヒロ:
「なるほど。これはいいですね。」
先輩:
「まだ他にも画像を丸く表示したり、額縁を付けたりと色々な小技があるのだがそれらはあまり覚える必要はないだろう。」
アキヒロ:
「わかりました。」
先輩:
「以下のサイトにアクセスしてみろ。簡単にテーブルを作る事ができる。
アキヒロ:
「わかりました。今日もありがとうございます。」
こんばんは! 作田です!
いつも応援ありがとうございます!
久しぶりの訪問になってしまいました。
これ、HPを作れるようになるには避けては通れない道ですよね。
しっかり勉強しないといけないです。
また来ます! 応援!
●作田さん
コメントありがとうございます。
HPでは避けて通れません。
なので自分はまだHP作りは先ですね。
こんにちは、コー太郎です。
改めてテーブルタグについて勉強になりました。
また、訪問させて頂きますね。
こちらも、記事更新してありますので、
良かったら、遊びに来て見て下さい。
応援クリック!
(。・ω・)ノ゙ こんにちわスズキです♪
僕はテーブルタグを一度も使ったことがないんですよね
でも、勝手に作ってくれるのもあるそうなので
今度試しに使ってみようと思います
(っ´∀`)ノ凸 応援ぽちっと
こんばんは~、ハヤトです。
ふふふ、丁寧で親切でいいですね♪
暖かい、このブログ♪
応援!
こんばんは~かめちきです♪
これは便利なサイトですね。
解説もしてもらえたし
これで次からはテーブルタグも
たまに使ってみようっと^^
それでは応援ぽちっと♪
こんばんわ、ザルガバースです☆
テーブルはよく理解できていなかったので、それとなく避けてきたのですが、今度使ってみようと思います♪
ポチッ☆
●コー太郎さん
コメントありがとうございます。
訪問ありがとうございます。
この後コー太郎さんのサイトにも行かして
もらいます。
●スズキさん
コメントありがとうございます。
ぜひとも試してみてください。
ツールを使うと簡単に作成できます。
●HATATOさん
コメントありがとうございます。
>丁寧で親切でいいですね
ありがとうございます。
これからもがんばりまっす。
●かめちきさん
コメントありがとうございます。
試してみてください。
時間をかけずにすぐにテーブルを
作ることができます。
●ザルガバースさん
コメントありがとうございます。
自分もはじめは全然作り方がわかりません
でした。でも色々と役に立つので使ってみてください。
AKIさん、こんにちは~!
AKIさんの記事はほんとに分かりやすいです。
今度テーブルタグを使ってみたいと思います!
応援ポチポチ♪
こんにちは!れまです!
お久しぶりです!
相変わらず文章の書き方うまいですね~
かなわないです(ノД`)ヽ
いつも、専門知識が面白く頭に
吸収されていくのが分かります。
それと同時に「先輩」の発言も
頭に吸収されていますが(ノД`)ヽ
実は最近ブログを休止しました。
大幅にリニューアルしたいなぁ
と思ってしまったので^^;
すぐに復活しますので
これからもよろしくお願いします!
応援栗ぽちっとな♪
こんにちは、コー太郎です。
毎度、ご訪問&コメントありがとうございます。
今日は、応援だけで失礼させて頂きますね。
応援クリック!
こんにちは! 作田です。
いつも応援ありがとうございます!
まだ更新前だったようです。
また来ますねー。ぽちっと。
こんばんわ、小次郎です(^o^)
この方法知らなかったんですよー!!
すっごい勉強になりましたぁ☆
AKIさんありがとうございます(^^)
応援ポチッ☆
こんばんは。
今HTMLとかを勉強中なので
すごく参考になります^^
応援していきます!
こんばんは~かめちきです♪
今日も夜の巡回でやってきました。
それでは応援ぽちっと♪
こんばんは!しょうですd(′∀`o)
遊びに来るのが遅くなってしまい本当に申し訳ないっす(´;ェ;`)
さすが先輩!
今日も丁寧な説明っす♪
僕マジ先輩のファンです(笑)
ところで…
実はブログで重要な発表をしています(´;ェ;`)
お時間のあるときにでも見てやってください…
癒し応援クリックぽっちん♪
こんにちは、おやじです。
タグは覚えないとブログ作成が大変ですね。
おやじは表だと以前書いた記事からコピペです。(覚える気がないらしい^^;)
応援 ポチッ ポチッ ♪
皆さんコメントありがとうございます。
テーブルタグは非常に便利ですので
ぜひ使ってみてください。