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

テーブルのHTMLを解剖してみる　3.
　　　　-----------------　ソース7　<スぺーサーgifを入れて完成>　---------------------
　<table width="235" border="0" cellspacing="0" cellpadding="0">
　<tr>
　<td width="25" height="25"><img src="came_aom_a.gif" width="25" height="25"></td>
　<td width="185" background="came_aom_1.gif"><img src="spacer.gif" width="1" height="1"></td>
　<td width="25" height="25"><img src="came_aom_b.gif" width="25" height="25"></td>
　</tr>
　<tr>
　<td width="25" height="51" background="came_aom_2.gif"><img src="spacer.gif" width="1" height="1"></td>
　<td width="185">Painter.Photoshop.Illustrator<br>
　Canvas.Dreamweaver.Fireworks<br>
　Gimp.Pixcelpaint.Clarisdraw. <br>
　</td>		 　
　<td width="25" height="51" background="came_aom_3.gif"><img src="spacer.gif" width="1" height="1"></td>
　</tr>
　<tr>
　<td width="25" height="25"><img src="came_aom_c.gif" width="25" height="25"></td>
　<td width="185" background="came_aom_4.gif"><img src="spacer.gif" width="1" height="1"></td>
　<td width="25" height="25"><img src="came_aom_d.gif" width="25" height="25"></td>
　</tr>
　</table>

　　　----------------------------------------------------------------------------------------------------------

　　以上の様に出来上がりましたが、これが唯一の正解と言うわけではありません。ソフトによる
　　記述の違いは当然ありますし、同じソフトでも作り方の順序が変わると記述も変わったりします。
　　ただ、大まかなところはこんなものだとご理解下さい。　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　--------------TIPS-----------------　
　　　　・デザイン画面を弄り回すとコードに余計なタグがあちらこちらに入ってしまいますが、
　　　　　掲載したソースコードは必要最小限のものですから、これを見ながらコードの
　　　　　シェイプアップをするとブラウザでの読み込みが早くなります。
　　　　-----------------------------------------------------------------------------------------------------
　　　　　　　　　　　　　　　　　　前項 1.へ　　　2.へ