CSS網頁布局使用表格可以嗎?
互聯網 發(fā)布時間:2009-04-02 19:36:58 作者:佚名
我要評論
網頁制作Webjx文章簡介:CSS網頁布局的宗旨是語義化具有良好結構的HTML文檔,將外觀表現分離到CSS文件中,這是webjx.com一直強調的頁面開發(fā)思維。
CSS網頁布局的宗旨是語義化具有良好結構的HTML文檔,將外觀表現分離到CSS文件
CSS網頁布局的宗旨是語義化具有良好結構的HTML文檔,將外觀表現分離到CSS文件中,這是jb51.net一直強調的頁面開發(fā)思維。 CSS網頁布局的宗旨是語義化具有良好結構的HTML文檔,將外觀表現分離到CSS文件中,這是jb51.net一直強調的頁面開發(fā)思維。有朋友在jb51論壇中提出問題,引發(fā)了思考。在html頁面,初學DivCSS網頁布局的時候,排斥table,用很多的div來嵌套:(看起來很差勁)
<div>
<div>DivCSS網頁布局中使用表格的一些討論</div><div>www.fzitv.net</div>
<div>DivCSS網頁布局中使用表格的一些討論</div><div>www.fzitv.net</div>
</div>
如圖所示:
l圖1。
圖2。
知道html要具有語義之后,進化成這樣的寫法:
<ul>
<li><span>DivCSS網頁布局中使用表格的一些討論</span>www.fzitv.net<li>
<li><span>DivCSS網頁布局中使用表格的一些討論</span>www.fzitv.net<li>
</ul>
因為要固定標題的寬度,又涉及到<span>標簽的inline-block。
而且,當涉及到標題一行,內容需要換行的時候很麻煩,如圖效果:
圖3。
我想,既然要避免使用table標簽會造成如此多麻煩,可不可以干脆使用table呢,簡單直接,而且從html的語義上考慮,這樣的內容似乎用table也有道理。但是語義并不明確。也不可取。
我們來討論可以使用的方法:
圖1。
圖3。
圖1和圖3,可以用無序列表ul或定義列表dl標識。配合使用lidtddstrongemspan標簽。
圖2。
圖2是一個表單,可以用formlabelinput等標簽加以標識。
小結:
這三個圖片所示的頁面元素,均不是表格類的數據,用表格標簽不妥當。
使用表格作為網頁排版、布局頁面元素是不合理的。
表格是用來顯示數據的。
至于什么樣的數據形式以表格來標識,沒有統一的規(guī)范。
或許大家對它有著不同的理解,除了數據表,別的元素在什么情況下用表格表示呢。
其實根據情況,可以選擇多種標簽??赡苁菬o序列表,可能是定義列表。
至于CSS樣式的實現,那就是屬性定義的問題。
不要因為CSS設置比較繁瑣,而否定內容本身的語義。
相關文章
本文主要介紹了css九宮格布局的五種方法,內容包括grid布局、flex布局、table布局、float浮動定位、inline-block+letter-spacing屬性這五種方法的實現,感興趣的可以了解下2023-09-18- 在Web開發(fā)中,經常會遇到需要將元素水平和垂直居中的情況,今天,將為大家分享幾種CSS方法,讓你的元素輕松居中,讓頁面更美觀吸引人,感興趣的小伙伴可以自己動手試一試2023-09-08
- 相信大家在面試的時候也會經常碰到css實現元素居中的方法,下面我介紹6種方法給大家,歡迎大家評論區(qū)交流2023-09-07
最近需要做個換行的布局,本文主要介紹了flex布局中使用flex-wrap實現換行的項目實踐,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需2022-06-16CSS布局之浮動(float)和定位(position)屬性的區(qū)別
今天看到有朋友留言問浮動和定位有什么區(qū)別,如何使用?今天找了篇文章,講的比較通俗易懂,供大家參考2021-09-23
這篇文章主要介紹了css實現元素居中的N種方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-02-02
這篇文章主要介紹了div水平布局兩邊對齊的三種實現方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起2021-01-21
這篇文章主要介紹了waterfall瀑布流布局+動態(tài)渲染的實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起2021-01-19
這篇文章主要介紹了頁面中有間隔的方格布局如何完美實現方法。文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來2020-11-27- 這篇文章主要介紹了css實現六種自適應兩欄布局方式,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習2020-10-28

