HTML表格,table,thead,tbody,tfoot,th,tr,td,的屬性以及跨行,跨列


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

 

 

 

 

 

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 HTML 表格 表格table,th,tr,td區分以及屬性 前端:table、thead、th、tr、td table標簽中thead、tbody、tfoot的作用 table標簽中thead、tbody、tfoot的作用 table標簽中thead、tbody、tfoot的作用 html表格中的tr td th用法 html表格中的tr td th用法 vb.net 使用 Regex Replace 正則 替換 Html字串的table中tbody第一個tr下的td為th
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM
table的thead/tbody/tfoot/tr/th/td (轉)