Question

如何用table和div两种方式实现下面的图形

Answer 1

如果要考虑边框线的宽度，div更复杂一些。看代码吧！

<!----------------------- 表格实现开始 ------------------------------>
<table width="360" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
  <tr>
    <td colspan="2" style="width:120px; height:80px;border:1px solid #000;"></td>
    <td rowspan="2" style="width:120px; height:80px;border:1px solid #000;"></td>
  </tr>
  <tr>
    <td style="width:120px; height:40px;border:1px solid #000;"></td>
    <td style="width:120px; height:40px; border:1px solid #000;"></td>
  </tr>
</table>
<!----------------------- 表格实现结束 ------------------------------>

<div style="width:100%; height:100px; line-height:100px;">下方采用div实现上图的效果</div><!-- 表格与div空出100个像素。。。 -->

<!----------------------- div实现开始 ------------------------------>
<div style="width:360px;">
	<div style="width:239px; float:left; border:1px solid #000;">
    	<div style="width:239px; height:80px; border-bottom:1px solid #000;"></div>
        <div style="width:119px; height:40px; float:left; border-right:1px solid #000;"></div>
        <div style="width:119px; height:40px; float:left;"></div>
    </div>
    <div style="width:118px; height:121px; border-bottom:1px solid #000; border-right:1px solid #000; border-top:1px solid #000; float:left;">
    </div>
</div>
<!----------------------- div实现结束 ------------------------------>

Answer 2

<table border="1">
 <tr>
  <td colspan="2">1</td>
  <td rowspan="2">4</td>
 </tr>
 <tr>
  <td >2</td>
  <td >3</td>
 </tr>
</table>

样式表自己搞

Answer 3

用4个层，1、4、2和3，在2和3的层里面建表就可以了