可视化类型页面制作心得----table
table 表格类型的数据
要写可视化很少会少得了表格的参与,第一次写云子可视化的时候就直接用div堆了一个表格出来,效果不尽人意 …
一.表格元素总汇
表格的基本构成最少需要三个元素:<table>、<tr>、<td>
,其他的一些作为可选辅 助存在。
也是最常用的三个元素
元素名称 | 说明 |
---|---|
table | 表示表格 |
thead | 表示标题行 |
tbody | 表示表格主体 |
tfoot | 表示表脚 |
tr | 表示一行单元格 |
th | 表示标题行单元格 |
td | 表示单元格 |
col | 表示一列 |
colgroup | 表示一组列 |
caption | 表示表格标题 |
二.构建表格解析
1. <table><tr><td>
构建基础表格
<table>
<tr> <td>张三</td> <td>男</td> td>未婚</td> </tr>
<tr> <td>李四</td> <td>女</td> td>已婚</td> </tr>
</table>
解释:<table>
元素表示一个表格的声明,<tr>
元素表示表格的一行,<td>
元素表示一个单元格。默认情况下表格是没有边框的,所以,在<table>
元素增加一个 border 属性, 设置为 1 即可显示边框。
2. <th>
为表格添加单元格
<table border=1 style="width:300px;">
<tr> <th>姓名</th> <th>性别</th> <th>婚姻</th> </tr>
<tr> <td>张三</td> <td>男</td> <td>未婚</td> </tr>
<tr> <td>李四</td> <td>女</td> <td>已婚</td> </tr>
</table>
解释:<th>
元素主要是添加标题行的单元格,实际作用就是将内部文字居中且加粗。这里使用了一个通用属性 style,主要用于 CSS 样式设置,以后会涉及到。```均属于单元格,包含两个合并属性:colspan、rowspan 等。
3. <thead>
添加表头
<table border=1 style="width:300px;">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>婚姻</th>
</tr>
</thead>
<tr> <td>张三</td> <td>男</td> <td>未婚</td> </tr>
<tr> <td>李四</td> <td>女</td> <td>已婚</td> </tr>
</table>
解释:<thead>
元素就是限制和规范了表格的表头部分。尤其是以后动态生成表头,它 的位置是不固定的,使用此元素可以限定在开头位置。
4.<tfoot>
添加表脚
5.<tbody>
添加表主体
6. <caption>
1. 添加表格标题
这三条和第3点大致相同
<caption>
这是一个人物表</caption>
解释:<caption>
元素给表格添加一个标题。
以上就是基础
简易制作一个表格
制作这个表格,先看清行列数,和所占的空间是否固定
总体来说需要以下操作
<table>
<tr> <td></td> <td></td> <td></td> <td></td> </tr>
<tr> <td></td> <td></td> <td></td> <td></td> </tr>
<tr> <td></td> <td></td> <td></td> <td></td> </tr>
<tr> <td></td> <td></td> <td></td> <td></td> </tr>
</table>
如上的操作
此时加入数据的得到的效果不怎么理想
列宽不规则,相对比较拥挤。
我们需要将列宽行高调整好,如果表格的外部div宽度固定的话还需要加入滚动功能,但有滚动条又影响观看体验。接下来我们一步步进行。
1.设置列宽行高
行高可以简单的在 <tr>
中加入height属性
列宽可以直接在<td>
中加入 width属性
由于table的内定属性 表格中的元素会 自动上下居中,文字靠左。如果需要居中的话,可以直接在 <table>
中加入 text-align: center;
2.滚动条
当存在滚动条时,我经常把表格的表头另外写在 <table></table>
外,用l<li></li>
或者其他方式写出来(因为后面要用滚动条时,会将表头也滚上去,看不见了,不符合要求)
如图把标题另外写出去渲染样式
如上 .report-list
是最外层盒子,要求表格内容写在该盒子内部,同时实现滚动功能和滚动条隐藏
此时我们在该盒子下创建 一个盒子 .table-container
用来形成滚动条,并在该盒子下 写入table
具体实现如下:
div.report-list — style: overflow: hidden;
div.table-contaner — style: overflow-y: scroll;
<table></table>
解释:
- 在最外层盒子加入 overflow: hidden 属性,让超出该盒子的内容隐藏
2.在table的上层目录加入 overflow-y: scroll; 属性,形成竖向或横向的滚动条
3.要使 div.report-list
和 div.table-contaner
和 table
的大小相同。
4.再调整 div.table-contaner
的大小(增加一个滚动条的宽度,),让滚动条超出上层盒子之外,使之隐藏,还能使用(滚动条会占用盒子的大小)
这样加入其他字体大小,背景的属性,就差不多做好了