為何使用表格排版是不明智的：
找出問題，對症下藥
表格之所以存在於 HTML 中，只是為了一個目的：顯示表格狀的資料。然而此後的 border="0" 使得設計師可以將圖片和文本放在這無形的網格中。迄今為止， 表格仍然主導著視覺豐富的網站的設計方式，但它卻阻礙了一種更好的、更有親和力的、更靈活的，而且功能 更強大的網站設計方法。下面我們開始尋找這個問題滋生的源頭，並學習創建過 渡性的，甚或完全不需表格的排版方式。
表格之所以存在於 HTML 中，只是為了一個目的：顯示表格狀的資料。然而此後的 border="0" 使得設計師可以將圖片和文本放在這無形的網格中。迄今為止， 表格仍然主導著視覺豐富的網站的設計方式，但它卻阻礙了一種更好的、更有親和力的、更靈活的，而且功能 更強大的網站設計方法。下面我們開始尋找這個問題滋生的源頭，並學習創建過 渡性的，甚或完全不需表格的排版方式。
這裏有沒有合適的聽眾？如果你的老闆正在 Seybold [1] 這裏，但卻在參加另一場會議， 去把他們拽過來。他們更需要瞭解 Web 標準能夠為公司省錢。
我們將告訴你這樣一種工作方式，它會：
我們還會討論如何用層疊式樣式表 (CSS) ——也許是一個和你曾經 採用的方式 (表格) 有些微不同的——思維方式來處理你的內容和標記。
開始的時候，Internet 不過是學校、研究者和軍方用來交換資訊的 一個媒介罷了。然而那些早期的夢想家們沒花多長時間就發現：這 實在是個理想的媒體，尤其對於銷售從新鮮農產品和狗糧到二手車 和即時體育報導來說。
即便如此，和其他媒體的幼年時期一樣，早期的 Internet 看起來 是那麼的‘粗糙’ (以至於實在不怎麼能吸引顧客)。 直到大概 1997 年的時候，David Siegel 出版了他那本里程碑式的 書，2它在當時有限的流覽器功能和 W3C 標準之下，設計出非常華麗的 網頁效果。(朋友，其實我們說的是 Netscape 2 和 3 囉。)
這些效果是多麼漂亮啊，以至於到今天，它們還是最流行的網頁排 版方式。
[2]譯注：David Siegel 這本書的名字是 "Creating Killer Web Sites"，表明用表格和分隔 GIF 可以設計出魔鬼般迷人的站點。
現在的流覽器在支援 Web 標準方面有了很大的改進，所以我們再也不必 使用那些古老的方式了。
我們將去掉那些表格裏嵌套的表格和用 GIF 填充的單元，代之以簡潔的 標記和 CSS 排版出的載入快速、修改方便、對所有人都那麼有親和力的漂 亮站點。
通過在 HTML 文檔中使用結構化的標記以及層疊式樣式表來排版，我們 可以使頁面的實際內容與它們呈現的格式相分離。
比之使用表格，它有這麼一些優勢....
把頁面中的外觀標記去除以後，重新設計現有的站點和內容將變得非 常節省人力 (同時便宜得多)。如果想改變 站點的輸出，你只需要改動一下樣式表就行了，而完全不必改動頁面本身。
比如說，你可以看看 CSS Zen Garden， 或者 Eric Meyer 的站點 上的樣式切換器。 如果想瞭解更多，可以看看 Paul Sowden 寫的 Alternative Style。
運用 Web 標準來縮減網頁檔的大小，這樣用戶將不必訪 問每頁都下載一次外觀的資料。控制輸出效果的樣式表是由用 戶的流覽器自動緩存的。
縮減檔大小意味著更快地載入和更少的流量費用。
運用 Web 標準還能使保持整個站點的視覺一致性變得非常簡單。 因為頁面使用同樣的 CSS 文檔來進行排版，所以它們會被格式化為相同的風格。
這樣加深了你的站點給人的印象還能使它更便於使用。
運用 Web 標準使得你的站點對殘疾人和使用手機或 PDA 的 Web 流覽者 更具親和力。
使用讀屏器 [2] 的訪問者 (或者連接速度比較慢的訪問者) 不希望 在下載了數不盡的表格單元和分隔圖片後才獲得我們頁面的實際內容。
換句話說，把內容與格式分開使得你的內容與設備無關。
[2] 譯注：讀屏器(screen reader)是盲人等無法觀看顯示器 的用戶使用的一種把當前螢幕上的內容朗讀出來的設備。
保持網頁的親和力、儘量減少它的標記、並合理的運用網頁頭部的標籤同樣會 幫助你提高搜索引擎上的排名。
降低代碼/內容比、在頭部標籤中加入關鍵字，把網頁頂部的的標誌圖片改為 文本……這些行為都可以幫助你的站點在搜索引擎中獲得更好的搜索結果。
這對於那些固執於老式的第四代流覽器的流覽者 (和你的老闆們) 會比較好接 受，而在直到他們回心轉意之前，其他人至少也能接受。
 | |||||||||||||
| | | | | | | | | |||||
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. | | | Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper. | | ||||||||
| | | | | | ||||||||
| |||||||||||||
| | | | | | | | | |||||
| Suscipit lobortis nisl ut aliquip ex ea commodo consequat. | | | Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
| | ||||||||
| | | | | | ||||||||
| |||||||||||||
| | | | | | | | | |||||
| Qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. | | | Diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
| | ||||||||
| | | | | | ||||||||
| |||||||||||||
| | | | | | | | | |||||
| Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim. | | | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed.
| | ||||||||
| | | | | | ||||||||
| |||||||||||||
| |||||||||||||
| | | | | | | | | |||||
| 這本可以做得簡單得多。 | | | 猜猜我們在這個小表格裏用了多少代碼？足足 13.7k。這玩意兒一共有 17 行 9 列，還沒算上那些用來做間隔的 GIF！ | | ||||||||
| | | | | | ||||||||
| |||||||||||||
| | | | | | | | | |||||
| 這種方法用了太多的表格單元和間隔符。 | | | 而且所有這種虛線邊界都是用表格單元的 background 屬性完成的，這可通不過 HTML 標準的驗證。
| | ||||||||
| | | | | | ||||||||
| |||||||||||||
| | | | | | | | | |||||
| 全部這些其實可以只用 8 個表格單元加 4 條 CSS 規則就搞定的。 | | | 我是說真的，只要 8 格單元和 4 條規則，只要這些。
| | ||||||||
| | | | | | ||||||||
| |||||||||||||
| | | | | | | | | |||||
| 這四條規則是：一條給 <table>，一條給 <td>，一條給 <ul>，還有一條給 <li>。 | | | 就這麼簡單，寫好這些就大功告成了。
| | ||||||||
| | | | | |||||||||
| |||||||||||||
下面的代碼描述的表格的結構：
table{ margin:3px; padding:2px; border:solid 2px blue }
td{ padding:2px; border-style: solid; border-width: 1px; border-color:gray gray silver silver }
| 好多了 | 猜猜現在我們用了多少標記？僅僅 2.1k。這裏只有 4 行 2 列，還沒有用來作間隔的 GIF。 |
| 就這樣 | 而且所有這些虛線邊框都是由 CSS 完成的，它們完全符合標準。
|
| 只用了 8 個表格單元和 4 條 CSS 規則。 | 我是說真的。就用了 8 個單元 4 條規則。
|
| 你只需要一條規則給 <table>，一條給 <td>，一條給 <ul>，還有一條給 <li>。 | 就這麼簡單，寫好這些就大功告成了。
|
這是用來去掉那些多餘的標記的 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 代碼很簡單。即便對於一個看 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> 標籤來編輯它們。
我們可以用 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 好的地方。但你總歸應該問問自己， 表格帶來的麻煩是否值得用它帶來的那點利益來交換？
首先，你得考慮好一個移植策略。是一口氣把整個站點移植了呢，還是 逐個逐個部分地一步步完成？
檢查一下，找出會因為移植而受益的頁面和分支。自然而然地，從首頁、 新產品通告之類的頁面開始檢查會比較好。
分析你的站點的內容分別屬於下面的哪些類型：
如果你已經把站點的內容分好了類，那麼是時候分析每個頁面，把它們按 照邏輯關係進行分解了。
注意分析由嵌套表格、空白分隔符號和邊框元素組成的表格結構 (因為我們希望把它 們替換為用 div 標記組織的那種簡單得多的表格結構)。
一旦你分析好頁面的結構，就可以著手揭開表像，分析你現在的頁面代碼 中可以轉換成結構化標記的那些地方。
<font> 標記和間隔 GIF 吧！<b> 和 <br> 標記。 bgcolor, background, 等等)。<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"> 裏邊。
即便現在它還不怎麼討人喜歡，但只要你開始給樣式表添加規則，它就會馬上變得 可愛起來。
首先，給每個 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 的東西，不過下面 的這些書能很好的幫助你掌握 Web 標準，讓你的頁面更苗條、更乾淨、載入得 更快。
zeldman.com 每日報導：見解深刻，發人生省，內容和鏈結書寫規整
A List Apart 為製作網站者量身定做
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 排版的技巧、訣竅和技術。
The Business Benefits of Web Standards 現代經理人的好消息。Web 標準以一種連 MBA 也能看懂的方式表現出來。
[1] 譯注：Seybold 是 2003 年在美國三藩市召開的一次有關設計與排版的研討會， 詳情請見 http://www.seybold365.com/sf2003/。 本文是該會議上的一次演講。