2. 程式人生 > >HTML table 中的thead、tbody 、TFOOT

HTML table 中的thead、tbody 、TFOOT

阿新 • • 發佈：2019-02-03

<tbody> 標籤表格主體（正文）。該標籤用於組合 HTML 表格的主體內容。

tbody 元素應該與 thead 和 tfoot 元素結合起來使用。

thead 元素用於對 HTML 表格中的表頭內容進行分組，而 tfoot 元素用於對 HTML 表格中的表注（頁尾）內容進行分組。

thead、tfoot 以及 tbody 元素使您有能力對錶格中的行進行分組。當您建立某個表格時，您也許希望擁有一個標題行，一些帶有資料的行，以及位於底部的一個總計行。這種劃分使瀏覽器有能力支援獨立於表格標題和頁尾的表格正文滾動。當長的表格被列印時，表格的表頭和頁尾可被列印在包含表格資料的每張頁面上。

請注意，在預設情況下這些元素不會影響到表格的佈局。不過，您可以使用 CSS 使這些元素改變表格的外觀。

瀏覽器支援

<tbody> 標籤僅得到所有主流瀏覽器的部分支援。

HTML 與 XHTML 之間的差異

NONE

提示和註釋：

註釋：<thead> 內部必須擁有 <tr> 標籤！

註釋：如果您使用 thead、tfoot 以及 tbody 元素，您就必須使用全部的元素。它們的出現次序是：thead、tfoot、tbody，這樣瀏覽器就可以在收到所有資料前呈現頁尾了。您必須在 table 元素內部使用這些標籤。

註釋：<thead>、<tbody> 以及 <tfoot> 很少被使用，這是因為糟糕的瀏覽器支援。我們期望在 XHTML 的未來版本中這種情況會發生變化。假如您使用 Internet Explorer 5.0 或更新的瀏覽器，可以在我們的 XML 教程中檢視一個

例子。

執行結果：

TBody是在table中使用的，用來指明由它包括的各表格行做為表格的主體部分。

TBody與THead和TFoot在表格中形成三個“塊”，

THead指明表格的Head部分，

TFoot指明表格的腳註部分。

而TBody則指明表格的主體部分。   

  1. 表格的dom結構象這樣的：   
  2. <table>   
  3.               <thead>   
  4.                           <tr>   
  5.                                       <td>表頭</td>   
  6.                           </tr>   
  7.               </thead>   
  8.               <tbody>   
  9.                           <tr>   
  10.                                       <td>表體</td>   
  11.                           </tr>   
  12.               </tbody>   
  13.               <tfoot>   
  14.                           <tr>   
  15.                                       <td>表腳</td>   
  16.                           </tr>   
  17.               </tfoot>   
  18. </table>   
  19. 如果只有一個tbody的時候經常不寫tbody，但是其實這個物件還是存在的，alert一下table的innerHTML就可以看見了。  

相關推薦

HTML table 中的thead、tbody 、TFOOT

<tbody> 標籤表格主體（正文）。該標籤用於組合 HTML 表格的主體內容。 tbody 元素應該與 thead 和 tfoot 元素結合起來使用。 thead 元素用於對 HTML 表格中的表頭內容進行分組，而 tfoot 元素用於對 HTML 表格中的

html標籤的表格的tbody、tfoot、thead、colgroup、th、tr、td、table

關於table裡標籤的結構描述，直接上圖： 關於table標籤的寫法示例： <table width="60%" border="4"> <caption>這個是表格的標題</caption>   <colgroup span=

表格 HTML table、caption、tr、th、td、thead、tbody、tfoot、colgroup、col 標籤

<table> 標籤 定義 HTML 表格。一個 HTML 表格包括 <table> 元素，一個或多個<tr> 行、<th> 表頭以及<td> 單元格 元素。更復雜的 HTML 表格也可能包括 <caption>、&

用thead、tbody、tfoot實現漂亮的table佈局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ww

iview之——table中巢狀input、select等

使用iview在table中嵌入button是比較常見的需求，但是在table中嵌入input或者select你是否考慮過呢？本文用例項介紹input和select在table中的巢狀。 理解table如何巢狀input、select首先要理解vue的render函式可以參考：vue render函式介紹。當

HTML table 表格 thead 表頭固定，tbody 滾動

第一種方式實現 使用 css 樣式設定thead 和 tbody 【 推薦方式 】 #tableid>thead>tr{ display: table;

html table中嵌入checkbox實現全選

<%@page import="com.smg.domain.OrderDetail"%> <%@page import="java.util.ArrayList"%> <%@page import="java.util.List"%>

Html table、thead、tr、th、td 標簽

等號 borde bsp strong colspan 指定 div 空間 報表 Html table、thead、tr、th、td 標簽 案例一 <!-- table 表格標簽，配置表格使用、border="1" 添加表格框架 --> <table b

jquery中html、text、val回調函數

-1 下標 har round 觸發 charset 改變 方法 this 先掃盲： 　　摘自菜鳥教程：jQuery 方法：text()、html() 以及 val()擁有回調函數。 回調函數有兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。然後以函

JS中innerHTML、outerHTML、innerText 、outerText、value的區別與聯系？jQuery中的text()、html()和val()

chrom html標簽 sel detail put 替換 not 內容 tail 一、JS中innerHTML、outerHTML、innerText 、outerText、value的區別與聯系？jS中設置或者獲取所選內容的值：①innerHTML :屬性設置或返回該

js中的innerText、innerHTML、屬性值、value與jQuery中的text()、html()、屬性值、val()總結

att text color btn col class 屬性 fun value js與jQuery獲取text、html、屬性值、value的方法是不一樣的。 js與jQuery，text與innerText獲取(<!---->中為結果) html:

R中利用apply、tapply、lapply、sapply、mapply、table等函數進行分組統計--轉載

tor ant 變換 true post 1.0 指定 ntile lec apply() apply（m，dimcode，f，fargs） m 是一個矩陣。 dimcode是維度編號，取1則為對行應用函數，取2則為對列運用函數。 f是函數 fargs是f的可選參數集

Jquery中html()、text()、val()的使用和區別

center () .text div 使用 avi innerhtml mar font jquery中獲取對象內容的方法主要有3種，分別是html()、text()、val()。 obj.html()：獲取對象包裹的所有html內容，相當於innerHTML。

HTML中關於url、scr、href的區別

統一 RM lin https code nload css resource 直接 HTML中關於url、scr、href的區別 URL是什麽 URL：Uniform Resource Locators（統一資源定位器）的簡寫，Web瀏覽器通過URL從Web服務器請求頁面

js、html中的單引號、雙引號及其轉義使用

雙引號 ace bsp less 兼容 後來 問題 工具類 alc 摘自：http://blog.csdn.net/changhong009/article/details/46004343 &apos; ----單引號 $#39; ---

Django中簡單添加HTML、css、js等文件

htm djang .py 項目 移動 資源 默認 alt templates 首先申明下自己的環境， python版本3.65 Django版本1.11.15 創建默認Django項目後 首先說下添加Html 在urls.py文件中添加如圖代碼，照抄也

關於jquery中html()、text()、val()的區別

innertext 函數 () ron 表單元素 tro ext 回調函數 多個 .html()用為讀取和修改元素的HTML標簽 對應js中的innerHTML .html()是用來讀取元素的HTML內容（包括其Html標簽）,.html()方法使用在多個元素上時，

HTML筆記——bootstrap-select、table、tableExport、layer

  ！！使用軟體：vs2010！！ ！！要在伺服器上執行，不然載入不了json資料！！ 全部程式碼檔案： 連結：https://pan.baidu.com/s/1EFY9NFSNhX7OYAsg3yxK1Q 提取碼：yxtg 實現功能 1、根據下拉框的值填充表格資料 下拉框(b

postgresql中cluster、catalog、database、schema、table的區別

Example Scenario For example, a company could have two different software development teams. One writes software to manage the warehouses

HTML中dl、ul、ol用哪個比較好？

這裡是修真院前端小課堂，每篇分享文從 【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】 八個方面深度解析前端知識/技能，本篇分享的是： 【HTML中dl、ul、ol用哪個比較好？】   標題： 【修真院xx（職