整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
SS 表格属性可以帮助您极大地改善表格的外观。
指定CSS表格边框，使用border属性。
下面的例子指定了一个表格的Th和TD元素的红色边框：
table,th,td｛border: 1px solid red;}
（1）编辑代码
打开记事本，在<body>标签中加入以下代码，并保存为HTML格式文件。代码如下。
（2)在浏览器中浏览效果
在浏览器中浏览效果如图所示。
请注意，上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。
如果需要把表格显示为单线条边框，请使用 border-collapse 属性。
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：
table{border-collapse: collapse;}
table,td,th{border: 1px solid red;}
（1）编辑代码
打开记事本，在<body>标签中加入以下代码，并保存为HTML格式文件。代码如下。
（2)在浏览器中浏览效果
在浏览器中浏览效果如图所示。
迎观看 Microsoft Word 中文版教程，小编带大家学习 Microsoft Word 的使用技巧，了解如何在 Word 中插入表格。
快速插入表格，选择「插入」-「表格」并将光标移动到网格上方，并选择所需的列数和行数。
或者自定义表格，依次选择「插入」-「表格」-「插入表格」。
选择「列数」和「行数」，选择「初始列宽」，然后单击「确定」。
将文档转换为表格，如果文档已存在由段落、逗号、制表符或特殊字符分隔的文本，可将该文本转换为表格。首先选择文本。
再选择「插入」-「表格」，然后选择「将文本转换成表格」。
「列数」选择「3」，「初始列宽」选择「自动」，选择「间距」，然后单击「确定」。
若要绘制自己的表格，选择「插入」-「表格」-「绘制表格」。
拖动绘制表格，根据需要绘制列和行。
创建表格后，在「表格设计」选项卡上选择「网格表4 着色5」。
以上就是在 Microsoft Word 中插入表格的方法。
软件下载地址：Microsoft word 2019 for Mac中文版
https://www.macz.com/mac/4533.html?id=NzY4OTYwJl8mMjcuMTg2LjEyNS4xOTY%3D
windows软件安装地址：Microsoft Word 2019
https://soft.macxf.com/soft/365.html?id=MjkzODQ%3D
在HTML/CSS 中，我们经常用HTML来布局和填充内容，用CSS来添加效果，修饰内容和布局，使整个页面变得更好看。
即在<head></head>标签内添加CSS样式表的链接：
代码展示如下：
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Make a Table Frame</title> <link rel="stylesheet" type="text/css" href="CSS/tableframe.css" > </head>
定义：
对带有指定属性的 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属性】
单纯选择<div>标签的时候 是对全局的的（所有的）<div>进行修饰；
选择器优先级：
id选择器>class类选择器>标签选择器
所以有id和class 选择器的标签将不会被覆盖。交叉时是按照优先级覆盖显示的。
单纯的HTML 表格表单内容
标题<caption>标签：
表格的标题<caption>的内容填充（HTML）：
<caption> 表格标题</caption>
标题<caption>的样式修饰(CSS)
table.formdata caption
{
text-shadow: #FF00ff;
text-align: center;
padding-bottom: 6px;
font-weight: bold;
}
其他<table>标签相关内容可参考 HTML中表格的实例应用 一文。
form在网页中主要负责数据采集功能。
一个表单有三个基本组成部分：
（1）表单标签：包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
（2）表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
（3）表单按钮：提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入。还可以用表单按钮来控制其他定义了处理脚本的处理工作。
定义：
<input> 标签规定用户可输入数据的输入字段。
根据不同的 type 属性，输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等
语法代码：
<input type="value" >
实例代码：
<td><input type="text" name="Mainboard 6月" id="Mainboard 6月"></td>
关系展示：
实例代码：
<p>
<input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" class="btn">
<input type="reset" value= "Reset All" class="btn">
</p>
实例展示：
<input>标签的其他属性值：
input标签外是否添加form标签需要按情形区分：
应用场景的区别：
1.所有向后台提交数据（包括原生和ajax提交）的<input>都建议用<form>包裹.
2.如果只是用来做前台交互效果则不推荐使用form包裹。
但提交数据时，其实也可以不用form包裹input标签：
1.如果有form标签，在点击提交铵钮时，浏览器自动收集参数，并打包一个http请求到服务器，完成表单提交。在这一过程中，浏览器会根据method的不同，将参数编码后，放在urI中(get)，或者放在请求的data中(post)。然后发送到服务器。
2.如果没有form，post方式的提交要使用ajax手工完成。get方式的提交需要自己拼接url。
<form>表单其他相关内容可参考 HTML中 表单 的应用实例 一文。
最后，附带一下该可输入的EXCEL表格的源码。
HTML code：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Make a Table Frame</title> <link rel="stylesheet" type="text/css" href="CSS/tableframe.css" > </head> <body image=""> <form method="psot"> <table border="1px" class="formdata"> <caption>电脑配件管理表2018年5月-8月</caption> <tr> <th></th> <th scope="col">5月</th> <th scope="col">6月</th> <th scope="col">7月</th> <th scope="col">8月</th> </tr> <tr> <th scope="row">Hard Disk</th> <td><input type="text" name="Hard Disk 5月" id="Hard Disk 5月"></td> <td><input type="text" name="Hard Disk 6月" id="Hard Disk 6月"></td> <td><input type="text" name="Hard Disk 7月" id="Hard Disk 7月"></td> <td><input type="text" name="Hard Disk 8月" id="Hard Disk 8月"></td> </tr> <tr> <th scope="row">Mainboard</th> <td><input type="text" name="Mainboard 5月" id="Mainboard 5月"></td> <td><input type="text" name="Mainboard 6月" id="Mainboard 6月"></td> <td><input type="text" name="Mainboard 7月" id="Mainboard 7月"></td> <td><input type="text" name="Mainboard 8月" id="Mainboard 8月"></td> </tr> <tr> <th scope="row">Case</th> <td><input type="text" name="Case 5月" id="Case 5月"></td> <td><input type="text" name="Case 6月" id="Case 6月"></td> <td><input type="text" name="Case 7月" id="Case 7月"></td> <td><input type="text" name="Case 8月" id="Case 8月"></td> </tr> <tr> <th scope="row">Power</th> <td><input type="text" name="Power 5月" id="Power 5月"></td> <td><input type="text" name="Power 6月" id="Power 6月"></td> <td><input type="text" name="Power 7月" id="Power 7月"></td> <td><input type="text" name="Power 8月" id="Power 8月"></td> </tr> <tr> <th scope="row">CPU Fan</th> <td><input type="text" name="CPU Fan 5月" id="CPU Fan 5月"></td> <td><input type="text" name="CPU Fan 6月" id="CPU Fan 6月"></td> <td><input type="text" name="CPU Fan 7月" id="CPU Fan 7月"></td> <td><input type="text" name="CPU Fan 8月" id="CPU Fan 8月"></td> </tr> <tr> <th scope="row">Total</th> <td><input type="text" name="Total 5月" id="Total 5月"></td> <td><input type="text" name="Total 6月" id="Total 6月"></td> <td><input type="text" name="Total7月" id="Total 7月"></td> <td><input type="text" name="Total 8月" id="Total 8月"></td> </tr> </table> <p> <input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" class="btn"> <input type="reset" value= "Reset All" class="btn"> </p> </form> </body> </html>
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;
}
本文部分内容来自网络，如有侵权，请联系修改。
*请认真填写需求信息，我们会在24小时内与您取得联系。
