当前位置：首页 > 资讯 > 网页前端 > CSS

HTML/CSS中可直接输数据的表格

时间：2018-09-23 21:39 作者：剑云锋来源：剑云锋阅读：1161
扫一扫，手机访问

摘要：和CSS code :body{font-family: Arial;/*background-image: url(image/mainroad.jpg) no-repeat;*/background-color: #00ff00;background-size: 100%;}table.form

和结合效果图：

在HTML/CSS 中，我们经常用HTML来布局和填充内容，用CSS来增加效果，修饰内容和布局，使整个页面变得更好看。

HTML和CSS的配合方法：

即在标签内增加CSS样式表的链接：

代码展现如下：



Make a Table Frame

CSS选择器

定义：

对带有指定属性的 HTML 元素设置样式。

注意：

只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

功能：

“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

CSS中的选择器有三个：

标签选择器、class类选择器、id选择器

1.标签选择器样式表：a{}、 div{}、table{} ...

{对全局所有的选中类型标签的样式修改}

2.class类选择器样式表： .class{}

{在HTML中每个标签都可以同时绑定多个类名，每个标签都可以设置class；同一个界面中class是不可重复}

3. id选择器样式表： #d1 {}

{每个标签都可有id，每个页面不可重复id，}

【一个HTML标签只能绑定一个id属性,一个HTML标签可以绑定多个class属性】

单纯选择

标签的时候是对全局的的（所有的）

进行修饰；

选择器优先级：

id选择器>class类选择器>标签选择器

所以有id和class 选择器的标签将不会被覆盖。交叉时是按照优先级覆盖显示的。

部分：电脑配件管理表2018年5月-8月

单纯的HTML 表格表单内容

标题

标签：

表格的标题

的内容填充（HTML）：

表格标题的样式修饰(CSS)

table.formdata caption
{
text-shadow: #FF00ff;
text-align: center;
padding-bottom: 6px;
font-weight: bold;
}

其余标签相关内容可参考 HTML中表格的实例应用一文。
部分：
form在网页中主要负责数据采集功能。
一个表单有三个基本组成部分：
（1）表单标签：包含了解决表单数据所用CGI程序的URL以及数据提交到服务器的方法。
（2）表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
（3）表单按钮：提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者者取消输入。还可以用表单按钮来控制其余定义了解决脚本的解决工作。
标签
定义：
标签规定客户可输入数据的输入字段。
根据不同的 type 属性，输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等
语法代码：

实例代码：

关系展现：
HTML/CSS中可直接输数据的表格
中 submit属性和reset属性
实例代码：
实例展现：
标签的其余属性值：
标签外能否增加标签？
input标签外能否增加form标签需要按情形区分：
应用场景的区别：
1.所有向后端提交数据（包括原生和ajax提交）的都建议用包裹.
2.假如只是用来做前端交互效果则不推荐使用form包裹。
但提交数据时，其实也可以不用form包裹input标签：
1.假如有form标签，在点击提交铵钮时，浏览器自动收集参数，并打包一个http请求到服务器，完成表单提交。在这一过程中，浏览器会根据method的不同，将参数编码后，放在urI中(get)，或者者放在请求的data中(post)。而后发送到服务器。
2.假如没有form，post方式的提交要使用ajax手工完成。get方式的提交需要自己拼接url。
表单其余相关内容可参考 HTML中表单的应用实例一文。
最后，附带一下该可输入的EXCEL表格的源码。
HTML code：

Make a Table Frame

电脑配件管理表2018年5月-8月
5月 6月 7月 8月

Hard Disk

Mainboard

Case

Power

CPU Fan

Total

CSS code :

body
{
font-family: Arial;
/*background-image: url(image/mainroad.jpg) no-repeat;*/
background-color: #00ff00;
background-size: 100%;
}
table.formdata
{
width: 300px;
height: 150px;
border: 2px solid #F00;
border-collapse: collapse;
font-family: Arial;
}
table.formdata caption
{
text-shadow: #FF00ff;
text-align: center;
padding-bottom: 6px;
font-weight: bold;
}
table.formdata th
{
border:1px solid #be34hc;
background-color: #E2E2E2;
color:#000000;
text-aglin:center;
font-weight: normal;
padding: 2px 8px 2px 6px;
margin: 0px;
}
table.formdata input
{
width: 100px;
padding: 1px 3px 1px 3px;
margin: 0px;
border:none;
font-family: Arial;
}
.btn
{
width:100px;
background-color: #FF00ee;
border:1px solid #00f2f2;
font-family: Arial;
}