table:表格;thead:表头;tr:行;td:单元格;th:一行的首个单元格

tbody包含行的内容下载完优先显示,不必等待表格结束.另外,还需要注意一个地方。表格行本来是从上向下显示的。但是,应用了thead/tbody/tfoot以后,就"从头到脚"显示,不管你的行代码顺序如何。也就是说如果thead写在了tbody的后面,html显示时,还是以先thead后tbody显示。

<table>
<thead>
<tr>
<th>这是在thead->tr->th里面</th>
<td>这是在thead->tr->td里面</td>
</tr>
</thead>
<tbody>
<tr>
<th>这是在thead->tr->th里面</th>
<td>这是在thead->tr->td里面</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>这是在thead->tr->th里面</th>
<td>这是在thead->tr->td里面</td>
</tr>
</tfoot>
</table>
<table>
<thead>
<tr>
<th>这是在thead->tr->th里面</th>
<td>这是在thead->tr->td里面</td>
</tr>
</thead>
<tbody>
<tr>
<th>这是在thead->tr->th里面</th>
<td>这是在thead->tr->td里面</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>这是在thead->tr->th里面</th>
<td>这是在thead->tr->td里面</td>
</tr>
</tfoot>
</table>

  

前端:table、thead、th、tr、td的更多相关文章

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

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

  2. jQuery遍历table中的tr td并获取td中的值

    jQuery遍历table中的tr td并获取td中的值 $(function(){ $("#tableId tr").find("td").each(func ...

  3. table样式测试总结tr td宽度分析

    题外话:一直以来习惯布局用ul,li样式调整比较方便,不会互相影响出现一些问题,but~现在公司涉及很多表格打印,都是用table写的,好多宽度高度合并啊,组合啊~~~,单元格之间互相影响,有的样式设 ...

  4. table标签修改tr,td标签的行距

    修改tr标签的行距,tbale标签的td标签间距 看如下Css文件的代码,其都没有table的tr行距产生效果 tr{ margin-top: 10px; padding: 10px; } td{ m ...

  5. HTML——表格table标签,tr或者td

    表格定义和用法 <tr> 标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,tr 元素的 ...

  6. js 前端 table 导出 excel

    园子,github,stackoverflow 关于前端下载的文章不少 园子里大部分都是 利用ActiveXObject对象来实现,可他有个缺点安全等级,还有必须安装excel…… github,st ...

  7. Table点击某个td获取当前列的头名称

    jq代码: $("td").click(function () { var tdHtml = $(this).attr("html"); var index = ...

  8. html表格中的tr td th用法

      表格是html中经常使用到的,简单的使用可能很多人都没问题,但是更深入的了解的人恐怕不多,下面我们先来看一下如何使用. <table>是<tr>的上层标签 <tr&g ...

  9. table 中的tr 行点击 变换颜色背景

    <style> table{border-collapse: collapse;border-spacing: 0; width: 100%;} table tr th,td{border ...

  10. 非正规写法获取不到tr,td

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. Linux给力的Shell命令

    查看目录下面的所有目录 ls /dev/ -F |grep "/"   bus/    disk/    input/  说明: ls -F命令将文件和目录后面添加一个特定的符号; ...

  2. flutter 引入第三方 Icon 图标(以阿里图标库为例)

    在fluttter中引入第三方图标库的具体方法: 1.在阿里图标库选好需要用的图标,添加进购物车将选好的图标打包下载到本地(下载代码),复制iconfont.ttf文件到项目中 2.存放途径:lib/ ...

  3. 5.7版本mysql查询报错:com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException:...this is incompatible with sql_mode=only_full_group_by

    先瞧下日志: ### Error querying database. Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException ...

  4. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_05-SpringSecurityOauth2研究-搭建认证服务器

    3 Spring Security Oauth2研究 3.1 目标 本项目认证服务基于Spring Security Oauth2进行构建,并在其基础上作了一些扩展,采用JWT令牌机制,并自定 义了用 ...

  5. Linux 7 关闭、禁用防火墙服务

    1 查看防火墙状态 [root@lvxinghao ~]# systemctl status firewalld 2 查看开机是否启动防火墙服务 [root@lvxinghao ~]# systemc ...

  6. svn如何撤销之前某个版本所做的改变

    撤销这个版本所做的修改:(撤销这个版本所做的修改) 右键项目svn->show log->revert changes from this revision 如果要恢复到某个版本:(这个版 ...

  7. .Net Core 常用开发工具

    组件名 描述 可选版本 推荐版本 Visual Studio Community 社区免费版 For Visual Studio 2017 For Visual Studio 2019 Visual ...

  8. Egret入门学习日记 --- 第十五篇(书中 6.1~6.9节 内容)

    第十五篇(书中 6.1~6.9节 内容) 好的,昨天完成了第五章. 今天来看第六章. 总结重点: 1.如何对组件进行分组? 跟着做: 重点1:如何对组件进行分组? 首先,选中你想要组合的组件. 然后点 ...

  9. DDS工作原理及其性能分析

    DDS工作原理及其性能分析 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 系列博客说明:此系列博客属于作者在大三大四阶段所储备的关于电子电路设计等硬件方面的 ...

  10. php 生成32位随机字符串 用于支付验证 用户注册

    //32位随机字符串 function randstrpay($length=32) { $rand=''; $randstr= 'ABCDEFGHIJKLMNOPQRSTUVWXYZ01234567 ...