HTML表格,table,thead,tbody,tfoot,th,tr,td,的属性以及跨行,跨列
在HTML中表格是作為一個整體來解析的,解析完才會在頁面顯示,如果表格很復雜很長,加載時間很長,用戶體驗就不好。所以這里就要用到表格結(jié)構(gòu)標簽,解析一部分就顯示一部分,不用等表格全部加載完再顯示。
表格結(jié)構(gòu)標簽(添加這三個標簽時,要注意不能影響網(wǎng)頁布局):
?? ?<thead></thead>? 表頭部(放表格的標題之類)
?? ?<tbody></tbody>?? ? 表主體(放表格主體數(shù)據(jù))
?? ?<tfoot></tfoot>? 表腳注 (放表格腳注)
在寫代碼時:不論上面<thead>,<tfoot>,<tbody>順序如何,在頁面顯示時,總是按照:<thead>? <tbody>? <tfoot>的順序呈現(xiàn)出來的。
------------------
結(jié)構(gòu)化表格標簽:
?? ?<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, %?? ? ? ? ? ? ? ? ? ?? ? 規(guī)定表格的寬度
align ????? left,center,right ? ? ? ? ? ? ? 表格相對周圍元素的對齊方式 (這里是整個表格相對于網(wǎng)頁進行移動居中的,而不是定義表格里面的內(nèi)容)
border?? pixels?? ? ? 表格變寬的寬度
bgcolor?? ? rgb(x,x,x),#xxxxxx,ColorName? ? ?? 表格的背景顏色
cellpadding ? ? ? ? pixels,%?? ?單元格與其他內(nèi)容之間的空白
cellspacing ? ? ? ? pixels,%? ?? 單元格之間的空白
frame?? ? ? ?? 屬性值? ? ? ? ? ? ? ? ? ? ? ? ? ? 規(guī)定外側(cè)邊框的哪個部分是可見的。
rules? ? ? ?? ? 屬性值 ? ??? 規(guī)定內(nèi)側(cè)邊框的哪個部分是可見的。
?
frame外邊框的屬性值:
?
?
rules屬性,說白了就是設(shè)置行和列之間的線條是否顯示。
rules表格內(nèi)側(cè)邊框的屬性值:
當表格設(shè)置屬性rules的值等于groups,rows,cols,all時,表格中的cellspacing="10px"就變成無效了,怎么設(shè)置都頁面都沒變化。
除非是把rules="none"或者不設(shè)置rules這個屬性值,那么表格中的cellspacing=“10px”才有效果。
設(shè)置rules=“none” 和? rules="groups"? 兩個都是不顯示內(nèi)邊框,沒有大的區(qū)別,也看不出來。
none???????? 顯示外邊框?? 在沒有設(shè)定表格寬度時,相比groups表格寬度會變大一點(10px左右)
groups????? 顯示外邊框和內(nèi)邊框 ? 在沒有設(shè)定表格寬度時,相比none表格寬度會變小一點(10px左右)
?------------------------
tr標簽屬性:
?
?
?
?
?
?
?
?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/Knowledge-is-infinite/p/10626852.html
總結(jié)
以上是生活随笔為你收集整理的HTML表格,table,thead,tbody,tfoot,th,tr,td,的属性以及跨行,跨列的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: MVCC在MySQL的InnoDB中的实
- 下一篇: luogu2839 [国家集训队]mid