テーブルレイアウト(2)
tableタグ使用
|
|
⇔ |
|
|
<table border="0" cellpadding="0" cellspacing="0" width="100" height="100">
<tbody>
<tr>
<td><img src="e1.gif" width="20" height="20" border="0"></td>
<td bgcolor="#ffcfce" width="60"></td>
<td><img src="e2.gif" width="20" height="20" border="0"></td>
</tr>
<tr>
<td bgcolor="#ffcfce"></td>
<td bgcolor="#ffcfce" height="60"></td>
<td bgcolor="#ffcfce"></td>
</tr>
<tr>
<td><img src="e4.gif" width="20" height="20" border="0"></td>
<td bgcolor="#ffcfce"></td>
<td><img src="e3.gif" width="20" height="20" border="0"></td>
</tr>
</tbody>
</table>
<tbody>
<tr>
<td><img src="e1.gif" width="20" height="20" border="0"></td>
<td bgcolor="#ffcfce" width="60"></td>
<td><img src="e2.gif" width="20" height="20" border="0"></td>
</tr>
<tr>
<td bgcolor="#ffcfce"></td>
<td bgcolor="#ffcfce" height="60"></td>
<td bgcolor="#ffcfce"></td>
</tr>
<tr>
<td><img src="e4.gif" width="20" height="20" border="0"></td>
<td bgcolor="#ffcfce"></td>
<td><img src="e3.gif" width="20" height="20" border="0"></td>
</tr>
</tbody>
</table>
css使用
<div style="width : 100px;">
<div style="float : left;width : 20px;height : 20px;background-image : url(e1.gif);"></div>
<div style="float : left;width : 60px;height : 20px;background-color : #ffcfce;"></div>
<div style="float : left;width : 20px;height : 20px;background-image : url(e2.gif);"></div>
<br style="display: block; clear: both;">
<div style="float : left;width : 20px;height : 60px;background-color : #ffcfce;"></div>
<div style="float : left;width : 60px;height : 60px;background-color : #ffcfce;"></div>
<div style="float : left;width : 20px;height : 60px;background-color : #ffcfce;"></div>
<br style="display: block; clear: both;">
<div style="float : left;width : 20px;height : 20px;background-image : url(e4.gif);"></div>
<div style="float : left;width : 60px;height : 20px;background-color : #ffcfce;"></div>
<div style="float : left;width : 20px;height : 20px;background-image : url(e3.gif);"></div>
<br style="display: block; clear: both;">
</div>
<div style="float : left;width : 20px;height : 20px;background-image : url(e1.gif);"></div>
<div style="float : left;width : 60px;height : 20px;background-color : #ffcfce;"></div>
<div style="float : left;width : 20px;height : 20px;background-image : url(e2.gif);"></div>
<br style="display: block; clear: both;">
<div style="float : left;width : 20px;height : 60px;background-color : #ffcfce;"></div>
<div style="float : left;width : 60px;height : 60px;background-color : #ffcfce;"></div>
<div style="float : left;width : 20px;height : 60px;background-color : #ffcfce;"></div>
<br style="display: block; clear: both;">
<div style="float : left;width : 20px;height : 20px;background-image : url(e4.gif);"></div>
<div style="float : left;width : 60px;height : 20px;background-color : #ffcfce;"></div>
<div style="float : left;width : 20px;height : 20px;background-image : url(e3.gif);"></div>
<br style="display: block; clear: both;">
</div>