CSS網(wǎng)頁布局的宗旨是語義化具有良好結(jié)構(gòu)的HTML文檔，將外觀表現(xiàn)分離到CSS文件中，這是jb51.net一直強調(diào)的頁面開發(fā)思維。 　CSS網(wǎng)頁布局的宗旨是語義化具有良好結(jié)構(gòu)的HTML文檔，將外觀表現(xiàn)分離到CSS文件中，這是jb51.net一直強調(diào)的頁面開發(fā)思維。有朋友在jb51論壇中提出問題，引發(fā)了思考。在html頁面，初學(xué)DivCSS網(wǎng)頁布局的時候，排斥table，用很多的div來嵌套：（看起來很差勁）
<div>
<div>DivCSS網(wǎng)頁布局中使用表格的一些討論</div><div>chabaoo.cn</div>
<div>DivCSS網(wǎng)頁布局中使用表格的一些討論</div><div>chabaoo.cn</div>
</div>
　　如圖所示：
l圖1。
圖2。
　　知道html要具有語義之后，進化成這樣的寫法：
<ul>
<li><span>DivCSS網(wǎng)頁布局中使用表格的一些討論</span>chabaoo.cn<li>
<li><span>DivCSS網(wǎng)頁布局中使用表格的一些討論</span>chabaoo.cn<li>
</ul>
　　因為要固定標(biāo)題的寬度，又涉及到<span>標(biāo)簽的inline-block。
　　而且，當(dāng)涉及到標(biāo)題一行，內(nèi)容需要換行的時候很麻煩，如圖效果：
圖3。
　　我想，既然要避免使用table標(biāo)簽會造成如此多麻煩，可不可以干脆使用table呢，簡單直接，而且從html的語義上考慮，這樣的內(nèi)容似乎用table也有道理。但是語義并不明確。也不可取。
　　我們來討論可以使用的方法：
圖1。
圖3。
　　圖1和圖3，可以用無序列表ul或定義列表dl標(biāo)識。配合使用lidtddstrongemspan標(biāo)簽。
圖2。
　　圖2是一個表單，可以用formlabelinput等標(biāo)簽加以標(biāo)識。
　　小結(jié)：
　　這三個圖片所示的頁面元素，均不是表格類的數(shù)據(jù)，用表格標(biāo)簽不妥當(dāng)。
　　使用表格作為網(wǎng)頁排版、布局頁面元素是不合理的。
　　表格是用來顯示數(shù)據(jù)的。
　　至于什么樣的數(shù)據(jù)形式以表格來標(biāo)識，沒有統(tǒng)一的規(guī)范。
　　或許大家對它有著不同的理解，除了數(shù)據(jù)表，別的元素在什么情況下用表格表示呢。
　　其實根據(jù)情況，可以選擇多種標(biāo)簽?？赡苁菬o序列表，可能是定義列表。
　　至于CSS樣式的實現(xiàn)，那就是屬性定義的問題。
　　不要因為CSS設(shè)置比較繁瑣，而否定內(nèi)容本身的語義。

最新評論