DIV與Table的差別

使用CSS樣式配合Div配置來製作網站，已經成為業界趨勢。如果能夠靈活運用CSS，在結合PHP、Drupal、Ajax、Flex方面，也具有一定的優勢，並且帶來極大的效益，在維護與整合方面，絕對會是相當好的解決方案！

對「設計」來說，最常使用的傳統table巢狀方式切圖，在整合這些效能上面，有相對的弱勢。光是落落長的Html code，程式人員看的都要發昏了，更別說設計人員之後維護的問題。再者，使用table傳統切圖，對於html語法是一個很不好的學習習慣，因為根本不需要去了解各種html標籤原本代表的意義。想要做文章段落區別，可以這樣寫：<tr><td></td></tr>，要做項目列表，就多一點<tr><td></td></tr>，對瀏覽器來說，這個網站就像是一個超大表格，表格裡面還有表格，分不出哪個是標題，哪個是段落，哪個又是項目清單，到處充滿了沒有意義的code，<h1>、<p>、<span>、<li>等這些重要的標籤就這麼一次次被遺忘。網站要求曝光，要能輕易的被搜尋引擎找到，幾乎是不可能！

就讓table回歸他原本的功能吧！說不定還有人會問：table原來是做什麼用的呢？Div創造出來，被賦予的意義就是一個容器。一個裝載各種內容的容器，並且經由CSS配合排列、配置，呈現前台網站原本該有的視覺樣子。而table顧名思義，就是表格，用來呈現資料較為繁瑣，需要一筆一筆詳列、比較的資訊。例如：費率表、個人資料顯示等。換句話說，並不是從此就再也不用table，而是透過巧妙、熟練的將兩者混和、搭配，以提昇網站的效能、易用性與SEO。

簡而言之，Div用於網站版型佈局，透過CSS定義位置與寬度、背景等屬性，初步將網站的架構描繪出來。內容的部份，則必須活用html的各種標籤；文章段落就用<p>，項目清單就用<ul>、<li>，標題就用<h1~h6>，表格形式的結構性資料就交給<table>！

靈活運用各種html code與CSS，將增進程式人員與設計人員的合作效益！而且當網站需要修改與維護時，你也會感謝昨天的你，替今天的自己保留了修改彈性。不要再依賴Photoshop切圖，然後直接轉存html的方法來製作網頁了！從html的基礎code標籤開始認識、學習，發揮CSS對於網站效能助益的最佳影響力吧！