比如建一个100%长度的盒子，背景用A.GIF这个图片。如果用TABLE：
| <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td background="A.GIF"> </td> </tr> </table> |
如果用DIV：
|
<div style="width:100%; background: url(A.GIF);"></div> |
你可能会说，等等，width:100%; background: url(A.GIF);这似乎就是css?是的。你完全可以将其写在css中，比如.name1，然后用div的class引用。这样未来修改会更加简单。
然而对于table来说，实现一个左、中、右布局的网页非常简单。但是你可能会在div的对齐中只看到了:左、右。中间呢?而且div无法像table一样能产生"列"。
什么是盒子？你创建一个div,宽50px,高50px。那么这个盒子的大小就是这么大。你所有内容都在这个盒子限定的范围内完成。盒子将帮助你排版。注意盒子模型这个概念，在div建设中非常重要。默认情况下无论你的div宽度多少，第二个div始终在第一个的下面，就像是换行。然而如果你指定了对其方向，那么他会根据对齐的方向排列。比如如果我指定了div为排布为左，那么第二个就会出现在第一个div的右面，从左向右依次排列。
为了方便大家理解盒子排版原理，先察看上面这张图。WRAPBOX是最外层的DIV，那么BOX1、BOX2、BOX3分别是镶嵌在里面的DIV，BOX4与BOX5是镶嵌在BOX1内的DIV。
WRAPBOX的作用是为了限定BOX1、BOX2、BOX3的位置。如果将BOX1、2、3的对齐方式都设置为向左对齐，并且3个BOX加起来宽度不会超过WRAPBOX宽度，那么就应该会如图这样排列。为何要在这儿强调加起来的总宽度不会超过？我们假设一下，WRAPBOX宽度100PX，BOX1与BOX2加起来60PX。这时如果BOX3为50PX，就会因为右面剩余的空间不够其摆放，而移动到下一行。当然，你可以用这个特性作更加复杂的排版。
BOX4与BOX5在BOX1里面。当然，你现在看到它可能因为换行了，所以不需要做：float:left;(向左对齐)这样的声明。但是我个人建议是加上他。因为如果在box4内，有一个li或者其他什么东西，有对齐，或者在box5下方有一个box设置了对齐，那么有可能在某些浏览器中排版会乱掉。
好了，让我们看下以上这种框架，如何在用div+css写出来：
| <style type="text/css"> <!-- #wrapbox { width: 400px; height:400px; background: #CED6FF; } #box1 { width: 100px; height:100%; float:left; background: #FF0000; } #box2 { width: 200px; height:100%; float:left; background: #FFAE00; } #box3 { width: 100px; height:100%; float:left; background: #FFFC00; } #box4 { width: 100px; float:left; background: #87CD00; } #box5 { width: 100px; float:left; background: #A5FB00; } --> </style> <div id="wrapbox"> <div id="box1"> box1 <div id="box4">box4</div> <div id="box5">box5</div> </div> <div id="box2"> box2 </div> <div id="box3"> box3 </div> </div> |
相对于table来说，div的结构显得很清晰，不是吗？
注意，IC交易网div+css不等于所有东西都使用div。还需要试用诸如h2、p、li、ul、li之类的标签。这些标签有其意义(对于浏览器来说)。并且有默认的样式，你可以根据自己的需要，定义他。
既然如此，为何我们还要卖命的将table转换到div？IC报价网而且div相对于table来说，在各个浏览器之间的兼容性始终有问题，需要不停调试。最大的作用是未来你能方便的修改网页。另外，table始终是等待表格内内容全部load完毕，然后才显示，而div是先显示盒子模型，再load内容。如果你整个网页用了一个大table套着，那么很可能浏览者打开网页后，很长一段时间内什么都看不到。
"
