上次講到“欲練 CSS ，必先宮 IE”，如果你宮了IE然而還是覺得不得要領，那就該懷疑自己是不是有傳說中的table強迫症了。
在CSDN社區上，時不時能夠看到一些頁面整體布局的問題，要求用div做一些table才能做到的，否則就以此為把柄說XHTML+CSS布局方法不好。其實，首先要做的是改變思維，以適應XHTML+CSS的布局。
面向頁面設計而非面向浏覽器設計
XHTML+CSS能夠實現的是一種流布局，也就是隨著內容的長度自動增長區域，並且最終導致整個頁面增長，這時候浏覽器就必須顯示滾動條。 table強迫症的一個征兆就是極力避免流布局，希望以浏覽器的可視區域為布局目標，要求在可視區域中劃分內容區域而不是在頁面上劃分內容區域。實際上 XHTML是無法針對浏覽器設計的，因為它僅僅包含語義，或者說是內容，而浏覽器如何去表現這些內容是我們無法確定的。CSS提供了我們控制表現方式的一種途徑，但這僅僅是針對主流浏覽器的，而且浏覽器支持的“指令集”還有稍為的差別（說到這，我真希望能夠為一個浏覽器寫CSS然後編譯為全平台兼容代碼），最後這些指令暫時還僅僅支持針對頁面的流式布局控制。因此，如果你決定要開始寫符合語義的XHTML並且僅僅用CSS控制布局，首先就要把思路轉變為面向頁面（或者說是文檔）的布局控制，而非面向浏覽器可視區域的布局控制。
接下來肯定有人要說，“那你就是承認了有些布局老方法很容易做到，但新方法很難做到啦”。這是當然的，然而這不成為我們繼續使用table的理由。這時候要反過來探討原始目標了，我們是為什麼要控制布局？低層次的需求是為了美觀，誰都希望同樣的內容能夠以更好的視覺效果展示在用戶眼前；高層次的需求是為了控制受眾的浏覽方式，讓他們能夠按我們預先設計好的方式來區分頁面內容的輕重點，按我們的期望優先浏覽某些內容，同時也幫助他們更快的找到他們想要的內容，而不會在我們的網站內感到沮喪。既然我們確定了這時控制布局的目標，那麼我們再來看看CSS是不是“沒辦法把事情做好”。首先，CSS也能做出美觀的頁面，雖然某些布局做不到，但是在CSS的限制下做到同等美觀程度的頁面是肯定沒問題的。其次，CSS也能讓設計變得友善，不會說CSS的設計就肯定是“干淨”到用戶無法一眼找到他想要的功能。因此，雖然CSS無法實現某些特定的布局效果，但對於設計師來說它能夠達到老方法所能達到的同等效果，這就足夠了。
從XHTML中去掉內容無關的視覺元素
另一個table強迫症的征兆就是，習慣為每一個視覺上的元素對應一個XHTML元素。在table中，無論視覺效果有多復雜，我們總能不停的切割 table，甚至table套table，直到准確定位每一個特定的元素。然而應用了CSS之後，這就是不必要的，甚至會給設計師帶來麻煩，因為 XHTML+CSS就是為了內容和布局分離，所以如果一個視覺元素與內容無關，那麼它就不應當出現在XHTML中，自然也就不會對應一個XHTML元素。
例如有一個網站當前欄目的徽標，這個徽標沒有任何的語義，而XHTML中也有文字內容描述當前欄目了，那麼這個徽標就並不一定要對應一個< img />元素。如何讓徽標顯示出來呢？它可以是當前欄目文字描述區域的background-image，同時通過一些定位技巧讓它顯示出來。如果你認為有這個徽標就不需要文字描述時，你還可以通過定位技巧將文字隱藏掉，這樣單純看XHTML或者在不支持CSS的浏覽器上就只見文字描述，而在支持CSS 的浏覽器中則看見會標。從這個例子，我們可以看得到一個視覺元素不一定要對應XHTML中一個實實在在的內容元素，或者對應一個文本元素而非圖形元素。 XHTML包含的是內容，那就不應該包含與內容無關的視覺元素描述，而通過CSS你可以事後增加有關的視覺元素。
又例如:before和:after這兩個偽選擇器，允許你創建插入在匹配元素前後的元素，這樣就能夠實現非內容視覺效果僅在CSS中插入。常見的用法包括，插入clear到浮動元素之後以確保父元素的完整包含，又或者是引用語句的前後自動加上引號。事實表明，CSS是很適合於將非內容的元素從 XHTML中分離出來的，因此我們在設計XHTML時就不能夠總想著要有什麼效果，而應該單純想著信息的組織形式。
最後，如果要我為table強迫症開處方的話，我還是會選擇《CSS Mastery/精通CSS》。看完之後，你自然能夠解除上述的煩惱，理解到CSS布局帶來的便利，從而選擇開始用純CSS的思維來進行設計。