在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標簽屬性：

?

?

?

?

?

?

?

?

?

?

轉載于:https://www.cnblogs.com/Knowledge-is-infinite/p/10626852.html

總結

以上是生活随笔為你收集整理的HTML表格,table,thead,tbody,tfoot,th,tr,td,的属性以及跨行，跨列的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。