htmlのｔａｂｌｅで日記をつくりたい・・・・

はじめましてこんにちわ。
私は今HP作成の勉強をしています。
tableで角が丸いものはつくれるようになりました。
その後tableの周りのtd8箇所かな？に画像が入っている日記を作ろうと頑張っていますがどうもうまくいきません。

幅はそのままで、文字を入れると縦に伸びるように作りたいのです。四隅の画像はつねにそのままで、その他の画像は文字を入れると伸びてほしいのですが・・・どうも４角の画像が繰り返されて伸びたり・・伸びてほしいところが伸びなかったり・・・
いったいどうしたらいいのでしょうか・・

どこかわかりやすく説明されているサイトや、このtableの作り方をご存知の方はせひ教えてください。
よろしくお願いいたします。。

No.1 回答者： non_milky 回答日時： 2005/02/03 14:27

うまくいかないソースをコピー＆ペーストして頂ければ

どこが間違っているのか見ること出来ますよ。

この回答への補足

お返事ありがとうございます。
必死で考えて何とかうまくいきました？！
しかしこの方法であっているんでしょうか？？
もっといい方法などがありましたらアドバイスよろしくお願い致します。ちなみに縦と横の画像はただの棒線画像です。みにくいソースでごめんなさい（**）


<style type="text/css"><!--

td.kotei{ background-repeat : no-repeat ; }

--></style>

<table border="0" width="480" cellspacing="0" cellpadding="0">

<tr>
<td class="kotei" width="30px" height="30px" background="img/puka.gif"></td>
<td width="30px" height="30px" background="img/yoko.gif"></td>
<td class="kotei" width="30px" height="30px" background="img/sora.gif"></td>
</tr>

<tr>
<td width="30px" height="30px" background="img/tate.gif"></td>
<td>
２月５日（木） <img src=img/ame.gif><br><br>

日記のテスト中・日記のテスト中・日記のテスト中・
日記のテスト中・日記のテスト中・日記のテスト中・
日記のテスト中・日記のテスト中・日記のテスト中・
日記のテスト中・日記のテスト中・日記のテスト中・
日記のテスト中・日記のテスト中・日記のテスト中・
日記のテスト中・日記のテスト中・日記のテスト中・
日記のテスト中・日記のテスト中・日記のテスト中・
</td>

<td width="30px" height="30px" background="img/tate.gif"></td>
</tr>

<tr>
<td class="kotei" width="30px" height="30px" background="img/sora.gif"></td>
<td width="30px" height="30px" background="img/yoko.gif"></td>
<td class="kotei" width="30px" height="30px" background="img/puka.gif"></td>
</tr>

</table>

補足日時：2005/02/04 10:30

No.2 回答者： kumaya77 回答日時： 2005/02/03 14:28

四隅は背景でなくて，<img>で画像を入れる。

のびてほしい画像はセルの背景として繰り返しにしておくとよいです。スタイルシートのほうがやりやすいと思いますが。

この回答へのお礼

お返事ありがとうございます。
なるほど・・。全部imgで貼り付けていました。
伸びてほしい所は背景として扱えばいいんですね～
なるほど・・・是非やってみたいと思います！

お礼日時：2005/02/04 10:34

No.3 回答者： yogo 回答日時： 2005/02/03 14:59

http://tgtag.chu.jp/index.html
テーブルテンプレートの載っているサイトさんです。

毎日書く日記になるとアップロードがめんどくさくなったりするので
レンタル掲示板を日記風にカスタマイズしたり
ＣＧＩ設置可能ならばそれを置いたり
blogを使うのも一つの手ですよ。

いずれにせよ、HTMLの知識があると便利ですよね。
がんばってください。

参考URL：http://tgtag.chu.jp/index.html

この回答へのお礼

早速上記サイトに飛んでみました。
素敵なサイトですね～～～！とても勉強になりそうです。沢山テンプレートがのっていました。
頑張ります！

お礼日時：2005/02/04 10:36

No.4 回答者： Nishikino 回答日時： 2005/02/03 15:37

tableタグやtdタグにwidth=XXを入れてサイズを確定させておくと、崩れがなくなると思いますよ。

この回答へのお礼

お返事ありがとうございます。
昨日悪戦苦闘しながらやってみた結果、
なんとか形にはなりました。
ｈｔｍｌ・・・難しいですね～でも楽しい！
頑張ります。

お礼日時：2005/02/04 10:40

No.5 回答者： non_milky 回答日時： 2005/02/04 19:45

こんばんは。

いくつか間違えているところがあったので、
下記にコメントを入れてみました。

やり方としては、

◆テーブルが崩れないように基本的に全ての幅・高さに数値を入れて固定する。
◆ただし、テキストが長くなった時、下にテーブルが伸びていくように、
伸びるところの高さだけは固定しない。

ということになります。
伸びて欲しいところは3箇所あって、
1）日記を書くところ　2）その左側　3）その右側　です。

以下、修正したところに★が入っています。

<table border="0" width="480" cellspacing="0" cellpadding="0">
<tr>
<td class="kotei" width="30" height="30" background="img/puka.gif"></td>
<td ★width="420"★ height="30" background="img/yoko.gif"><br>
<!-- ↑ここはテキストの上部分です。横幅は480-（30 ×2）＝420で固定します--><br>
</td>
<td class="kotei" width="30" height="30" background="img/sora.gif"></td>
</tr>

<tr>
<td width="30" ★ background="img/tate.gif">
<!--↑ココはテキストの左隣で一緒に下に伸びて行って欲しい部分です。
なのでheight="30"は取ります。-->
</td>
<td ★width="420"★>
<!-- ↑ここはテキスト部分です。
横幅は420に固定しておきましょう。 -->
２月５日（木） <img src=img/ame.gif><br><br>

日記のテスト中・日記のテスト中・日記のテスト中・
日記のテスト中・日記のテスト中・日記のテスト中・
</td>

<td width="30" ★ background="img/tate.gif">
<!-- ↑ココはテキストの右隣です。左隣と同じくheight="30"は取ります。 --><br>
</td>
</tr>

<tr>
<td class="kotei" width="30" height="30" background="img/sora.gif"></td>
<td ★width="420"★ height="30" background="img/yoko.gif">
<!-- ↑ココはテキストの下です。ここも幅を420に固定します。 -->
</td>
<td class="kotei" width="30" height="30" background="img/puka.gif"></td>
</tr>
</table>

分からないところがあったら、聞いてください＾＾

No.6 ベストアンサー 回答者： non_milky 回答日時： 2005/02/04 19:53

#5です。

ごめんなさい、↓は変なところで改行入っちゃってました；
一応、完成版（コメントを削除したもの）も投稿しておきますね。

<table border="0" width="480" cellspacing="0" cellpadding="0">
<tr>
<td class="kotei" width="30" height="30" background="img/puka.gif"></td>
<td width="420" height="30" background="img/yoko.gif"></td>
<td class="kotei" width="30" height="30" background="img/sora.gif"></td>
</tr>
<tr>
<td width="30" background="img/tate.gif"></td>
<td width="420"> ２月５日（木） <img src=img/ame.gif>
日記のテスト中・日記のテスト中・日記のテスト中・
日記のテスト中・日記のテスト中・日記のテスト中・
</td>
<td width="30" background="img/tate.gif"></td>
</tr>
<tr>
<td class="kotei" width="30" height="30" background="img/sora.gif"></td>
<td width="420" height="30" background="img/yoko.gif"></td>
<td class="kotei" width="30" height="30" background="img/puka.gif"></td>
</tr>
</table>

この回答へのお礼

なななななるほどぉ～！足し算、引き算をしないとだめなんですね～。ありがとうございます、とてもよくわかりました。ｈｔｍｌもｃｓｓも難しいですね（**）今はあちこち触りながら、あ～こうなるのか、あ～なるほどと・・悪戦苦闘しながら前へ進んでいます。私にもnon_milkyさんのように理解できる日がくるんでしょうか・・。いつか理解できる日がくると信じて頑張りたいと思います。ありがとうございました！！

お礼日時：2005/02/04 22:34