詳解HTML中table表格的frame和rules屬性
ruanyifeng 發(fā)布時間:2016-07-08 14:01:40 作者:阮一峰
我要評論

在Web頁面上我們可以使用frame和rules來控制表格邊框是否可見,下面我們就來詳解HTML中table表格的frame和rules屬性,需要的朋友可以參考下
table標簽的frame和rules屬性,可以控制邊框的顯示。frame屬性控制著表格最外圍的四條邊框的可見性,而 rules 則控制著表格內(nèi)部邊框的可見性。
frame屬性可取的值及含義如下:
* void - 默認值。表示不顯示表格最外圍的邊框。
* box - 同時顯示四條邊框。
* border - 同時顯示四條邊框。
* above - 只顯示頂部邊框。
* below - 只顯示底部邊框。
* lhs - 只顯示左側(cè)邊框。
* rhs - 只顯示右側(cè)邊框。
* hsides - 只顯示水平方向的兩條邊框。
* vsides - 只顯示垂直方面的兩條邊框。
rules 屬性可取的值有五個,分別是:
* none - 默認值。無邊框。
* groups - 為行組或列組加邊框。
* rows - 為行加邊框。
* cols - 為列加邊框。
* all - 為所有行列(單元格)加邊框
代碼示例:
XML/HTML Code復制內(nèi)容到剪貼板
- <table border="1" width="600" frame="hsides" rules="groups">
- <caption>My Ultimate Table</caption>
- <colgroup span="1" width="200"></colgroup>
- <colgroup span="3" width="400"></colgroup>
- <thead>
- <tr>
- <td>cell 1-1</td>
- <td>cell 1-2</td>
- <td>cell 1-3</td>
- <td>cell 1-4</td>
- </tr>
- </thead>
- <tfoot>
- <tr>
- <td>cell 4-1</td>
- <td>cell 4-2</td>
- <td>cell 4-3</td>
- <td>cell 4-4</td>
- </tr>
- </tfoot>
- <tbody>
- <tr>
- <td>cell 2-1</td>
- <td>cell 2-2</td>
- <td>cell 2-3</td>
- <td>cell 2-4</td>
- </tr>
- <tr>
- <td>cell 3-1</td>
- <td>cell 3-2</td>
- <td>cell 3-3</td>
- <td>cell 3-4</td>
- </tr>
- </tbody>
- </table>
在瀏覽器中的顯示效果如下圖:
相關(guān)文章
- 這篇文章主要介紹了html中table表格的內(nèi)容水平和垂直居中顯示的相關(guān)資料,需要的朋友可以參考下2017-03-27
- 這篇文章主要介紹了Div+CSS對HTML的table表格定位用法實例,文中講到了CSS的定位差異問題需要的朋友可以參考下2016-03-11
深入解析HTML的table表格標簽與相關(guān)的換行問題
這篇文章主要介紹了HTML的table表格標簽與相關(guān)的換行問題,文中給出了強制換行和強制不換行的解決方案,需要的朋友可以參考下2016-02-22html 隱藏div HTML里隱藏表格TABLE或者DIV內(nèi)容的css樣式
突然想起幾年前用過的一個隱藏樣式代碼,有些時候用它非常方便,比如想讓某塊表格TABLE或者DIV里的內(nèi)容完全看不到,那就加上他,嘿嘿,就隱身了,需要的朋友可以了解下2012-12-21- 表格邊框的顯示與隱藏,是可以用frame參數(shù)來控制的。請注意它只控制表格的邊框圖,而不影晌單元格。2011-04-01
- 過去有很多網(wǎng)頁設(shè)計師喜歡將他們的網(wǎng)頁效果圖用table布局實現(xiàn)成網(wǎng)頁,但是這樣做會遇到一個比較麻煩的問題就是,后期調(diào)試和維護會相當?shù)睦щy?,F(xiàn)在,越來越多的前端開發(fā)er2009-07-30
- 本文通過實例代碼給大家介紹了HTML table 表格邊框的實現(xiàn)思路,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2019-10-12