根據(jù)我最近的一些實(shí)踐以及在和一些讀者進(jìn)行關(guān)于HTML表格的使用問題溝通之后,決定寫這篇文章。總的來說,我注意到由于誤導(dǎo)性信息,他們對(duì)于table的使用有種先入為主的厭惡。事實(shí)上很多人會(huì)說”我看到永遠(yuǎn)不應(yīng)該使用表格”的說法,但是這絕對(duì)是錯(cuò)誤的!這個(gè)建議只是針對(duì)使用HTML表格來定義網(wǎng)頁的布局,但是表格在方便的排列數(shù)據(jù)信息行和列方面非常完美,而且如果你一定要在一個(gè)頁面上顯示表列數(shù)據(jù),你就不得不使用它們!為什么不呢?然而,在這種情況下,一些人無視了用于table的某些HTML標(biāo)簽的存在并且不知道該如何正確的使用它們。
HTML有10個(gè)表格相關(guān)標(biāo)簽。下面是一個(gè)帶有簡介的列表,但是首先,文檔要被正確的定義在HTML 4.01/XHTML 1或HTML 5下面:
一個(gè)基本的表格結(jié)構(gòu)如下:
它包含一個(gè)標(biāo)題、頭部、主體和底部。正確的HTML元素順序是:
你也可以使用<col> 和<colgroup> 來定義表格的列或?yàn)榱蟹纸M:
下面是一個(gè)正確的表格結(jié)構(gòu)實(shí)例:
<table border="1"> <caption>Table caption here</caption> <colgroup span="1" style="background:#DEDEDE;"/> <colgroup span="2" style="background:#EFEFEF;"/> <!-- Table Header--> <thead> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> </tr> </thead> <!-- Table Footer--> <tfoot> <tr> <td>Foot 1</td> <td>Foot 2</td> <td>Foot 3</td> </tr> </tfoot> <!-- Table Body--> <tbody> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>D</td> <td>E</td> <td>F</td> </tr> </tbody></table>
在瀏覽器中的結(jié)果如下圖所示:
為了實(shí)現(xiàn)現(xiàn)在所提倡的表現(xiàn)和結(jié)構(gòu)分離的開發(fā)模式,前端觀察建議將頁面中所有與表現(xiàn)層有關(guān)的東東,都用CSS來控制,不用HTML自帶的屬性來控制頁面的表現(xiàn),而table是最容易被忽略的一個(gè)。
關(guān)于table的更多詳細(xì)內(nèi)容可以查看W3C的文檔: w3 Introduction to tables
最后留一個(gè)非常簡單的問題給大家,CSS的哪個(gè)屬性等效于table的cellpadding屬性?
聯(lián)系客服