整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
文由ScriptEcho平台提供技术支持
项目地址：传送门
在数据分析和可视化领域，经常需要以表格的形式展示数据。Plotly.js 是一款功能强大的 JavaScript 库，不仅可以创建交互式图表，还可以动态生成 HTML 表格。
本代码使用 Plotly.js 创建了一个动态 HTML 表格，可以显示多行多列数据。表格具有以下特点：
import Plotly from 'plotly.js-dist'
var values = [
['Salaries', 'Office', 'Merchandise', 'Legal', '<b>TOTAL</b>'],
[1200000, 20000, 80000, 2000, 12120000],
[1300000, 20000, 70000, 2000, 130902000],
[1300000, 20000, 120000, 2000, 131222000],
[1400000, 20000, 90000, 2000, 14102000]]
values 数组包含了表格的数据，其中第一行是表头，其余行是数据行。
var headerColor = "grey";
var rowEvenColor = "lightgrey";
var rowOddColor = "white";
这些变量用于定义表头和单元格的样式，包括颜色和填充颜色。
var data = [{
type: 'table',
header: {
values: [["<b>EXPENSES</b>"], ["<b>Q1</b>"],
["<b>Q2</b>"], ["<b>Q3</b>"], ["<b>Q4</b>"]],
align: "center",
line: {width: 1, color: 'black'},
fill: {color: headerColor},
font: {family: "Arial", size: 12, color: "white"}
},
cells: {
values: values,
align: "center",
line: {color: "black", width: 1},
fill: {color: [[rowOddColor,rowEvenColor,rowOddColor,
rowEvenColor,rowOddColor]]},
font: {family: "Arial", size: 11, color: ["black"]}
}
}]
data 对象定义了表格的结构和样式。header 对象定义了表头，cells 对象定义了单元格。
Plotly.newPlot('myDiv', data);
Plotly.newPlot() 函数将表格绘制到指定容器中，在本例中容器的 ID 为 myDiv。
开发这段代码让我对 Plotly.js 的表格功能有了更深入的了解。我学到了如何动态生成 HTML 表格，并使用样式对其进行自定义。
未来，该表格功能可以拓展和优化：
获取更多Echos
本文由ScriptEcho平台提供技术支持
项目地址：传送门
微信搜索ScriptEcho了解更多
、表单：
网页仅有表单才能接收用户输入信息、并将信息提交到服务器进行处理。
表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
二、制作规范的表单
<form name="表单名称" method="提交的方式:get|post" action="处理表单的服务器地址">
一系列的表单对象
提交按钮:<input type="submit" value="提交" name="sum" />
</form>
注意：表单必须要有提交按钮,作用:当点击提交钮时，会自动将表单中的数据提交到表单action属性所指定的地址进行处理.
三、定义表单对象
1.使用input标签定义表单对象
<input type="元素类型" name="表单对象名称" value="表单对象的值">
1.1 type的类型:
text(文本框)、password(密码框)、checkbox(复选框)、radio(单选按钮)
submit(提交按钮)、reset(重置按钮)、file(文件域)、button(按钮)、
image(图片域：具备提交按钮)、hidden(隐藏域)、
date(日期控件:html5新增的)、number(数字调节器:html新增的)
2.使用select标签定义下拉列表
<select name="sel">
<option value="项值">项文本</option>
<option value="研究生">研究生</option>
<option value="本科">本科</option>
....
</select>
3.使用textarea定义文本域:
<textarea cols="80" rows="8">请输入内容</textarea>
四、常用表单对象的属性
1.文本框:
<input type="text" name="uname" value="Admin" maxlength="最大字符数:15" size="文本框长度:10" readonly="只读:readonly"/>
2.设置单选框和复选框的默认选中
checked="checked"属性
3.使用selected属性设置下拉列表的选中项
<option value="本科" selected="selected">本科</option>
来自网络
五、css(Cascading style sheet):级联（层叠）样式表。
1.作用：修饰html标签
2.优势：
内容与表现分离；
网页的表现统一，容易修改；
丰富的样式，使得页面布局更加灵活；
减少网页的代码量，增加网页的浏览速度，节省网络带宽；
运用独立于页面的CSS，有利于网页被搜索引擎收录。
六、在html文档添加css样式的方法。
1.行内样式：使用标签的style属性添加样式
<标签 style="一系列的样式规则">
样式规则的格式:样式属性:样式属性值;
2.内部样式:使用style标签定义样式
<style type="text/css">
一系的样式选择器(选择器必需先定义，后引用)
</style>
注意：通常情况style标签放在head标签中。
2.1基本选择器分类：类选择器、Id选择器、标签选择器
2.2使用类选择器
定义类选择器
.类选择器名{一系列样式}
引用类选择器:使用标签的class属性引用类选择器名称
2.3使用Id选择器
定义id选择器
#id选择器名{一系列样式规则}
引用ID选择器:使用标签的ID属性引用ID选择器名称
2.4定义标签选择器
标签名称{一系列样式规则}
引用标签选择器:当使用该标签时自动套动标签样式
3.外部样式:
外部样式是将一系列样式选择器定义在外部样式文件（**.css）中
3.1在网页使用link标签引用外部样式文件
<link href="index.css" type="text/css" rel="stylesheet" />
七、样式优先级（就近原则）
行内样式>内部样式>外部样式
id选择器>类选择器>标签选择器
八、高级选择器(复合选择器)
1.层选选择器
1.1后代选择器
定义后代选择器
选择器1 选择器2{一系列样式规则}
使用：必需先用选择器1,再使用选择器2,且选择器存在层次关系
1.2子选择器
定义子选择器
选择器1>选择器2{一系列样式规则}
使用：必需先用选择器1,再使用选择器2,且选择器存在父子关系
1.3相邻兄弟选择器
定义相邻兄弟选择器
选择器1+选择器2{一系列样式规则}
使用：必需先用选择器1,再使用选择器2,且相邻的
1.4通用相邻兄弟选择器
定义通用相邻兄弟选择器
选择器1~选择器2{一系列样式规则}
使用：必需先用选择器1,再使用选择器2,且相邻之后的所有兄弟
2.交集选择器
定义交集选择器
标签选择器类选择器|id选择器
使用：使用标签的同时还引用类或者id选择器
3.并集选择器
定义并集选择器
选择器1,选择器2
使用：使用选择器1 或者 选择器2 都行
九、span标签
文本标签，由内容决定自身大小。
过昨天的学习算是对HTML有了一点点了解，知道了什么是前端，什么是HTML、前端三大标准、主流浏览器和html的基本结构及常用标签。那么今天继续看看html还有什么新的知识吧。
有常见性就有特殊性，我们使用电脑时经常会用到空格键，在html文档上有时也会使用到空格键等等，那怎么在html上又是以什么形式展示给浏览器解析呢？
浏览器显示结果 | 特殊字符名称 | HTML编辑字符 |
空格 | & n b s p; | |
< | 小于号 | & l t ； |
> | 大于号 | & g t； |
& | 和 | & a m p； |
© | 版权 | & c o p y ； |
作用：在浏览器上清晰美观地显示、展示数据。
表格标签的语法
<table>
<tr>
<td></td>
</tr>
</table>
表格标签：<table></table>，一个table标签中可嵌套多个tr标签。
行标签：<tr></tr>，一个tr标签代表一行。一个行标签中可以嵌套多个单元格标签。
单元格标签：<td></td>，一个td标签代表一个单元格。在单元格中可以填充文本、图片、超链接等等内容。
在html中表格不是由横线划分行和列，而是大大小小的矩形盒子来划分。Table是一个最大的矩形盒子，里面包含tr标签，这个是一个和table长度差不多的矩形盒子，table一行仅容纳一个tr盒子。在tr盒子中还包含有N个td盒子，td盒子就是单元格。
表格示例：
在html文档中编辑表格标签结构时，除了一个标签一个标签地敲之外，可以使用快捷方式快速操作：如五行三列的表格，可以在table标签中输入：“tr*5>td*3”然后敲回车，就将其表格结构迅速展现出来。
<h1>表格示例：</h1>
<table>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三丰</td>
<td>男</td>
<td>27</td>
</tr>
<tr>
<td>李四喜</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>王五通</td>
<td>男</td>
<td>35</td>
</tr>
<tr>
<td>秦六夏</td>
<td>女</td>
<td>30</td>
</tr>
</table>运行界面示例：默认状态下表格是没有线条分界，表格对齐方式左对齐。
表头单元格标签
<th></th>：位于表格的第一行或第一列，可以使其内容加粗居中显示。
语法：
<table>
<th>
<td></td>
</th>
</table>
表头表格代码示例：
<h1>表头表格示例：</h1>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三丰</td>
<td>男</td>
<td>27</td>
</tr>
<tr>
<td>李四喜</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>王五通</td>
<td>男</td>
<td>35</td>
</tr>
<tr>
<td>秦六夏</td>
<td>女</td>
<td>30</td>
</tr>
</table>运行界面示例：
表格结构标签
表格结构标签分为表格头部标签和表格主体标签。类似于head标签和body标签对于html标签之间的关系。
表格头部标签：<thead></thead>。定义表格头部，嵌套在<table></table>中，一般位于第一行。
表格主体标签：<tbody></tbody>。定义表格主体，嵌套在<table></table>中，主要用于显示数据。
代码示例：
<h1>表格结构标签</h1>
<table border="1" width="300px" height="150px" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三丰</td>
<td>男</td>
<td>36</td>
</tr>
<tr>
<td>李四喜</td>
<td>女</td>
<td>30</td>
</tr>
</tbody>
</table>运行界面：
表格属性
虽然表格属性在实际开发过程中不常使用，一般都是通过CSS样式设置，但是还是需要记住这些属性关键词，在css中属性关键词也会用到。
注：这些属性都要写在table标签的开始标签中，多个属性之间需要使用空格分隔。
align：表格的对其方式。
align=“left”：在浏览器中居左显示。也是默认显示。
align=“center”：在浏览器中居中显示。
align=“right”：在浏览器中居右显示。
border：表格是否具有边框。
border=”1”：表格添加边框。
cellpadding：单元格内的元素和td边框的距离。
举个例子，如果表格是一件教室的话，桌子就是单元格，桌子上放的书本就是单元格内的元素，书本边缘和桌子边缘之间产生的空白区域就是cellpadding的值。
cellspacing：单元格和单元格之间的距离。默认是有空隙的，可设置为零，使其空隙清零，成为一条直线。
还是以教室为表格，桌子为单元格。桌子和桌子之间的距离就是cellspacing的值。
width：表格的宽度，属性值可以是像素值也可以是百分比。
height：表格的高度，属性值可以是像素值也可以是百分比。
代码示例：
<h1>表头表格示例：</h1>
<table align="center" border="1" cellpadding="0" cellspacing="0" width="200px" height="300px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三丰</td>
<td>男</td>
<td>27</td>
</tr>
<tr>
<td>李四喜</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>王五通</td>
<td>男</td>
<td>35</td>
</tr>
<tr>
<td>秦六夏</td>
<td>女</td>
<td>30</td>
</tr>
</table>运行界面：
合并单元格
合并单元格是指将两个或两个以上的单元格合并成一个单元格。合并属性一般写在单元格标签的开始标签上。合并代码属性设置后，要将没有写合并的单元格代码的其他合并单元格标签删除掉。
目标单元格：（合并代码存在位置）
跨行合并：最上侧单元格为目标单元格，写合并代码。
跨列合并：最左侧单元格为目标单元格，写合并代码。
合并单元格的方式：
跨行合并：将处于不同行的单元格进行合并
语法：rowspan=“合并单元格个数”
代码示例：
<h1>跨行合并表格：</h1>
<table border="1" width="300px" height="150px" cellspacing="0">
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>运行界面：
跨列合并：将处于不同列的单元格进行合并
语法：colspan=“合并单元格个数”
代码示例：
<h1>跨列合并表格：</h1>
<table border="1" width="300px" height="150px" cellspacing="0">
<tr>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>运行示例：
今天学习的表格内容就到这里了，明天开始学习列表。
*请认真填写需求信息，我们会在24小时内与您取得联系。
