模板
教程
環境
性能
功能
管理
為何使用表格排版是不明智的
找出問題，對癥下藥
表格之所以存在于 HTML 中，只是為了一個目的：顯示表格狀的數據。然而此后的 border="0" 使得設計師可以將圖片和文本放在這無形的網格中。迄今為止，表格仍然主導著視覺豐富的網站的設計方式，但它卻阻礙了一種更好的、更有親和力的、更靈活的，而且功能更強大的網站設計方法。下面我們開始尋找這個問題滋生的源頭，并學習創建過渡性的，甚或完全不需表格的排版方式。
概覽：這對我有什么用處？
我們將告訴你這樣一種工作方式，它會：
- 使你的頁面載入得更快
- 降低你的流量費用
- 讓你在修改設計時更有效率而代價更低
- 幫助你的整個站點保持視覺的一致性
- 讓你的站點可以更好地被搜索引擎找到
- 使你的站點對瀏覽者和瀏覽器更具親和力
- 在世界上越來越多人采用 Web 標準時，它還能 提高你的職場競爭實力 (事實上也就是降低失業的風險)。
我們還會討論如何用層疊式樣式表 (CSS) ——也許是一個和你曾經采用的方式 (表格) 有些微不同的——思維方式來處理你的內容和標記。
魔鬼網站：嵌套的表格與 GIF 分隔圖片
開始的時候，Internet 不過是學校、研究者和軍方用來交換信息的一個媒介罷了。然而那些早期的夢想家們沒花多長時間就發現：這實在是個理想的媒體，尤其對于銷售從新鮮農產品和狗糧到二手車和實時體育報道來說。
即便如此，和其他媒體的幼年時期一樣，早期的 Internet 看起來是那么的‘粗糙’ (以至于實在不怎么能吸引顧客)。直到大概 1997 年的時候，David Siegel 出版了他那本里程碑式的書*，它在當時有限的瀏覽器功能和 W3C 標準之下，設計出非常華麗的網頁效果。(朋友，其實我們說的是 Netscape 2 和 3 啰。)
這些效果是多么漂亮啊，以至于到今天，它們還是最流行的網頁排版方式。
[*]譯注：David Siegel 這本書的名字是 "Creating Killer Web Sites"，表明用表格和分隔 GIF 可以設計出魔鬼般迷人的站點。
表格帶來的問題：
- 把格式數據混入你的內容中。
- 這使得文件的大小無謂地變大，而用戶訪問每個 頁面時都必須下載一次這樣的格式信息。
- 帶寬并非免費。
- 這使得文件的大小無謂地變大，而用戶訪問每個 頁面時都必須下載一次這樣的格式信息。
- 這使得重新設計現有的站點和內容極為消耗勞力 (且昂貴)。
- 這還使我們保持整個站點的視覺的一致性極難，花費也極高。
- 基于表格的頁面還大大降低了它對殘疾人和用手機或 PDA 瀏覽者的親和力。
解決方案近在眼前
現在的瀏覽器在支持 Web 標準方面有了很大的改進，所以我們再也不必使用那些古老的方式了。
我們將去掉那些表格里嵌套的表格和用 GIF 填充的單元，代之以簡潔的標記和 CSS 排版出的載入快速、修改方便、對所有人都那么有親和力的漂亮站點。
解決方案：CSS 與結構化標記
通過在 HTML 文檔中使用結構化的標記以及層疊式樣式表來排版，我們可以使頁面的實際內容與它們呈現的格式相分離。
比之使用表格，它有這么一些優勢....
把頁面中的外觀標記去除以后，重新設計現有的站點和內容將變得非常節省人力 (同時便宜得多)。如果想改變站點的輸出，你只需要改動一下樣式表就行了，而完全不必改動頁面本身。
比如說，你可以看看 CSS Zen Garden，或者 Eric Meyer 的站點 上的樣式切換器。如果想了解更多，可以看看 Paul Sowden 寫的 Alternative Style。
帶寬并非免費
運用 Web 標準來縮減網頁文件的大小，這樣用戶將不必訪問每頁都下載一次外觀的數據?？刂戚敵鲂Ч臉邮奖硎怯捎脩舻臑g覽器自動緩存的。
縮減文件大小意味著更快地載入和更少的流量費用。
嘿，這些網頁就像一個模子里刻出來的！
運用 Web 標準還能使保持整個站點的視覺一致性變得非常簡單。因為頁面使用同樣的 CSS 文檔來進行排版，所以它們會被格式化為相同的風格。
這樣加深了你的站點給人的印象還能使它更便于使用。
一次編輯，到處應用，人人皆然
運用 Web 標準使得你的站點對殘疾人和使用手機或 PDA 的 Web 瀏覽者 更具親和力。
使用讀屏器 [2] 的訪問者 (或者連接速度比較慢的訪問者) 不希望在下載了數不盡的表格單元和分隔圖片后才獲得我們頁面的實際內容。
換句話說，把內容與格式分開使得你的內容與設備無關。
[2] 譯注：讀屏器(screen reader)是盲人等無法觀看顯示器的用戶使用的一種把當前屏幕上的內容朗讀出來的設備。
Google 的眼神不大好
保持網頁的親和力、盡量減少它的標記、并合理的運用網頁頭部的標簽同樣會幫助你提高搜索引擎上的排名。
降低代碼/內容比、在頭部標簽中加入關鍵字，把網頁頂部的的標志圖片改為文本……這些行為都可以幫助你的站點在搜索引擎中獲得更好的搜索結果。
你仍然可以在需要時運用表格，別用得太多就行了
這對于那些固執于老式的第四代瀏覽器的瀏覽者 (和你的老板們) 會比較好接受，而在直到他們回心轉意之前，其他人至少也能接受。
看看表象之下是什么
下面的代碼描述的表格的結構：
table { margin: 3px; padding: 2px; border: solid 2px blue }
td { padding: 2px; border-style: solid; border-width: 1px; border-color: gray gray silver silver }
這樣就好多了
這是用來去掉那些多余的標記的 CSS 代碼：
table { border-bottom: 1px dotted fuchsia; border-left: 1px dotted fuchsia }
td { padding: 11px 20px 20px 11px; border-top: 1px dotted fuchsia; border-right: 1px dotted fuchsia }
ul { margin-top: 10px; margin-bottom: 10px; margin-left: 0; padding-left: 1em }
li { margin-bottom: 10px }
過渡性的設計
使用 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>
一些實例：
等等，還有更多：
想了解更多關于過渡性設計的信息，請閱讀 Eric Meyer on CSS 的第一章。和 Jeffrey Zeldman 的 Designing with Web Standards 的大部分內容。
CSS 排版：希望就在眼前
大部分用戶使用的瀏覽器都有很好的 CSS 支持，當然它們也有個各自的脾性，不過只要你習慣了它們，就能夠處理得很好。
編寫 CSS 代碼很簡單。即便對于一個看 JavaScript 就像看天書的家伙來說也是如此。
if(links[x].length > 0);{
for (y=0; y<links[x].length; y++) {
每條 CSS 規則都有一個選擇符和一個聲明。聲明是由 屬性名(property) 和 屬性值(value) 組成的。屬性名一般使用連字符(-)連接。
body {margin:0; padding:0}
.related {float:right; width: 15em; margin-left:1em; margin-bottom: 1em; color:blue}
#footer {color: gray; font-size: 0.6em; line-height: 1.2em; background-color: white; margin: 0}
結構化標記：所寫即所想，所想即所寫
即便書寫 CSS 很簡單，使用 CSS 來排版卻真的需要一種和我們以往有些不同的思維方式。
我們排版時考慮的不是“這個東西放在這兒，那個東西放在那兒”，而是頁面中信息的類別和信息的結構。
我們用 <h1> 標記來標示最重要的頭條；次一級的條目則用 <h2> 來標記，以此類推；而段落則放在 <p> 標記中。
這就是我們稱之為“結構標記”或“語義標記”的東西。
你的內容將不放在表格和表格元素中，取代它們的是 div 元素。還要給你的 div 元素安排一個 id 或 class，不過這是為了描述它們的內容或功能，而非它們的外觀。
避免 <b>ed 與 <br>eakfast 標記
且想想為何你希望某個對象按特定的方式出現；它有什么含義？你的標記能夠也必須表達意思，即便對于那些無法觀看頁面的人來說也是如此。語義性的標記使得你的頁面對一切受眾都更有親和力，這還包括了搜索引擎。
當你把某個對象設為斜體時，大概要么就是想強調它，要么是想 引用某個書中標題吧？ 如果是前者，應該用 <em>；如果是后者，其實得用 <cite>。
如果某個對象被標記為粗體，事實上它應該被標記的是， <strong>。
如果你希望在某處添加一個換行，這大概是開始了一個新的開頭。如果不是開頭，會不會是某種在你的站點中出現過的class (類型)？在上面兩種情況下，你都應該用 CSS 替換 <br>。
.foo {display:block}
如果希望了解更多，請閱讀 Bed and BReakfast markup (B&BR)， Tantek Çelik 作品。
導航條該怎么做？
考慮你需要導航的內容是一些無序的鏈接這種情況：
用 <ul> 標簽來編輯它們。
- link1
- link2
- link3
- link4
- link5
水平導航條
我們可以用 CSS 來控制這個列表顯示在網頁上的外觀。
通過使用 display:inline 我們可以創建水平導航條。
這是上面這個導航條用到的代碼：
#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;
display: inline
}
#nav1 li:first-child {
border: none;
}
垂直導航條
這是垂直導航條的代碼：
#nav2 {
background-color: silver;
border: solid 1px gray;
width: 8em
}
#nav2 ul {
list-style-type: none;
margin: 0;
padding: 0;
border: none
}
#nav2 li {
margin: 0;
padding: 0.25em 0.5em 0.25em 1em;
border-top: 1px solid gray;
width: 100%;
display: block
}
html>body #nav2 li {
width: auto;
}
#nav2 li:first-child {
border: none
}
想了解更多？看看 Mark Newhouse 的文章吧，在 A List Apart 的 Taming lists，以及在 CSS-Discuss wiki 的 "Styling lists"。
當然，CSS 總會有些事情做得不如表格好。
比如說你有個黑色的導航條，當你希望把它延伸到整個頁面那么長的時候。如果用表格，簡單得很，給 <td> 一個黑色背景就行了。
沒錯，我們可以用 CSS 完成這個，但需要一種不同的思維方式。
如果我們的導航條的 div 一個黑色的背景，那么黑色只會延伸到導航內容結束為止?？稍诖蟛糠猪撁嬷?，內容總是比導航條長的，這就不大好看了。
所以我們只好把一個黑色的 GIF 圖片放在 div 里邊，并為 div 給足左側的 padding，可一旦導航條比內容長的時候，這又不好辦了。
另一種“解決”的方式把黑色的 GIF 放在 <body> 的背景中 (而內容的 div 中設置別的背景顏色)，這個方法本是不錯的，可萬一你又想把 <body>. 的背景設置成別的顏色，那就完蛋了。
或者我們可以把圖片放在一個專門的“包裹” div 里。然而這畢竟又把非語義性的麻煩引入了我們的標記中。
而且當然，在導航條的寬度是變動的時候如果要用小塊圖片拼成背景，CSS 肯定無法勝任。
就像我們前面說的，表格總有做得比 CSS 好的地方。但你總歸應該問問自己，表格帶來的麻煩是否值得用它帶來的那點利益來交換？
從玩弄表格技巧到遵循 Web 標準：通盤考慮
首先，你得考慮好一個移植策略。是一口氣把整個站點移植了呢，還是逐個逐個部分地一步步完成？
檢查一下，找出會因為移植而受益的頁面和分支。自然而然地，從首頁、新產品通告之類的頁面開始檢查會比較好。
分析你的站點的內容分別屬于下面的哪些類型：
- 產品信息
- 價格信息
- 公司信息
- 報表
- 服務信息
- 投資信息
- 購物籃
- 用戶論壇
- 等等
分解你的頁面
如果你已經把站點的內容分好了類，那么是時候分析每個頁面，把它們按照邏輯關系進行分解了。
- 主導航條
- 子導航條
- 頁眉與頁腳
- 內容
- 相關信息
- 其他
注意分析由嵌套表格、空白分隔符和邊框元素組成的表格結構 (因為我們希望把它們替換為用 div 標記組織的那種簡單得多的表格結構)。
看看你的那些標記吧
一旦你分析好頁面的結構，就可以著手揭開表象，分析你現在的頁面代碼中可以轉換成結構化標記的那些地方。
- 作為一個完美主義者，消滅所有的
<font> 標記和間隔 GIF 吧！
- 同樣的，一并搞定
<b> 和 <br> 標記。
- 去除表格中的那些外觀標記 (
bgcolor, background, 等等)。
- 把純粹用來表示外觀的那些 CSS 調用 (比如
<span class="header">) 改成結構化的標記。 (Tantek Çelik 在他的文章 A Touch of Class 里詳細討論了這方面的內容。)
把描述外觀的標記改為描述結構的標記
你可以使用“查找加替換”(或者正則表達式)，不過最好的方法還是在瀏覽器里打開這個頁面，然后把文本復制粘貼到你的 HTML 編輯器里。
關鍵還是要用結構化的方式來思考！僅僅把 <b> 標記替換為 <strong> 是遠遠不夠的。
最重要的條目是哪個？用 <h1> 來標記它。次要一點的就用 <h2>，依此類推。用 <p> 來標記段落。把導航條標記為無序列表。
選定一個 DOCTYPE 來使用。(我們推薦 XHTML transitional，除非你是此道高手，否則別用 XHTML strict。)
把你的頁面合理分布在的 div 中
把你的主導航條放在一個 id 屬性設為 mainnav 的 div 中，子導航條則放在一個 id 或者 class 是 subnav 的 div 中。而頁腳類似這個形式：<div id="footer">，至于整個頁面，它被放在 <div id="content"> 里邊。
即便現在它還不怎么討人喜歡，但只要你開始給樣式表添加規則，它就會馬上變得可愛起來。
是開始自己編寫 CSS 的時候了
首先，給每個 div 設置一個邊界。例如： div {border: 1px dotted gray; padding: .5em} 這可以幫助你完完整整地看到里邊的內容，也不再需要卷動屏幕了。
首先為以定義的元素編寫 CSS (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, 等等。)
盡量運用上下文相關或者有遞歸下降結構的選擇符。這可以使得你的標記更清晰。例如：#subnav li {border: 1px solid black; padding: .5em; display: inline} 將能夠只能影響你的子導航欄的 div 中的列表項。
在盡可能多的瀏覽器下進行測試，畢竟你可以讓朋友幫助你用它們自己的瀏覽器測試。
用 CSS 排版的站點范例
在線資源
- 郵件列表: 互動性強，很有幫助。
- Wiki: "Wiki 與眾不同的特點是，它保留了對每個參與者長期的記載。" 如果你想糊弄一下 Windows 下的 Internet Explorer，而把主要注意力轉向其他的瀏覽器，可以在這里找到該怎么做。當然，還有更多。
- Archives: 有個 CSS 的問題絆住你了？別急，別人很可能遇到過同樣的問題并在此獲得過幫助呢。
zeldman.com 每日報道：見解深刻，發人生省，內容和鏈接書寫規整
A List Apart 為制作網站者量身定做
- Taming lists, Mark Newhouse. 如果你要語義化地標記你的導航條，這里是必讀的。
- CSS: Going to Print, Eric Meyer. 你再也不必另外弄個 'printer-friendly 版本' 出來了。
- Alternative Style: Working With Alternate Style Sheets, Paul Sowden. 讓你的瀏覽者們自己選擇如何瀏覽。
- Using XHTML and CSS for an effective Search Engine Optimization Campaign, Brandon Olejniczak. 別忘了，結構化標記還能幫助你獲得更好的搜索引擎排名。
The Web Standards project 祝福他們。
CSS: A guide for the unglued 提供了大量重要的鏈接。
CSS Layout Techniques: for Fun and Profit 你可以把這些 Eric Costello 的排版用于自己的項目。還有資源和教程。
Real World Style Mark Newhouse 的關于 CSS 排版的技巧、訣竅和技術。
DevEdge Netscape Sidebar Tabs 極為方便地鏈接到 W3C 關于 CSS, HTML, 和 DOM 的標準。
New York Public Library Style Guide 學習 XHTML 和 CSS 的簡易上手指南。
The Business Benefits of Web Standards 現代經理人的好消息。Web 標準以一種連 MBA 也能看懂的方式表現出來。
