table標(biāo)簽(thead、tfoot、tbody、colgroup、col)

  • thead、tfoot 以及 tbody標(biāo)簽實現(xiàn)一個表格示例,這三個標(biāo)簽分別代表表格的頭部(th)、主題、和底部,能讓表格更加語義化的同時,也能讓我們更加方便的控制表格的表現(xiàn),用js控制也更簡單
<table border="1">
    <thead>
        <tr>
            <th>科目</th>
            <th>分?jǐn)?shù)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>語文</td>
            <td>99</td>
        </tr>
        <tr>
            <td>數(shù)學(xué)</td>
            <td>60</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>總分</td>
            <td>159</td>
        </tr>
    </tfoot>
</table>

這幾個標(biāo)記主要是用于提高table標(biāo)簽的加載以及顯示的,說白了,就是分布加載。在傳統(tǒng)的瀏覽器,在加載時,是當(dāng)所有的標(biāo)簽中元素都被下載后才會顯示,當(dāng)然這樣的用戶體驗是不好的。再加入了這幾個t打頭的標(biāo)簽后,table就會分布的加載table中的元素,順序依據(jù)寫在table中的標(biāo)簽順序進(jìn)行。 為了讓大表格(table)在下載的時候可以分段的顯示,就是說在瀏覽器解析HTML時,table是作為一個整體解釋的,使用TBODY可以優(yōu)化顯示。如果表格很長,用tbody分段,可以一部分一部分地顯示,不用等整個表格都下載完成。下載一塊顯示一塊,表格巨大時有比較好的效果。
tbody、tfoot、thead一般來說用得不是很多,對于比較復(fù)雜的頁面,頁面的排版用到了很多的表格,表格的結(jié)構(gòu)也就相對的復(fù)雜了,所以又將表格分割成三個部分:題頭、正文和腳注。而這三部分分別用: thead, tbody, tfoot來標(biāo)注。
thead 表格的頭 用來放標(biāo)題之類的東西
tbody 表格的身體 放數(shù)據(jù)本體
tfoot  表格的腳 放表格的腳注之類
我覺得最直接的用處是:
TBODY包含行的內(nèi)容下載完優(yōu)先顯示,不必等待表格結(jié)束.另外,還需要注意一個地方。表格行本來是從上向下顯示的。但是,應(yīng)用了thead/tbody/tfoot以后,就“從頭到腳”顯示,不管你的行代碼順序如何。也就是說如果thead寫在了tbody的后面,html顯示時,還是以先thead后tbody顯示

  • colgroup,col:
    colgroup放在table元素里,給表格的列統(tǒng)一定義風(fēng)格,比如下面表格每一行前2列顏色為紅色
    第三列顏色黃色,第四列顏色綠色,如果只有一列,第二,三,四列效果不應(yīng)用
<table id="table2">
    <colgroup>
        <col span="2" style="background-color:red">
        <col style="background-color:yellow">
        <col style="background-color:green">
    </colgroup>
    <tr>
        <th>ISBN</th>
        <th>Title</th>
        <th>Price</th>
        <th>test</th>
    </tr>
    <tr>
        <td>3476896</td>
        <td>My first HTML</td>
        <td>$53</td>
        <td>testvalue</td>
    </tr>
</table>

也可以把col直接放入table中,效果一樣,colgroup只是起到一個語義上的作用

  • summary屬性不會產(chǎn)生任何視覺效果,相當(dāng)于一個注釋,標(biāo)示table里的內(nèi)容

<table border="1" summary="Calendar for 2007.10">

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,520評論 1 41
  • HTML5< !--...--> 標(biāo)簽 comment 注釋標(biāo)簽用于在源文檔中插入注釋。注釋內(nèi)容不會被瀏覽器顯示。...
    野小寶閱讀 1,396評論 0 10
  • HTML5 標(biāo)簽comment 注釋標(biāo)簽用于在源文檔中插入注釋。注釋內(nèi)容不會被瀏覽器顯示。為代碼編寫注釋的好處是...
    才気莮孒閱讀 4,228評論 1 25
  • 本文將繼續(xù)上文接著介紹一些HTML常用標(biāo)簽 1:HTML全局屬性 在介紹常用常見的HTML標(biāo)簽之前,先以最簡單的方...
    憨憨二師兄閱讀 444評論 0 0
  • [問答02 | 是誰在給你希望?2017.05.10留言] 子曰:“三人行,必有我?guī)煛薄=?jīng)過這段時間學(xué)習(xí)之后,就明...
    早知今日閱讀 199評論 0 2

友情鏈接更多精彩內(nèi)容