拼接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、表格的跨行扩列 <td> <th>
# 跨列
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、表格与文字间的距离 <td> <th>
# 与表格下边的距离
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、选择框
<input type=”checkbox” disabled=”disabled” value=”放弃” checked=”checked”>
扩展:
checked="checked" :默认选中
disabled="disabled" :禁止勾选
由于生成的HTML报告时,数据已经有了,不允许用户再次修改。