04 May 2009

Mengatur Template dengan Tabble | Arrange Template With Table

Indeed quite simple and quite difficult to make, As an illustration, I will make the boxes that I will make with div and table, to know the meaning. My picture is umpamakan a widget.

If made with div tags



sexy


hot


sweet




Use this code to make the boxes as above:



<div style="border:1px solid #cccccc; padding:5px;">
<div style="width:32%; float:left; border:1px solid #cccccc; text-align:center;">
<img src="...../Jeon_Ji_Hyun.jpg" alt="image1" />
</div>
<div style="width:32%; float:left; border:1px solid #cccccc; text-align:center;">
<img src="...../Jeon_Ji_Hyun.jpg" alt="image1" />
</div>
<div style="width:32%; float:left; border:1px solid #cccccc; text-align:center;">
<img src="...../Jeon_Ji_Hyun.jpg" alt="image1" />
</div>
<div class="clear"></div>
</div>



If made with table






image1image1image1


Code for table above:



<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td align="center"><img src="...../Jeon_Ji_Hyun.jpg" alt="image1" /></td>
<td align="center"><img src="...../Jeon_Ji_Hyun.jpg" alt="image1" /></td>
<td align="center"><img src="...../Jeon_Ji_Hyun.jpg" alt="image1" /></td>
</tr>
</table>



Compare any more simple? Not if the div tag you want to make more complex, the levels of div should be more complicated

No comments:

Post a Comment