首頁  >  文章  >  web前端  >  詳解HTML中table表格的frame與rules屬性

詳解HTML中table表格的frame與rules屬性

高洛峰
高洛峰原創
2017-02-17 16:02:113125瀏覽

在Web頁面上我們可以使用frame和rules來控製表格邊框是否可見,下面我們就來詳解HTML中table表格的frame和rules屬性,需要的朋友可以參考下

table標籤的frame和rules屬性,可以控制邊框的顯示。 frame屬性控製表格最外圍的四個邊框的可見性,而 rules 則控製表格內部邊框的可見性。
frame屬性可取的值及意義如下:
* void - 預設值。表示不顯示表格最外圍的邊框。
* box - 同時顯示四個邊框。
* border - 同時顯示四個邊框。
* above - 只顯示頂部邊框。
* below - 只顯示底部邊框。
* lhs - 只顯示左側邊框。
* rhs - 只顯示右側邊框。
* hsides - 只顯示水平方向的兩條邊框。
* vsides - 只顯示垂直方面的兩條邊框。
rules 屬性可取的值有五個,分別是:
* none - 預設值。無邊框。
* groups - 為行組或列組加上邊框。
* rows - 為行加邊框。
* cols - 為列加邊框。
* all - 為所有行列(單元格)加上邊框


程式碼範例:

<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>

在瀏覽器中的顯示效果如下圖:
詳解HTML中table表格的frame與rules屬性

在瀏覽器中的顯示效果如下圖:

🎜🎜🎜屬性中更多詳解相關文章請關注PHP中文網! 🎜
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn