设置样式：

<head>
<style type="text/css">
thead {color:green}
tbody {color:blue;height:50px}
tfoot {color:red}
</style>
</head>

<table border="1">

  <thead>

    <tr>

      <th>Month</th>

      <th>Savings</th>

    </tr>

  </thead>

  <tfoot>

    <tr>

      <td>Sum</td>

      <td>$180</td>

    </tr>

  </tfoot>

  <tbody>

    <tr>

      <td>January</td>

      <td>$100</td>

    </tr>

    <tr>

      <td>February</td>

      <td>$80</td>

    </tr>

  </tbody>

</table>

<tbody> 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。

tbody 元素应该与 thead 和 tfoot 元素结合起来使用。

thead 元素用于对 HTML 表格中的表头内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

带有 thead、tbody 以及 tfoot 元素的 HTML 表格的更多相关文章

  1. HTML 表格<table><caption><th><tr><td><thead><tbody><tfoot><col><colgroup>

    <table>标签: 定义和用法: <table>标签定义HTML表格. 简单的HTML表格由table元素以及一个或多个tr.th或td元素组成. tr元素定义表格行,th元 ...

  2. css案例学习之用thead、tbody、tfoot实现漂亮的table布局

    首先说说thead.tbody.tfoot <thead> <tbody> <tfoot> 无论前后顺序如何改变, <thead> 内的元素总是在表的最 ...

  3. HTML表格,table,thead,tbody,tfoot,th,tr,td,的属性以及跨行，跨列

    在HTML中表格是作为一个整体来解析的,解析完才会在页面显示,如果表格很复杂很长,加载时间很长,用户体验就不好.所以这里就要用到表格结构标签,解析一部分就显示一部分,不用等表格全部加载完再显示. 表格 ...

  4. thead、tbody、tfoot与顺序无关

    今天发现一个问题,thead.tbody.tfoot等标签的内容排版与顺序无关,做了一个小的实验:

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

    为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示.如果表格很长,用tbody分段,可以一部分一部分地显示, ...

  6. Html标签中thead、tbody、tfoot的作用

    Html标签中thead.tbody.tfoot的作用 为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用TBODY可以优化显示. ...

  7. table的thead,tbody,tfoot

    为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示. 如果表格很长,用tbody分段,可以一部分一部分地显示 ...

  8. html-3,table 表格标签 tr th td caption thead tbody tfoot 的简单使用

    <!-- table border='1' style="border-collapse:collapse;" border 表格的像素宽度 border-collapse: ...

  9. thead tbody tfoot

    <!DOCTYPE html> <html lang="en"> <head> <title>Title</title> ...

随机推荐

  1. duilib基本框架

    最近我一个同学在项目中使用到了duilib框架,但是之前并没有接触过,他与我讨论这方面的内容,看着官方给出的精美的例子,我对这个库有了很大的兴趣,我自己也是初学这个东东,我在网上花了不少时间来找相关的 ...

  2. 【读书笔记】【深入理解ES6】#9-JavaScript中的类

    大多数面向对象的编程语言都支持类和类继承的特性,而JavaScript却不支持这些特性,只能通过其他方法定义并关联多个相似的对象.这个状态一直从ECMAScript 1持续到ECMAScript 5. ...

  3. deeplearning.ai 神经网络和深度学习 week3 浅层神经网络 听课笔记

    1. 第i层网络 Z[i] = W[i]A[i-1] + B[i],A[i] = f[i](Z[i]). 其中, W[i]形状是n[i]*n[i-1],n[i]是第i层神经元的数量: A[i-1]是第 ...

  4. COGS 862. 二进制数01串【dp+经典二分+字符串】

    862. 二进制数01串 ★   输入文件:kimbits.in   输出文件:kimbits.out   简单对比 时间限制:1 s   内存限制:128 MB USACO/kimbits(译 by ...

  5. Codeforces Round #345 (Div. 2)【A.模拟，B，暴力，C，STL，容斥原理】

    A. Joysticks time limit per test:1 second memory limit per test:256 megabytes input:standard input o ...

  6. [51nod1206]Picture

    给你一坨矩形,问这些矩形组成的所有多边形的周长之和. 分别求竖着的边和横着的边. 离散化后线段树,维护当前行(或者列)有多少没在多边形里的,添加矩形就变成添加.删除线段. 每次加线段或删线段时累加一下 ...

  7. 数位DP入门：（bzoj1833+3209）

    //我是来看文章创建时间的= = 膜拜了一下蔡大神.... 人生第一道自己写的数位DP...好吧以前是看题解然后也不知道为什么就过了的>_< 虽然说现在还是只会裸题= = 数位DP介绍: ...

  8. POJ3041-Asteroids-匈牙利算法

    Asteroids Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 23963   Accepted: 12989 Descr ...

  9. Android源码博文集锦3

    Android精选源码 android实现最简洁的标签(label/tag)选择/展示控件   懂得智能配色的ImageView,还能给自己设置多彩的阴影哦   NicePhoto-基于 Kotlin ...

  10. c++(非递归排序)

    在上面一篇博客当中,我们发现普通查找和排序查找的性能差别很大.作为一个100万的数据,如果使用普通的查找方法,那么每一个数据查找平均下来就要几十万次,那么二分法的查找呢,20多次就可以搞定.这中间的差 ...