- 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">