【HTML】table元素
1.最简单的table
<table>
<tr>
<th></th>
</tr>
<tr>
<td></td>
</tr>
</table>
2.结构标签
<thead><tbody><tfoot>
<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。应该与 tbody 和 tfoot 元素结合起来使用。
tbody 元素用于对 HTML 表格中的主体内容进行分组,而 tfoot 元素用于对 HTML 表格中的表注(页脚)内容进行分组。
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。
这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。
注意事项:
a.如果使用 thead、tfoot 以及 tbody 元素,您就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了。
b.必须在 table 元素内部使用这些标签。
c.在默认情况下这些元素不会影响到表格的布局。不过,可以使用 CSS 使这些元素改变表格的外观。
d.<thead> 内部必须拥有 <tr> 标签!
<thead>、<tbody> 以及 <tfoot> 很少被使用,这是因为糟糕的浏览器支持。
3.表格属性
| 属性 | 值 | 描述 |
|---|---|---|
| align |
|
定义元素中内容的对齐方式。<thead> <tbody><tr>都支持 |
| char | character | 规定根据哪个字符来进行文本对齐。几乎没有浏览器支持这个属性。 |
| charoff | number | 规定第一个对齐字符的偏移量。几乎没有浏览器支持这个属性。 |
| valign |
|
规定元素中内容的垂直对齐方式。<thead> <tbody><tr>都支持 |
【HTML】table元素的更多相关文章
- IE 中单元格的 colspan 属性在某些情况下会影响 TABLE 元素的自动布局
今天在写一个jsp页面时,遇到一个如下的问题:在一个table中写了如下内容,table中定义了4列,在firefox中能正常显示,而在ie8中,显示不正常, 如下如图1:第二,三,四列宽度发生变化, ...
- 关于table元素的认识
表格是网页上最常见的元素,但是,现在对很多刚入行的前端们那是谈table色变.那是为啥?这是表格的框架的简单.明了.在传统的网页中使用没有边框的表格来排版是非常流行.在web标准逐渐深入设计领域以后, ...
- HTML&CSS Table元素详细解说
1.预热 css样式多如牛毛,我不可能一个一个去讲,那样好像背字典一样,我相信你们也不喜欢这样的方式.所以,我会在实战中慢慢和你讲解,然后,你记住一些重要的css属性就可以了.关键是,你要学会去查资料 ...
- Bootstrap table 元素列内容超长自动折行显示方法?
共需要四步: 1.在table元素的父容器div加上:class="table-responsive" 3.设置表头th的width:<th width="20%& ...
- jq 获取table元素,ajax 静态填加数据
知识点: 1.jq如何操作table->操作html内的元素 2. this 怎么使用 问题: 1.点击 修改 后,自动刷新了.判断取值,提示错误.正确出不来 2.ajax传值操作如何保密 ht ...
- JQuery操作Table元素
使用Jquery操作Table中的tr向上或向下移动,以及全选和反选操作. 点击Table Head中的复选框,全选或反选表格中所有的复选框; 选中复选框,点击Up 按钮, tr上移;点击 Down ...
- Jquery table元素操作-创建|数据填充|重置|隐藏行
1.Jquery创建表格 /** * 创建表格 * @param label 标题 json格式,数据结构见附录1 * @param data 数据 json格式,数据结构见附录1 * @param ...
- HTML table元素
搬运,内容来自HTML Dog. 简单示例 <!DOCTYPE html> <html> <body> <table> <tr> <t ...
- table元素使用bug
一.问题的产生 javaWeb课上老师让我们用表单做一个简单的自我介绍,但是在对表单里的单元格进行合并时出现了变形的情况,这里做个记录. 二.实验 让我们先做一个简单的4*4表格 <!DOCTY ...
随机推荐
- 1.JAVA WEB 笔记中文乱码
JAVA WEB 乱码问题解析 乱码原因 在Java Web开发过程中,经常遇到乱码的问题,造成乱码的原因,概括起来就是对字符编码和解码的方式不匹配. 既然乱码的原因是字符编码与解码的方式不匹配,那么 ...
- Copy_on_write的简单实现
Copy_on_write即写时复制,它的原理是通过引用计数来实现的. 即在分配空间时多分配额外的空间,用来记录有多少个指针指向该空间.当有新的指针指向该空间,引用计数则加一,当要释放该空间时,引用计 ...
- [1] [转]软件架构之三层架构和MVC的关系
注:本文章内所有内容都来自互联网,本人主要是起了一个收集的作用 又看到有人在问三层架构和MVC的关系,感觉这种问题有点教条化了.因为它们都在逻辑上将应用程序划为三块,凑了一个数字3,就有人非要把它们联 ...
- post和get方式区别
Ajax中我们经常用到get和post请求.那么什么时候用get请求,什么时候用post方式请求呢? 在做回答前我们首先要了解get和post的区别.1. get是把参数数据队列加到提交表单的ACTI ...
- js中年份、月份下拉框
<select id="year" style="width: 100px;"></select> <select id=&quo ...
- 中国省市区地址三级联动jQuery插件 案例下载
中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...
- 新安装mysql 第三方工具连接不上问题
Mysql从客户端连接服务器连不上的问题 公司要用Mysql做一个测试,开始在自己的本地建一个Mysql数据库自己本地的程序再连上去,没有遇到过连接不上的问题.这次数据库在服务器上,从本地客户端连 ...
- php倒计时防刷新
<?php //php的时间是以秒算.js的时间以毫秒算 date_default_timezone_set("Asia/Hong_Kong");//地区 //配置每天的活动 ...
- 闭包中this指向window的原因
var t={ b:1, w:function a(){ var b=2; alert(this.b); //弹出t对象的b属性 alert(b); //弹出a函数的b变量 return functi ...
- UML中关联(Association)和依赖(Dependency)的区别
原文转自:http://blog.csdn.net/metasearch/article/details/2334853 在UMLCHINA精华区,看到了一些关联和依赖的讨论,似乎越讲越糊涂.我想谈一 ...