在前端開發中,布局一直是個不可避免的問題。如果網頁中只有簡單的文字和圖片,那么布局也相對簡單。但是,如果是需要復雜布局或者需要大量展示數據的網頁,布局就要經過一番考慮。
在制定布局方案時,一般有兩種選擇,一種是使用div,一種是使用表格。下面我們將會從以下幾個方面探討,哪一種方案更好:
1. 語義化
使用div:使用表格:
頁面頭部 | |
主體內容 | 側邊欄 |
頁面底部 |
從語義化上來講,使用div的方式更好,因為可以通過類名稱來識別各個部分的作用。而使用表格的方式,則更像一種視覺的布局,很難讓人直觀的理解各個部分的含義。
2. 網頁結構
使用div:使用表格:
使用div的方式在網頁結構上更加清晰。使用表格的方式脫離了網頁本身的意圖。
3. 可維護性
使用div:使用表格:
使用div的方式,可以預留出空間,增加代碼的可維護性,以后進行修改時,也比使用表格的方式更容易。
4. 可訪問性
使用div的方式,可以更好地符合Web內容可訪問性指南,因為可以通過設置class屬性、role屬性給div標簽加上更多的輔助信息。另外,在屏幕閱讀器中,表格的內容讀取可能會很慢,甚至讀取出錯。而使用div的方式能夠更直接地把網頁中的內容呈現出來。
綜上所述,使用div的方式更加優秀,除非需展示表格數據,否則應該盡量避免使用表格進行布局。
上一篇mysql 手工安裝
下一篇css用.引用