表格表格高级

表格表单
表单的作用:用来收集用户的信息的;
表单的组成:
表单域<form name="" method="" action=""></form>
表单控件<input type="text" value=""/>
表单相关的标签
1,表单字段集
<fieldset></fieldset>
功能:相当于一个方框,在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组,并在文档中区别标出文本。fieldset元素可以嵌套,在其内部可以在设置多个fieldset对象。
2,字段级标题
<legend></legend>
功能:legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的第一个元素。
3,表单元素

1)上传文件框
文件域:<input type="file" />
2)图像域(图片按钮)
<input type=“image” width=“100” height=“100” alt=“” src=“路径”/>
4,提示信息标签
<label for="绑定控件id名"></label>
功能:label元素用来定义标签,为页面上的其他元素指定提示信息。要将label元素绑定到其他的控件上,可以将label元素的for属性设置为与该控件的id属性值相同。
表格相关的属性
1、单元格间距(该属性必须给table添加)
border-spacing:value;
?
2、合并相邻单元格边框
border-collapse:separate(边框分开)/collapse(边框合并);(写1像素边框表格)
3、无内容单元格显示、隐藏
empty-cells:show/hide;
?4、表格布局算法
table-layout:auto/fixed(固定宽度,不会随内容多少改变单元格宽度)
?
自动表格布局:列的宽度是由列单元格中没有折行的最宽的内容设定的。
缺点:较慢(因为它需要在确定最终的布局前访问表格中的所有内容)。
优点:灵活
固定表格布局
优点:加快运行的速度,允许浏览器更快的对表格进行布局。
缺点:不太灵活
5、表格标题
<caption>标题内容</caption>
表格标题位置:caption-side:top/right/bottom/left
说明:left,right位置只有火狐识别,top,bottom IE7上版本支持,ie7以下版本不支持其它属性值,只识别top
6、表格布局元素
1、表格基本组成
table(表格)??????tr(行) ?????td(列)
th:表格列标题(放在tr里)
重要属性:
1)、colspan=“value”????合并列 2)、rowspan="value"???和并行
3)、valign="top/bottom/middle" 垂直对齐方式?
?水平对齐:align=left/center/right
4)rules="groups/rows/cols/all/none"????添加组分隔线
说明:
rows:位于行之间的线条
cols:位于列之间的线条
all:位于行和列之间的线条
none:没有线条
groups:位于行组和列组之间的线条
2、数据行分组
<thead></thead> ?????表头
<tbody></tbody> ?????表体
<tfoot></tfoot>?????????表尾

说明:1.一个Table中,只能包含一个thead,一个tfoot,但可包含多个tbody。不会影响到表格的布局
3、数据列分组
<colgroup span="value"></colgroup>
<col??? span="value" />
说明:
1)col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组。
2)span属性显示指定相邻几列组成一组,span属性值默认为1,默认时仅定义一列为一组。
3)可以通过给table添加rules="groups"属性来给分组列添加组分割线。
注意:虽然col和colgroup具有相同的功能,但是,我们只能使用colgroup元素来决定表格内容部分分割线(rules)应该处于的位置,而col没有这个功能。

原文地址:http://blog.51cto.com/13570197/2319054

时间: 2024-10-28 07:56:44

表格表格高级的相关文章

Winform系列——好用的DataGridview过滤控件(表格的高级搜索功能)

上一篇 Winform系列——好看的DataGridView折叠控件 中主要介绍了DataGridview的表格多级折叠功能.这章主要介绍下最近封装的另一个DataGridview表格高级过滤的功能.此功能也是参照codeproject上面的源码改写的,代码可能有源码的内容,也有本人改写过的,所以看上去可能有点乱.废话不多说,上图: 1.一般的DataGridview效果: 2.增加了列上面右键效果: 3.升序和降序就没什么说的了,看看点击过滤的效果吧: 4.取消某一个字段过滤的方式有两种: 5

表格表格中获取不到button选择器

今天做一个表单提交,怎么也拿不到button的选择器,不管用$("#btn_update")还会getElementById("btn_update"),浏览器也是谷歌没问题,后来发现是动态加载dom元素无法取值的问题. 因为表单中的表格数据是通过另一个页面传来的id,ajax动态加载的.所以直接取的话,dom元素还没家在成功. 可以用 1.事件委托 $(document).on('click','#btn_update',function(){ //.......

【2】HTML表格表单

单元格中数据的对齐方式 Align = left Align = center Align = right Valign = top Valign = middle Valign = bottom 合并单元格 水平合并在 或 标记中使用 COLSPAN 属性,可以设置单元格所跨的列数,例如COLSPAN=3表示跨3列. 垂直合并在 或 标记中使用 ROWSPAN 属性,可以设置单元格所跨的行数,例如ROWSPAN=3表示跨3行. 表格总结 表格的基本结构 表格标记table的属性 border/

table表格隔行变色

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"

S1/使用HTML语言和CSS开发商业站点/02-列表、表格和框架

列表的分类: 1.无序列表 使用<ul>标签作为无序列表的声明,使用<li>标签作为每个列表项的起始.<ul>标签有一个type属性,这个属性的作用就是制定在显示列表时所采用的项目符号类型. type属性的取值 取值 说明 disc 项目符号显示为实体圆心,默认值 square 项目符号显示为实体方心 circle 项目符号显示为空心圆 2.有序列表 无序列表与有序列表的区别就在于,有序列表的各个列表项有先后顺序,所以会使用数字进行标识.有序列表使用<ol>

XHTML 列表与表格

列表与表格 列表作用 列表用于显示具有同一特征的有序/无序的数据 列表至少存在一个列表项 有序列表 用于显示具有同一特征的有序数据 <ol type="列表类型" start="起始编号"> <li>...</li> </ol> type属性的值 -1,数字 -a,小写字母 -A,大写字母 -i,小写罗马数字 -I,大写罗马数字 start值一直为数字 无序列表 用于显示具有同一特征的无序数据 <ul type=

Boottarp学习(二)表格

表格 表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格.在使用Bootstrap的表格过程中,只需要添加对应的类名就可以得到不同的表格风格,在接下来的内容中,我们会详细介绍Bootstrap的表格使用. 同样的,如果你对CSS预处理器熟悉,你可以使用Bootstrap提供的预处理版本: ?  LESS版本,对应的文件是 tables.less ?  Sass版本,对应的文件是 _tables.scss 如果你不懂LESS

第 3 章 表格和按钮

学习要点:1.表格2.按钮 主讲教师:李炎恢 本节课我们主要学习一下 Bootstrap 表格和按钮功能,通过内置的 CSS 定义,显示各种丰富的效果. 一.表格Bootstrap 提供了一些丰富的表格样式供开发者使用.1.基本格式//实现基本的表格样式<table class="table">注:我们可以通过 Firebug 查看相应的 CSS. 2.条纹状表格//让<tbody>里的行产生一行隔一行加单色背景效果<table class="t

HTML5入门(一)—— 基本标签&amp;表格

一.HTML简介 超文本标签语言,即网页的源码.而浏览器就是翻译解释HTML源码的工具. 二.HTML Head部分      <1>Head的作用 用于描述网页的一些关键信息.比如网页的配置.设置.关键字等等.这些信息大多在浏览器是看不到的,但是对网页的解析至关重要. <2>meta标签 ①用于描述网页的各种信息.网页编码格式UTF-8:万国码,兼容各种语言的编码,最常用! ②设置网页的关键字,有助于搜索引擎的搜索.name="keywords" 表示网页的关