理解表格一:圖解 frame 和 rules 屬性

Web 標準化也不是要“橫掃一切牛鬼蛇神”,其要義是以語義化的原則使用標記,迴歸 HTML/XHTML 作爲結構化語言的本來面目。

雖然不再提倡用 table 元素來進行頁面佈局,但用它來組織表格化的數據仍然還是最合適的選擇。由於 table 元素的天生特性,使得用它來顯示格式化的數據非常便利。但我們大多數人對於 table 元素的認識大概還只停留在 bgcolor、cellspacing、cellspadding、align 等屬性和 <tr>、<td> 等標籤上面,對於 table 元素的其他有用屬性及其相關標籤瞭解甚少。今天,先來學習一下 table 元素的兩個不常用但卻非常有用的屬性--frame 和 rules。回頭再學習與 table 元素有關的標籤,如 thead、tbody、colgroup 等。

以下面標記代碼爲例,注意在 <table frame=”hsides” rules=”all”> 中使用了這兩個屬性:

<table frame="hsides" rules="all">   <tr>   <td>First</td>   <td>Row</td>   </tr>   <tr>   <td>Second</td>   <td>Row</td>   </tr> </table>

以上代碼在網頁中將顯示如下表格樣式:

First Row
Second Row

我們注意到,表格最外邊的四條邊框只有水平方向的(上下)兩條是可見的,而在表格內部分割表格的(單元格之間)邊框則全部可見。事實上,frame 屬性控制着表格最外圍的四條邊框的可見性,而 rules 則控制着表格內部邊框的可見性。frame 屬性可取的值及含義如下:

  • void - 默認值。表示不顯示錶格最外圍的邊框。
  • box - 同時顯示四條邊框。
  • border - 同時顯示四條邊框。
  • above - 只顯示頂部邊框。
  • below - 只顯示底部邊框。
  • lhs - 只顯示左側邊框。
  • rhs - 只顯示右側邊框。
  • hsides - 只顯示水平方向的兩條邊框。
  • vsides - 只顯示垂直方面的兩條邊框。

在三大瀏器(Safari 不支持這個屬性)中的應用以上值的效果分別如下面三幅圖所示(也可以在 W3Schools  親自動手試一試)。仔細觀察可以發現,FF 和 OP 還算規矩,IE 除了第一個值正確外,其他 8 個值的實現都不正確,這一點稍後再討論。現在僅從邊框效果上來看,三者也存在細微的差別,即:

  • FF 的邊框效果是左、上邊框灰色,右、下邊框黑色;
  • OP 則全部是黑色邊框;
  • IE 採用了三維邊框效果。

frame_ff2.gifframe_op9.gifframe_ie71.gif
 

IE 實現 frame 屬性的錯誤之處在於,在渲染除 void 之外的 8 個值時,它不僅會顯示指定的表格最外圍的邊框,而且還會錯誤地顯示相應的表格內部邊框(應該由 rules 屬性控制)。怎麼解決這個問題呢?在實踐中,因爲 IE 對 rules 屬性的實現與 FF 和 OP 是一致的,所以通常建議開發者同時使用這兩個屬性,這樣就可以用 rules 屬性的實現“覆蓋”frame 屬性對錶格內部邊框不正確的渲染效果(仍然保留正確的最外圍表格邊框效果)。

rules 屬性可取的值有五個,分別是:

  • none - 默認值。無邊框。
  • groups - 爲行組或列組加邊框。
  • rows - 爲行加邊框。
  • cols - 爲列加邊框。
  • all - 爲所有行列(單元格)加邊框

注意,rules 屬性指定的邊框不會與 frame 屬性指定的表格外圍邊框重合。這些值在三大瀏覽器(Safari 同樣也不支持這個屬性)中的效果如下面三幅圖所示:

rules_ff2.gifrules_op9.gifrules_ie7.gif
 

前面說過,IE 對 table 元素的 rules 屬性的實現都是正確的,也就是說與 FF 和 OP 的結果一致。上面三幅圖的對比也證實了這一點。所以,我們就可以放心地同時使用 frame 和 rules 這兩個屬性,以保證在這三大瀏覽器中獲得一致的邊框效果。

最後,還有一個問題值得注意。對於 HTML 標記而言,我們通常認爲不設置相應的屬性或者將屬性值留空則該屬性就應該使用默認值。但正如 XHTML 規範所約定的--如果只給標籤添加了屬性但卻沒有賦值,是不合法的。而事實也證明,如果在標籤中只添加屬性,而將其屬性值留空,則該屬性並不一定會使用默認值。下表就是筆者親自試驗總結的一個結果。從中可以看出,IE 和 FF 在屬性值被留空的情況下沒有采用默認值,只有 OP 能夠在這種情況下自動取得默認值(表中第一種情況說明,只有當不添加任何屬性時,這兩個屬性纔會自動採用默認值)。

所以,在實踐當中,爲了避免不一致的表格外觀,應該嚴格遵守規範來編寫代碼(不將屬性值留空)。具體到這兩個屬性的使用中,就是要同時使用這兩個屬性,而且不能給任何一個屬性留空--但可以分別給它們賦 void 或 none 默認值。

屬性組合FF2OP9IE7
<table> table_void_none_ok.gif table_void_none_ok.gif table_void_none_ok.gif
<table frame="void"> table_void_none_ok.gif table_void_none_ok.gif table_void_none_ok.gif
<table rules="none"> table_void_none_ok.gif table_void_none_ok.gif table_void_none_ie7_7.gif
<table frame="void" rules="none"> table_void_none_ok.gif table_void_none_ok.gif table_void_none_ok.gif
<table frame=" " rules=" "> table_void_none_ff2_2.gif table_void_none_ok.gif table_void_none_ok.gif
<table frame=" "> table_void_none_ff2_8.gif table_void_none_ok.gif table_void_none_ok.gif
<table rules=" "> table_void_none_ok.gif table_void_none_ok.gif table_void_none_ok.gif
<table frame="void" rules=" "> table_void_none_ff2_3.gif table_void_none_ok.gif table_void_none_ok.gif
<table frame=" " rules="none"> table_void_none_ff2_4.gif table_void_none_ok.gif table_void_none_ie7_4.gif
發佈了3 篇原創文章 · 獲贊 1 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章