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. Win10系统安装VMware-viclient-6.0无响应问题解决方法

    背景:笔记本重做系统升级至Win10系统后,由于工作需要,得安装VMware-viclient-6.0软件进行远程连接. 问题:没有出现网上那种各种报错情况,只是在点击“安装”按钮的时候没弹出任何等待 ...

  2. angular中子组件通过@Output 触发父组件的方 法

    1. 子组件引入 Output 和 EventEmitter import { Component, OnInit ,Input,Output,EventEmitter} from '@angular ...

  3. 【419】C语言语句

    判断语句 C 语言提供了以下类型的判断语句.点击链接查看每个语句的细节. 语句 描述 if 语句 一个 if 语句 由一个布尔表达式后跟一个或多个语句组成. if...else 语句 一个 if 语句 ...

  4. SpringCloud学习成长之十二 断路器监控

    在我的第四篇文章断路器讲述了如何使用断路器,并简单的介绍了下Hystrix Dashboard组件,这篇文章更加详细的介绍Hystrix Dashboard. 一.Hystrix Dashboard简 ...

  5. pycharm连接linux创建django工程

    windows中安装最新版pycharm--2018年10月的版本 点击创建工程,看下图: C:\Users\Lenovo\PycharmProjects\untitled4 这个路径不要动,一动就出 ...

  6. Spring Cloud(7.3):配置Consumer Server

    接下来我们创建一个消费者服务.消费者服务从生产者服务拿取商品-价格信息,并保存在Redis中.同时,接收消息队列中生产者服务的更新提示,如果某个商品-价格被修改,则删除Redis中的缓存数据,并重新从 ...

  7. css3 animation 点亮灯光效果

    <style> .wrap .bulb { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50% ...

  8. iOS-DatePicket

    组件_DatePicket /** 1.初始化 2.设置选择控件的格式 3.设置日期选择控件的地区 4.监听日期选择控件数值变化 **/ UIDatePicker *datePicker = [[UI ...

  9. iOS-UILabel的使用

     常用属性UILabel //显示的文字 @property(nonatomic,copy)   NSString           *text; //字体 @property(nonatomic, ...

  10. leetcode1130 Minimum Cost Tree From Leaf Values

    思路: 区间dp. 实现: class Solution { public: int mctFromLeafValues(vector<int>& arr) { int n = a ...