thead tfoot tbody标签的使用

这三个都是<body>元素的子标签,不常用,因为其只是对<tr>标签做了一个区分

<thread>用于包裹表格头信息

<tfoot>用于包裹表格最后一行,不管将 tfoot 元素放在表格的什么位置,最后都会显示在最后一行

<tbody>用于包裹表格内容信息

使用举例

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <table>
 9         <caption>表格</caption>
10         <thead>
11             <tr>
12                 <th>书籍</th>
13                 <th>单价</th>
14             </tr>
15         </thead>
16         <tfoot>
17             <tr>
18                 <td>合计</td>
19                 <td>2.00元</td>
20             </tr>
21         </tfoot>
22         <tbody>
23             <tr>
24                 <td>书籍1</td>
25                 <td>1.00元</td>
26             </tr>
27             <tr>
28                 <td>书籍2</td>
29                 <td>1.00元</td>
30             </tr>
31         </tbody>
32     </table>
33 </body>
34 </html>
时间: 2024-12-24 01:59:09

thead tfoot tbody标签的使用的相关文章

【caption,thead,tfoot,tbody的使用以及使用nowrap禁止换行】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <tit

发现是在IE6-IE9下,下列元素table,thead,tfoot,tbody,tr,col,colgroup,html,title,style,frameset的innerHTML属性是只读的

table ID="zhutiTable" html2="<tr></tr>": 的数据 setTableInnerHTML(document.getElementById('zhutiTable'), html2); function setTableInnerHTML(table, html) {//table 为table对象,html为生成的html字符串   if (navigator && navigator.us

table标签中thead、tbody、tfoot的作用

为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示.如果表格很长,用tbody分段,可以一部分一部分地显示,不用等整个表格都下载完成.下载一块显示一块,表格巨大时有比较好的效果. tbody.tfoot.thead一般来说用得不是很多,对于比较复杂的页面,页面的排版用到了很多的表格,表格的结构也就相对的复杂了,所以又将表格分割成三个部分:题头.正文和脚注.而这三部分分别用: thead, tbody, t

设置GridView、DataGrid 以提供thead、tbody等标签

一.简述 做项目用到了GridView.DataGrid(原谅公司,既然还用DataGrid => 又从以前的项目中搬代码 - - !!! ).然后想为其增加 thead.tbody 好兼容JQuery的js插件. 二.内容 GridView代码 GridView1.DataSource = fakeDataTable; GridView1.DataBind(); GridView1.HeaderRow.TableSection = TableRowSection.TableHeader; Da

纯CSS,table的thead固定,tbody显示滚动条

首先是html的table的代码: 1 <table class="tablediv" id="myTable" border="1"> 2 <thead> 3 <tr> 4 <td class="wt40">111asdasdassd</td> 5 <td class="wt50">222asdsa</td> 6 <

thead固定tbody滚动

table tbody { display:block; height:195px; overflow-y:scroll; } table thead, tbody tr { display:table; width:100%; table-layout:fixed; } table thead { width: calc( 100% - 1em ) }

html基础标签-table-form标签

1.简单HTML标签由table元素以及一个或多个tr.th或td元素组成.还有以下标签: caption:为表格加标题: summary:表格摘要,不在页面显示: thead.tbody标签 width——表格的宽度: cell padding——使用单元格填充来创建单元格内容与其边框之间的空白: cell spacing——单元格间空白 background——添加背景颜色 块级元素: div-dl-form text-align:center: 2.head标签: title——网页的标题

jsp、JavaScript与html

0.先看一个实例 <BODY>内嵌子标签: <H>- - </H>   :文章标题 <FONT size="12" color="red"face="律书">...</FONT>         :字体标签,控制文本的大小.颜色.字体 <H#> ... </H#> :#=1, 2, 3, 4, 5, 6   6级字号 <P>...</P>

Jsoup代码解读之三-Document的输出

Jsoup代码解读之三-Document的输出 Jsoup官方说明里,一个重要的功能就是output tidy HTML.这里我们看看Jsoup是如何输出HTML的. HTML相关知识 分析代码前,我们不妨先想想,“tidy HTML"到底包括哪些东西: 换行,块级标签习惯上都会独占一行 缩进,根据HTML标签嵌套层数,行首缩进会不同 严格的标签闭合,如果是可以自闭合的标签并且没有内容,则进行自闭合 HTML实体的转义 这里要补充一下HTML标签的知识.HTML Tag可以分为block和inl