在HTML中表格是作為一個整體來解析的,解析完才會在頁面顯示,如果表格很復雜很長,加載時間很長,用戶體驗就不好。所以這里就要用到表格結構標簽,解析一部分就顯示一部分,不用等表格全部加載完再顯示。
表格結構標簽(添加這三個標簽時,要注意不能影響網頁布局):
<thead></thead> 表頭部(放表格的標題之類)
<tbody></tbody> 表主體(放表格主體數據)
<tfoot></tfoot> 表腳注 (放表格腳注)
在寫代碼時:不論上面<thead>,<tfoot>,<tbody>順序如何,在頁面顯示時,總是按照:<thead> <tbody> <tfoot>的順序呈現出來的。
------------------
結構化表格標簽:
<table>
<caption>表格標題,一個表只有一個</caption>
<thead><!--表頭部-->
<tr>
<th></th><!--表頭單元格,粗體,居中-->
<th></th>
</tr>
<tr>
<th></th><!--表頭單元格,粗體,居中-->
<th></th>
</tr>
</thead><!--表頭部-->
<tbody><!--表主體-->
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody><!--表主體-->
<tfoot><!--表腳注-->
<tr>
<td></td>
<td></td>
</tr>
</tfoot><!--表腳注-->
</table>
------------------------
-------------------------
table表格屬性
width pixles, % 規定表格的寬度
align left,center,right 表格相對周圍元素的對齊方式 (這里是整個表格相對於網頁進行移動居中的,而不是定義表格里面的內容)
border pixels 表格變寬的寬度
bgcolor rgb(x,x,x),#xxxxxx,ColorName 表格的背景顏色
cellpadding pixels,% 單元格與其他內容之間的空白
cellspacing pixels,% 單元格之間的空白
frame 屬性值 規定外側邊框的哪個部分是可見的。
rules 屬性值 規定內側邊框的哪個部分是可見的。
frame外邊框的屬性值:
rules屬性,說白了就是設置行和列之間的線條是否顯示。
rules表格內側邊框的屬性值:
當表格設置屬性rules的值等於groups,rows,cols,all時,表格中的cellspacing="10px"就變成無效了,怎么設置都頁面都沒變化。
除非是把rules="none"或者不設置rules這個屬性值,那么表格中的cellspacing=“10px”才有效果。
設置rules=“none” 和 rules="groups" 兩個都是不顯示內邊框,沒有大的區別,也看不出來。
none 顯示外邊框 在沒有設定表格寬度時,相比groups表格寬度會變大一點(10px左右)
groups 顯示外邊框和內邊框 在沒有設定表格寬度時,相比none表格寬度會變小一點(10px左右)
------------------------
tr標簽屬性: