table表格及属性

一、表格的标签及属性

table属性
Width、height 宽高（单位是像素或百分比）
align 对齐
border 外边框
bgcolor 背景色
background 背景图片
Cellspacing 单元格间距(单元格和单元格的距离) 一般情况写0
Cellpadding 单元格边距（表格边框与内容的距离）一般情况写0
tr属性：
Align 水平对齐
left/center/ right
valign 垂直对齐
Top（上）/middle（中）/bottom（下）
bgcolor 背景色
td的基本属性
Width、height 宽高（单位是像素或%）
align valign 水平对齐、垂直对齐
bgcolor 背景色
background 指定背景图片
Colspan 水平合并合并多列
rowspan 垂直合并合并多行
表头th标签

是特殊的单元格，文字会自动加粗、居中。它的用法是取代的位置即可

餐饮类型	主要菜系	价格
中餐厅	生猛海鲜	1000元

表格主体tbody标签 T head 表格页眉（头部）只能出现一次 T body 表格主体可以出现多次 T foot 表格页脚（结尾）只能出现一次以上三个标签结合使用，可将表格中的一行或几行合成一组 ….….….

二、表单属性 1. 表单的概念表单在网页中主要负责数据采集功能，表单的标记是: 2. 表单的属性 1. action属性：设置表单的提交地址（表单提交的url）指定表单提交后由服务器上的哪个处理程序进行处理 2 method属性：设置表单的提交方法，属性值为get、post提交方式 3 name属性：设置表单的名称 4 target属性：设置表单的打开方式，属性值可以是_blank、_self。_self在原窗口中打开，为默认值。_blank 在新窗口打开 3. enctype:默认编码或者指定二进制流【附件的提交形式】 4. method的值为get:它是通过URL来传递表单数据的，表单元素的数据在地址栏可见，而且有大小限制，传数据量小一般不大于2KB method的值为post:它是通过请求正文传递表单数据的，URL不可见表单元素数据，比较安全，而且没有大小限制，但往往服务器会控制 3. 输入标记表单元素中输入标签是,常用属性有type（类型）、name（名称）、value（值）、checked（默认选中）三、 HTML常用表单控件 1. 文本框文本框：主要用于输入单行文本内容。代码如下: 代码格式如下：姓名：效果如下：账号：
2. 密码框密码框：主要用于输入一些保密信息，代码格式如下：代码格式如下：密码：效果如下：

密码：

分组：
用户登录
3. 单选框
单选框主要是让网页浏览者在一组选项里选择一个。
Name属性定义单选框的名称，单选框都是以组为单位使用的，在同一组中的选项必须使用同一名称【name=“gender”】。
代码格式如下：
性别：男
女
效果如下：

性别：男
女

复选框
复选框主要是让网页浏览者在一组选项里同时选择多个选项。
选中checked代码格式如下：【disabled="disabled"足球】
爱好：读书
听歌
阅读
效果如下：
兴趣爱好：足球
篮球球
音乐

扩展：隐藏域：

图像域：
文件域
文件域主要是让网页浏览者上传文件。
代码格式如下：
上传文件：
效果如下：

提交按钮
提交按钮用来将输入的信息提交到服务器。Value属性定义按钮的显示文字。
代码格式如下：

效果如下：
重置按钮
重置按钮用来重置表单中输入的信息。代码格式如下：
<input type="reset"value=“重置”/>
效果如下：
input重置按钮：

input提交按钮：

input普通按钮：

提交按钮
重置按钮
普通按钮

图片域
图像域标记
代码格式如下:
下拉列表
下拉菜单主要用于在有限的空间里设置多个选项。
下拉菜单选中状态给option添加 selected
代码格式如下：

… 居住城市(下拉菜单)：北京上海深圳厦门
注：Select标记的multiple属性和size属性不要求掌握。

列表框（提供多选ctrl+多选）：

苹果
橙子

香蕉
西瓜
柠檬
香梨

10. 文本域标记及属性
文本域主要用于输入较长的文本信息。
代码格式如下：
默认文字
效果：
Cols属性：定义文本域的宽度（列）
rows属性：定义文本域的高度（行）
四、 HTML5新增表单控件

HTML5文本框及placeholder属性
当文本框处于未输入状态并且未获取光标焦点时，模糊显示输入提示文字。
代码格式如下：

效果如下：
HTML5文本框类型tel
提供专门用于输入电话号码的文本框。它并不限定只输入数字，因为很多的电话号码
还包括其他字符（如+ 、-、(、)等），如86-0536-8888888
代码格式如下： pattern 属性规定用于验证输入字段的模式。模式指的是正则表达式 -->

电话号码：
电话号码：
效果如下:
HTML5 文本框类型 url 网址
url类型的input 元素提供用于输入url地址这类特殊文本的文本框．当提交表单时，如果所输入的内容是url地址格式的文本，则会提交数据到服务器，如果不是url地址格式的文本，则不允许提交．

代码如下：

效果如下：
4. HTML Email邮件
Email类型的input元素是一种专门用于输入e-mail地址在文本输入框，在提交表单时，会自动验证输入框的值．如果不是一个有效的e-mail地址,则该输入框不允许提交该表单．
代码如下：

      <input type="email"/>

效果如下： 5. HTML5文本框类型number 数字 max最大值 min最小值 step步长 Number类型的input 元素提供用于输入数值的文本框．我们还可以设定对所接受数字的限制，包括规定允许的最大值和最小值、合法的数字间隔或默认值等。如果所输入的数字不在限定范围之内，则会出现错误提示。代码如下： step（步长）属性值倍数 max最大值 min最小值效果如下： 6. HTML5文本框类型date Date类型的日期检出器用于选取日、月、年，即选择一个具体的日期，如2016年３月４日，选择后会以2016-03-04的形式显示代码如下：效果如下： 7. 视频和音频您的浏览器不支持Video标签。 8. Your browser does not support this audio format.

table表格及属性相关推荐

php中td的属性设置,html table表格是什么？table标签中各种属性的使用方法
html table表格是什么? 首先让我们了解什么是表格,还有表格的作用什么是table表格:由一些被称之为单元格的矩形框按照从左到右从上到下的顺序排列到一起组成的 table表格的作用:以 ...
＜table＞表格标签属性
<table>表格标签属性源代码 1.表格的相关标签 <table> table是用于定义表格的标签 <tr> ...
Vue + Element-ui 实现table表格数据相同项合并
Vue + Element-ui 实现table表格数据相同项合并通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象 data() {return {table ...
06 - table表格标签+ 行合并+列合并
1.table 表格标签属性在小程序中查看 cellspacing="0" 表格边框合并: 表格:table 行:tr 列:td 属性: ...
android studio table居中代码_html table表格标签内容如何居中显示？表格的align属性的用法介绍...
本篇文章主要的介绍了关于HTML 表格table标签的居中使用,还有关于align属性在table表格标签中的使用方法,可以帮助表格对齐和表格中的文本对齐.接下来让我们来看看这篇文章吧. 首先我们先来 ...
html5语言在tr下下拉列表,5-HTML列表， table表格标签及其属性-Go语言中文社区
一.有序列表 (ordered list) 格式: 有序列表有序列表有序列表语义及运用: 给一堆数据添加列表语义,数据有先后之分.常运用于歌单,排行榜等需要列出先后顺序的列表. 注意点: 1. ...
HTML中table表格的常用标签及属性
table表格的常用标签及属性 <table border="1" cellspacing="0" cellpadding="5"&g ...
table 表格的一些属性
将一定的内容按特定的行.列规则进行排列就构成了表格.无论在日常生活和工作中,还是在网页设计中, 表格通常都可以使信息更容易理解.HTML 具有很强的表格功能,使用户可以方便地创建出各种规格的表格, 并 ...
html颜色代码表odd,CSS的odd和even属性实现table表格tr单双行颜色相间而不同
CSS的odd和even属性实现table表格tr单双行颜色相间而不同  0  325 暴猿 2019/6/13 9:04:47 效果如下图所示: img[/layedit/img/2019061 ...
(Table)操作：Element-ui 中 Table 表格的设置表头/去除下标线/设置行间距等属性的使用及 slot-scope=“scope“ 的使用案例
Ⅰ.Element-ui 提供的Table组件与想要目标情况的对比: 1.Element-ui 提供Table组件情况: 其一.Element-ui 自提供的Table代码情况为(示例的代码): // ...

table表格及属性

table表格及属性相关推荐

最新文章

热门文章