HTML(ホットミルク)講座

第5時限・サンドウィッチの中のサンドウィッチ♪

==教授と助手の吹き出し(?)も併せてお楽しみ下さい。==



顔は笑って心は真っ青(?)「き、教授?教授!そろそろ第5時限始めますよー!」
寝ぼけてる教授「ん?・・むにゃむにゃ・・あ、あと10分・・」
堪忍袋の尾が切れそうな助手「教授ーっ!」
大声にびっくりして目を開けた教授「ん?な、なんぢゃ?・・あ、ああ・・時間かの?」



ったく・・とぶつぶつ言う助手「『時間かの?』ぢゃないですよ!とっくに10分過ぎてますよ!それに、ほら、講義を待ってる人が!」



嬉しびっくりの教授「ほよ?そ、そうかの?わしの講義をのぉ・・。そりゃー奇特なお人ぢゃ。あ・・いやいや、嬉しいかぎりぢゃ。ありがたいのぉ。」


ため息をつく助手「ですから、講義を始めて下さい!」



うるさい奴ぢゃと小声で文句を言う教授「ほいほい。・・ところで、何だったのぉ?」



またしても心配になった助手「『テーブル』についでだとさっきおっしゃってみえたじゃないですか?」



少し考え込む教授「ほぉ〜。(この際、テーブルよりベッドの方が寝るには・・」
独り言が耳に入り怒り心頭の助手(でも立場上怒れない)「教授・・・?」
助手が今にも爆発しそうだと悟った教授「わ、わかった、わかった!冗談ぢゃて。」



自分をなだめすかせている助手「・・(小声で)冗談に聞こえないから怖いんじゃないですか、教授の場合・・・。」
いきなり大声を出す教授「よ、よ〜〜し!始めるぞぉ!」
「・・・ということで、第5時限、『table』タグぢゃ。表とかテーブルと呼ばれておる。ま、これもサンドウィッチぢゃ。
つまりぢゃ、チーズでくるんだ中身を『ハムとレタスで挟む』んぢゃ!チーズでくるんだ中身は複数OKぢゃぞ。」


 [レ タ ス]→ → → <table>

 [ ハ ム ]→ → → <tr>

 [チ ー ズ]→ → → <td>
 [ 具 ] → → → いろいろ
 [チ ー ズ]→ → → </td>

 [ ハ ム ] → → → </tr>

 [レ タ ス]→ → → </table>

 

ソース 表 示
<html>
<body>
<center>

<table>
<tr>

<td>
いろいろ・その1
</td>

<td>
いろいろ・その2
</td>

</tr>
</table>

</center>
</body>
</html>
いろいろ・その1 いろいろ・その2



ようやく目が覚めた教授「空白は気にしないでくれ。で、トッピング(?)したい場合は、<td></td>の代わりに<th></th>を使うんぢゃ。



一応ほっとした助手「・・つまり、見出しってことですね。」
ほっほっほっと笑う教授「まーそうぢゃの。今から上げる例は、前のソースに追加していってくれたまえ。</center>の前にの。」

ソース 表 示
<table border bgcolor="#eee8aa">

<tr>
<th>
トッピング・その1
</th>
<th>
トッピング・その2
</th>
</tr>

<tr>
<td >
いろいろ・その1
</td>
<td>
いろいろ・その2
</td>
</tr>

</table>
トッピング・その1 トッピング・その2
いろいろ・その1 いろいろ・その2



ようやく安心した助手「見出しは太字で強調されるんですね。・・それと、『1行が<tr>で始まって、</tr>で終わる』ということでいいんですよね?」


真面目な教授「そうぢゃ。ぢゃから、チーズ(『td』)でくるんだもの(内容)を横に並べて、ハム(『tr』)で挟む。で、それを好きなだけ積むんぢゃ。で、最後にレタス(『table』)で全体を挟む、とまーこんなとこぢゃ。それとぢゃ、thとしただけで、中身は中央寄せで表示されるんぢゃ。指定しなくてものぉ。上のは表の幅を指定してないから、わからんがのぉ。(笑」


真面目な教授「それといつものごとく、『bgcolor』は、背景色ぢゃ。で、『th bgcolor=』とか『td bgcolor=』とかすると、そこのセル(マス)だけを変更できるんぢゃ。勿論、『background』で画像ファイルでの背景もOKぢゃぞ。」
頭の中で整理中の助手「ふむふむ・・。」
超真面目な教授「それでは、一気に難しいのを。なに、1つずつ見ていけば大丈夫ぢゃ。」

ソース 表 示
<table border="10"
bgcolor="#adff2f"
bordercolorlight="lime"
bordercolordark="green"
cellspacing="8"
cellpadding="8">

<tr>
<th>
トッピング・その1
</th>
<th>
トッピング・その2
</th>
</tr>

<tr>
<td bgcolor="white">
いろいろ・その1
</td>
<td>
いろいろ・その2
</td>
</tr>

</table>
トッピング・その1 トッピング・その2
いろいろ・その1 いろいろ・その2




bordercolorlight
 ・・・枠の上と左側の色

(立体感をもたせる)

bordercolordark
 ・・・枠の下と右側の色

cellspacing
 ・・・枠の太さ

cellpadding
 ・・・枠線と表中の文字との位置



真面目な教授「説明は表の中の空欄に書いておいたので分かるぢゃろ。後は・・レタスの味付けぢゃが、(<table>に挿入できること)『width="" height=""初めからテーブルの大きさを指定することも可能ぢゃ。また、『bordercolor=""』だけで、枠の線の色だけ変える事もできるんぢゃぞ。」
頭の中で整理中の助手「ふむふむ・・。」
わかったかな?と心配してる教授「それと、<tr><th><td>の中には、『align="left/center/right"』『valign="top/middle/bottom/baseline"』で、セル中の文章の位置を指定できるのぢゃ。alignは水平方向、valignは垂直方向ぢゃ。<tr>の中で指定すれば、その列の全部のセルが同じ設定になるのぢゃ。」
必死で整理している助手「ふむふむ・・。」
ホントに大丈夫なのかな?と心配してる教授「後は・・そうぢゃな、こんなとこかのぉ。」

ソース 表 示
<table border bordercolor="red">
<tr><td rowspan="3">色</td><td>青</tr></tr>
<tr><td>黄</td></tr>
<tr><td>紫</td></tr>
</table>
<br>
<table border >
<tr><td colspan="3" align="center">色</td></tr>
<tr><td>青</td><td>黄</td><td>紫</td></tr>
</table>
<br>



そろそろ終わりだと思う教授「見てもらえばわかるように、rowspan=は、セルの縦幅を調整し、colspan=は、セルの横幅を調整するんぢゃ。」>/a>
あれこれで、整理がしきれなくなっている助手「あ・・そうなんですか・・ふむふむ・・。」
ちょっと焦っている助手「で、では、今日の講義はこのへんで・・。どうもお疲れさまでした、教授。あちらでお茶でも。」



いやに展開が早いな、と感じる教授「お?それは、かたぢけない。では、みなさん、今日はわしの講義を聴いて下さり、誠にありがとうございました。また会える日を楽しみにしておりますぢゃ。」



頭が一杯で、ごまかし笑いする助手「・・どうもご静聴、ありがとうございました。基礎編は、これにて終了致します。ご要望、ご意見、ご感想などございましたら、葛葉まで、お気軽にmail下さい。」
ご機嫌の教授「そうぢゃな。課外授業とかできるかもしれんしのぉ。」
ひたすらごまかし笑いする助手「私は、ちょっとまとめてみようかと・・。」
ご機嫌の教授「今までの講義の応用で、葛葉程度のHPなら十分作れるはずぢゃ。なに?あの程度では不満とな?・・・しかしぢゃなぁ、あれでも葛葉は一生懸命なんぢゃぞ。笑わんでおいてくれ。・・後は、そうぢゃな、タグをいかに応用するか、それと素材とセンス・・ぢゃろうな?まー、頑張ってくれたまえ!」

ご機嫌の教授整理なんてできるのか?と思ってもいる助手「では、またいつかお会いしましょう!」


<< ホットミルク・基礎(完) >>


どうもありがとうございました!!しばらく勉強をします。(ホント?)/^-^;

前ページへ 【ホットミルク講座】目次へ 次ページへ

教授の挨拶は飛ばして課外授業(フレーム)へ行きたいひとは、ここをクリック!(笑

【タグ辞典INDEX】 【Html Index】

[ここへジャンプしてきたページに戻る]