1、簡介：為何使用表格排版是不明智的？
表格之所以存在於 HTML 中，只是為了一個目的：顯示表格狀的數據。然而此後的 border="0" 使得設計師可以將圖片和文本放在這無形的網格中。迄今為止，表格仍然主導著視覺豐富的網站的設計方式，但它卻阻礙了一種更好的、更有親和力的、更靈活的，而且功能更強大的網站設計方法。
2、概覽：這對我有什麼用處？
我們將告訴你這樣一種工作方式，它會：
使你的頁面載入得更快
降低你的流量費用
讓你在修改設計時更有效率而代價更低
幫助你的整個站點保持視覺的一致性
讓你的站點可以更好地被搜索引擎找到
使你的站點對浏覽者和浏覽器更具親和力
在世界上越來越多人采用 Web 標准時，它還能 提高你的職場競爭實力 (事實上也就是降低失業的風險)。
3、表格帶來的問題
把格式數據混入你的內容中。
這使得文件的大小無謂地變大，而用戶訪問每個 頁面時都必須下載一次這樣的格式信息。
帶寬並非免費。
這使得重新設計現有的站點和內容極為消耗勞力 (且昂貴)。
這還使我們保持整個站點的視覺的一致性極難，花費也極高。
基於表格的頁面還大大降低了它對殘疾人和用手機或 PDA 浏覽者的親和力。
4、過渡性的設計
使用 margin 和 padding 來代替多余的表格單元和間隔 GIF。
使用 link 和 @import 來載入樣式。前者用於早期浏覽器，後者給現在的浏覽器。
<link href="../../basic.CSS" rel="stylesheet" type="text/CSS">
<style type="text/CSS" media="screen"><!--
@import url(modern.CSS) screen;
--></style>
5、結構化標記：所寫即所想，所想即所寫
即便書寫 CSS 很簡單，使用 CSS 來排版卻真的需要一種和我們以往有些不同的思維方式。
我們排版時考慮的不是“這個東西放在這兒，那個東西放在那兒”，而是頁面中信息的類別和信息的結構。
我們用 <h1> 標記來標示最重要的頭條；次一級的條目則用 <h2> 來標記，以此類推；而段落則放在 <p> 標記中。
這就是我們稱之為“結構標記”或“語義標記”的東西。
你的內容將不放在表格和表格元素中，取代它們的是 div 元素。還要給你的 div 元素安排一個 id 或 class，不過這是為了描述它們的內容或功能，而非它們的外觀。
當你把某個對象設為斜體時，大概要麼就是想強調它，要麼是想 引用某個書中標題吧？ 如果是前者，應該用 <em>；如果是後者，其實得用 <cite>。
如果某個對象被標記為粗體，事實上它應該被標記的是， <strong>。
如果你希望在某處添加一個換行，這大概是開始了一個新的開頭。如果不是開頭，會不會是某種在你的站點中出現過的class (類型)？在上面兩種情況下，你都應該用 CSS 替換 <br>。
.foo {display:block}
考慮你需要導航的內容是一些無序的鏈接這種情況：
用 <ul> 標簽來編輯它們。
link1
link2
link3
link4
link5
水平導航條
我們可以用 CSS 來控制這個列表顯示在網頁上的外觀。
通過使用 display:inline 我們可以創建水平導航條。
link1
link2
link3
link4
link5
這是上面這個導航條用到的代碼：
#nav1{
margin-top: 1em;
margin-bottom: 0.5em;
}
#nav1 ul {
background-color: silver;
text-align: center;
margin-left: 0;
padding-left: 0;
border-bottom: 1px solid gray
}
#nav1 li {
list-style-type: none;
padding: 0.25em 1em;
border-left: 1px solid white;