div與span的差異，div與table的Layout探討
1.div與span皆是Block element，兩者用途機盡相同。
都是用來做切割網頁區塊，為有不同的地方就是
<div>會占用一行，而<span>不會
例如：
aaa
bbb
ccc ddd
網頁原始碼為
<div>aaa</div> <div>bbb</div> <span>ccc</span> <span>ddd</span>
2.再來看<div>與<table>的Layout有何不同
(1)使用Table方式
Main Title of Web Page |
|
| Menu HTML CSS JavaScript |
Content goes here |
| Copyright ? W3Schools.com | |
<table style="width:500px;" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" style="background-color:#FFA500;"> <h1 style="margin:0;padding:0;">Main Title of Web Page</h1> </td> </tr> <tr> <td style="background-color:#FFD700;width:200px;vertical-align:top;"> <b>Menu</b><br> HTML<br> CSS<br> JavaScript </td> <td style="background-color:#eeeeee;height:200px;width:400px;vertical-align:top;"> Content goes here </td> </tr> <tr> <td colspan="2" style="background-color:#FFA500;text-align:center;"> Copyright � W3Schools.com </td> </tr> </table>
結果：這整個Table的寬度是500px，底下的左區塊為200px，右區塊為400px，
但在<table>底下左右區塊會由200+400=600px整合成500px，
而且還不好得知600px所被吃掉的100px怎麼分配給左右區塊的?這是件很奇怪的事情。
(2)使用Div方式
Main Title of Web Page
Content goes here
<div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">Main Title of Web Page</h1> </div> <div id="menu" style="background-color:#FFD700;height:200px;width:200px;float:left;"> <b>Menu</b><br> HTML<br> CSS<br> JavaScript </div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> Content goes here </div> <div id="footer2" style="background-color:#FFA500;clear:both;text-align:center;"> Copyright � W3Schools.com </div></div>
討論：整個<div>寬度為500px，左區塊故意設定200px，右區塊為400px，
左右區塊加起來為600px，超過500px，如上很容易得知版面不協調，也知道如何作調整。
參考資料：