網站中的表格布局與div布局
作者:佚名 時間:2014-05-27 分享到:
CSS布局的重點不再放在table元素的設計上。取而代之的是HTML中的另一個元素div的設計。Div可以理解為圖層或是一個‘塊”。div是一種比表格簡單的元素.從語法上只有從<div>開始以</div>結束這樣一個簡單的定義。div的功能是用于將一段信息標記出來后用于后期的樣式定義。這里的信息標記,是網頁的“結構”部分。DIV的使用可以將網頁中的各個元素劃分到各個DIV中.成為網頁中的結構主體。而樣式表規則由CSS完成。
div在使用時不需要像表格一樣通過其內部的單元格組織版式,通過CSS強大的樣式定義功能可以使DIV比表格更簡單、更自由地控制頁面版式及樣式。
傳統的table布局的核心實際上是利用了HTML table表格元素具有的無邊框特性。由于table元素可以在顯示時使得單元格的邊框和間距設置為0.即不顯示邊框,因此可以將網頁中的各個元素按版式的劃分放入表格的各個單元格中,從而實現復雜的排版組合。
Table布局的核心在于設計一個能滿足版式要求的表格結構,再將內容裝入每個單元格中,間距和位置通過插入圖像進行占位來實現,其最終
的結構是一個復雜的表格,這一點不利于設計與修改。
表格布局的代碼最常見的是在HTML標簽<>之間加入一些設計代碼,width="100%",表格布局的混合代碼就是這樣編寫的。大量樣式設計代碼混雜在表格、單元格之中.使得代碼的可讀性大大降低,維護起來也相當困難。
復雜的表格使得設計工作極為不易,修改起來更加復雜。最后生成的網頁代碼除了表格本身的代碼.還有許多沒有意義的圖像占位符及其他元素.文件極其龐大.最終導致瀏覽器下載及解析速度變慢。