本文部分內容轉載自：http://www.html5tricks.com/why-not-table-layout.html
剛剛接觸html的時候，利用table進行頁面布局是比較容易的。但是，在實際的項目開發過程中，我們不建議用table進行布局，原因如下：
- table比其它html標記占更多的字節。（造成下載時間延遲，占用服務器更多流量資源）
- table會阻擋瀏覽器渲染引擎的渲染順序。（會延遲頁面的生成速度，讓用戶等待更久的時間）
- table里顯示圖片時需要你把單個、有邏輯性的圖片切成多個圖。（增加設計的復雜度，增加頁面加載時間，增加http會話數）
- 在某些瀏覽器中，table里的文字的拷貝會出現問題。（會讓用戶不悅）
- table會影響其內部的某些布局屬性的生效（比如<td>里的元素的height:100%) （限制頁面設計的自由性）
- 一旦學了CSS的知識，你會發現使用table做頁面布局會變得更麻煩。（先花時間學一些CSS知識，會省去你以后大量的時間）
- ‘table對’對於頁面布局來說，從語義上看是不正確的。（它描述的是表現，而不是內容）
- table代碼會讓閱讀者抓狂。（不但無法利用CSS，而且會不知所雲，尤其在進行頁面改版或內容抽取的時候）
- table一旦設計完成就變成死的，很難通過CSS讓它展現新的面貌。（CSS ZEN GARDEN：http://www.csszengarden.com/）
table的好處
在某些場合，使用table是完全合適、恰當和准確的。比如用table做表格。如果無法判斷是否應該使用table，請問自己幾個問題：
- “是否這些行或者列的信息共享某一個屬性？比如每行顯示一個學生的信息，所有學生都有個‘姓名’屬性。”
- “如果我改變了這些行或者列的順序，是不是依然有意義或者有同樣的效果？”
- “如果我將行變成列或者將列變成行，是不是依然有意義或者有同樣的效果？”
如果答案僅僅是“我猜……也許不是”，那么就不應該用table。更多信息請參考“為什么用table布局不如HTML+CSS”。
不用table怎樣讓兩個span顯示在同一行
在進行HTML+CSS布局的時候，經常會遇到需要將控件（span、div等）放到同一行的情況，參考下面的代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-31j"> <title>Insert title here</title> <style type="text/css"> div { width: 24px; overflow-x:hidden; white-space: nowrap; } span { width: 15px; display:inline-block; border-style:solid; border-width:1px; } </style> </head> <body> <div> <span></span><span></span> </div> </body> </html>