気まぐれ物置　HTMLの解剖　全3頁の2
「飾り枠制作」はこちら　　　
　

　

 　

テーブルのHTMLを解剖してみる　2.
-----------------　ソース4　< 両端に画像を入れサイズを決めると>　---------------------
　<table width="180" border="0" cellspacing="0" cellpadding="0">
　<tr>
　<td width="25"><img src="came_aom_a.gif" width="25" height="25"></td>
　<td width="130">　</td>
　<td width="25"><img src="came_aom_b.gif" width="25" height="25"></td>
　</tr>
　以下は数値が変わっただけですので
　省略します。
-------------------------------------------------------------------------------
------------------------　ソース 5　< 背景画像を入れると>　---------------------------　
　<table width="180" border="0" cellspacing="0" cellpadding="0">

　<tr>
　<td width="25"><img src="came_aom_a.gif" width="25" height="25"></td>

　<td width="130" background="came_aom_1.gif">　</td>

　<td width="25"><img src="came_aom_b.gif" width="25" height="25"></td>
　<tr>

　以下は変化がありませんので
　省略します。
　　　　　　　「幅130pxのセルに、"came_aom_1.gif"と言う名前の画像を
　　　　　　　 background=（背景）として表示する」と入りました。ー藤色部分ー
-------------------------------------------------------------------------------
------------------------　ソース6　<全ての画像を入れると>　---------------------------

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

　<tr>
　<td width="25"><img src="came_aom_a.gif" width="25" height="25"></td>

　<td width="130" background="came_aom_1.gif">　</td>

　<td width="25"><img src="came_aom_b.gif" width="25" height="25"></td>
　</tr>
　<tr>

　<td width="25" background="came_aom_2.gif">　</td>

　<td width="130">　</td>

 　　これが中心のセルです、ここにテキストを入れます。

　<td width="25" background="came_aom_3.gif">　</td>

　</tr>
　<tr>
　<td width="25"><img src="came_aom_c.gif" width="25" height="25"></td>

　<td width="130" background="came_aom_4.gif">　</td>

　<td width="25"><img src="came_aom_d.gif" width="25" height="25"></td>
　</tr>
　</table>
　　　　　　　　
　　　これにテキストを入れてみますと…　　　　伸びました。下がこの図の中心セルのソースです。

　<tr>
　<td width="25" background="came_aom_2.gif">　</td>

　<td width="185">Painter.Photoshop.Illustrator<br>
　Canvas.Dreamweaver.Fireworks<br>
　Gimp.Pixcelpaint.Clarisdraw.<br>
　</td>

 　一番長い文字列にあわせてセルの
　幅の数値が変わりました。

　<br>は改行タグです。
　<td width="25" background="came_aom_3.gif">　</td>
　</tr>
-------------------------------------------------------------------------------
　　　　　　　　　　　　　　　　　--------------TIPS-----------------　　
　　　　　　　　　　・デザイン画面からセルのサイズを調整しようとすると上手く
　　　　　　　　　　　いかないことがありますが、そんな時にはコードを書き換えて
　　　　　　　　　　　更新してしまうと簡単に調整することが出来ます。
　　　　　　　　　　・コードを弄るのは始めてと言う方に、数値の書き換えは特にお奨めです。
　　　　　　　　　　　場所もわかりやすく、効果も一目瞭然です。
　　--------------------------------------------------------------------------------------------------------
　　　　　　　　　　　　　　　　　　　前項 1.へ　　　次項 3.へ