Mysql-Procedure-HTML

拼接HTML 报告表格时需要知道的CSS样式以及HTML标签

不求面面俱到,只求够用即可。

存储过程拼接HTML表格报告案例如下:

SQL参考1下载:下载
SQL参考1下载:下载
SQL参考1下载:下载

在拼接时尽量使用div去布局,在拼接复杂表格的时候将复杂部分单独分割开来拼接。
1、图片背景

# 将图片拉伸平铺满容器
background-size: cover;
# 背景图片不重复
background-repeat: no-repeat;

2、表格或者div边框

# 上边框
border-top: 1px solid #220808;
# 下边框
border-bottom: 0px;
# 右边框
border-right: 1px solid #220808;
# 左边框
border-left: 0px;
扩展:
solid:为实线
dashed:为虚线
扩展:
若表格的边框没有显示,标签中加入如下信息
<table border="1" cellpadding="0" cellspacing="0">

3、表格的跨行扩列 &#60;td&#62; &#60;th&#62;

# 跨列
colspan:"2";
# 跨行
rowspan: "2";

3、用于解决表格种的空隙 cellpadding=”0” cellspacing=”0”

扩展:

在HTML语言中cellpadding 用于<table>,cellpadding=10的意思就是在原有小格的基础上沿四边内部各加上10 个像素点子宽度,也就是把原来的小格变大,但原来写的内容占的大小范围不变。
在HTML语言中cellspacing也用于<table>,cellspacing=10的意思就是在table表格里每个小格之间,上下左右四边外部各加上10 个像素点子宽度,也就是把小格与小格之间距离变大,但每个小格占的大小范围不变。
或者使用CSS    border-collapse:collapse;

4、文字对其方式

# 文字水平对齐方式
text-align: center;
# 文字垂直对齐方式
vertical-align: text-top;
# 添加下划线
text-decoration: underline;
# 字体的粗细
font-weight: 550;
# 字号大小
font-size: 20px;
# 文字的背景色
background-color: yellow;

5、表格与文字间的距离 &#60;td&#62; &#60;th&#62;

# 与表格下边的距离
padding-bottom: 10px;
# 与表格上边的距离
padding-top: 10px;
# 与表格右边的距离
padding-right: 10px;
# 与表格左边的距离
padding-left: 10px;

6、表格或者容器与其他容器间的距离

margin-bottom: 10px;
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;

7、选择框
&#60;input type=”checkbox” disabled=”disabled” value=”放弃” checked=”checked”&#62;
扩展:

checked="checked"  :默认选中
disabled="disabled" :禁止勾选
由于生成的HTML报告时,数据已经有了,不允许用户再次修改。
Contents
  1. 1. 拼接HTML 报告表格时需要知道的CSS样式以及HTML标签
|