css表格和表单

简介: css表格和表单

一 、表格的作用及基本语法

1、表格的作用及基本语法

数据表格的作用及组成

作用:显示数据

表格组成

<table width="value" height="alue" border="value">

<tr>

<td> </td>

<td> </td>

</tr>

</table>

个tr表示一行;一个td表示一列(一个单元格)

行分组

<thead> </thead>

<tbody></tbody>

<tfoot> </tfoot>

表头

表体必需存在的标签

表尾

说明: 一个Table中,只能包含一个thead,一个tfoot,但可包含多tbodytbody标签是写表格时必备的标签

*数据表格的相关属性

1) width="表格的宽度"

2) height="表格的高度

3) border="表格的边框

4) bgcolor="表格的背景色

5) bordercolor="表格的边框颜色

6) cellspacing="单元格与单元格之间的间距

7) cellpadding="单元格与内容之间的空隙"

8)水平对齐方式: align="eft左对齐/center居中/right右对齐"

9) 垂直对齐方式: valign="top顶对产/middle居中/bottom底对文/baseline(基线)

10)合并单元格属性

colspan=“所要合并的单元格的列数"合并列

rowspan=“所要合并单元格的行数”合并行

2、数据表格补充及CSS属性

单元格间距(该属性必须给table添加)

border-spacing:value:

2、合并相邻单元格边框

border-collapse:separate(边框分开)/collapse(边框合并);

3表格布局算法

table-layout:auto/fixed(固定宽度,不会随内容多少改变单元格宽度)

自动表格布局: 列的宽度是由列单元格中没有折行的最宽的内容设定的

缺点: 较慢(因为它需要在确定最终的布局前访问表格中的所有内容)。

优点: 灵活

固定表格布局

加快达打的速度允计刘觉器更快的对表格进行布局

缺点:不太灵活

4无内容单元格显示、隐藏

empty-cells:show/hide,

5表格标题

<caption>标题内容</caption>

caption:表格标题

表格标题位置: caption-side:top/right/bottom/left

(Css属性)

说明: left,right位置只有火狐识别,top,bottom lE7上版本支持,ie7以下版本不支持其它属性值,只识别top

6)th:表格列标题(放在tr里)

数据行分组

<thead></thead>

<tbody></tbody>

<tfoot> </tfoot>

表头

表体必需存在的标签

表尾

说明: 一个Table中,只能包含一个thead,个tfoot,但可包含多个tbodytbody标签是写表格时必备的标签.

8)数据列分组

<colgroup span="value></colgroup>FF,chrome, safari支持span, width, bgcolor属性.IE6 ,ie7,0支持align

作用: colgroup元素会根据从左到右的顺序依次对数据表格进行分组。

<col

span="value"width="100" align="left" />

作用: 细化colgroup,需要写在colgroup里

9 rules="groups/rows/cols/all/none"

添加组分隔线

说明:

rows:位于行之间的线条

cols:位于列之间的线条

all: 位于行和列之间的线条

none:没有线条

groups:位于行组和列组之间的线条

说明:

2) span属性显示指定相邻几列组成一组,span属性值默认为1,默认时仅定义一列为一组。

3)可以通过给table添加rules="groups"属性来给分组列添加组分割线


二、表单的作用和表单的使用

1、表单的作用及组成

表单的作用: 用来收集用户的信息的

表单组成: 表单框 (表单域form)

提示信息

表单控件/表单元素

1)、表单框

<form name="表单名称(英文字母开头的)"method (提交方式) ="post/get" action="表单提交的地址"></form>

2)文本框

<input type="text"value="默认值"maxlength="5"placeholder="提示文本"/>

3)密码框

<input type="password"placeholder="密码"/>

4)提交按钮

<input type="submit" value="按钮内容”/>

<input type="reset”value="按钮内容"/>重置按钮

5)单选框/单选按钮

<input type="radio" name="ral" value="radiovalue"/>

<input type="radio"name="ral" checked="checked"/>

单选按钮里的na

me康性必须写

组单选按钮的r

m届性有以行

6) 复选框

<input type="checkbox" name="like" value="checkboxvalue"/>

复选按钮里的name属性必须写,同一组复选按钮的name属性值必须一样

checked="checked"表示默认被选中,可简写成checked

disabled="disabled"表示禁用,可简写成disabled

enabled:可用状态

7)下拉菜单

<select name="">

<option name=""value="表单被提交时被发送到服务器的值" selected="selected">菜单内容</option>

</select>

8) 多行文本框(文本域)

<textarea name="textareal"cols="字符宽度”rows="行数">

</textarea>

9)跳转按钮

<input name="" type="button"value=“按钮内容” />

<button> </button>

button和submit的区别是

submit是提交按钮起到提交信息的作用,type类型是button只起到跳转的作用,不进行提交

10)上传文件框

文件域: <input type="file" />

11)图像域

<input type="image" src="" width="100" height="100" alt="上传图片"/>

12)隐藏文本框

<input type="hidden"value="值"/>上传隐藏的值/字段

13)提示信息标签(作用: 将提示信息及相应的表单控件进行关联)

<label for="user">提示信息</label>

<input type="text" id="user"/>

14)表单字段集

<fieldset></fieldset>于对表单中的元素进行分组,可以嵌套

功能:相当于一个方框,在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素

可以嵌套,在其内部可以在设置多个

fieldset对象。

15)字段级标题

<legend></legend>

功能: legend元素可以在fieldset对象绘制的方框内插入一个标题legend元素必须是fieldset内的第一个元素。

扩展知识点3: 对于不同的输入类型,value 属性的用法的意义

value 属性为 input 元素设定值

对于不同的输入类型,value 属性的用法也不同

type="button""reset","submit"- 定义按钮上的显示的文本

type="text”,"password"- 定义输入字段的初始值

type="checkbox","radio"- 定义与输入相关联的值

注释: <input type="checkbox"> 和 <input type="radio"> 中必须设置 value 他name属性。

扩展知识点4:

<form name="表单名称"method="post/get" action=""></form>

Form中的获取数据的两个方式get和post的区别?

1.get请求通常是从服务器上获取数据,post请求通常表示向服务器提交数据

2.get请求发送的数据都写在地址栏上,用户可见。而post请求发送的数据用户不可见。

3.get请求不能提交大量的数据,但post可以,因此不要混用。

建议:

1. get方式的安全性较Post方式要差些,包含机密信息的话,建议用Post数据提交方式

2  在做数据查询时,建议用Get方式,而在做数据添加、修改或删除时,建议用Post方式,


相关文章
|
9天前
CSS3注册表单文本框占位符特效源码
CSS3注册表单文本框占位符特效源码是一段简单的css3 input文本框占位符,placeholders占位符内容填写注册表单特效,非常有意思,欢迎有兴趣的朋友前来下载使用。
21 5
|
18天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
|
20天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
33 3
|
5月前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
180 0
|
4月前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
4月前
|
前端开发
酷炫表单,触感未来:HTML与CSS动画的创新应用!
酷炫表单,触感未来:HTML与CSS动画的创新应用!
|
6月前
|
前端开发
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
|
6月前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
52 1
|
6月前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
79 1
|
5月前
|
前端开发
css实用技巧——absolute绝对布局的妙用:表单校验提示信息,制作角标
css实用技巧——absolute绝对布局的妙用:表单校验提示信息,制作角标
29 0