HTML报表

在html中绘图报表应用table标识

  • tr表明行
  • td表明列
  • th表明表头,表头一般用于列姓名。

下面是1个列子。

<html>
    <head>
        <title>Table in html</title>
    </head>
    <body>
        <p>水平表头</p>
        <table border="1">
         <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
         </tr>
         <tr>
            <td>zdd</td>
            <td>30</td>
            <td>male</td>
         </tr>
         </table>
         <p>竖直表头</p>
         <table border="1">
         <tr>
            <th>Name</th>
            <td>autumn</td>
         </tr>
         <tr>
            <th>Age</th>
            <td>30</td>
         </tr>
         <tr>
            <th>Gender</th>
            <td>famale</td>
         </tr>
        </table>
    </body>
</html>

实际效果图

水平表头

Name
Age
Gender
zdd
30
male

竖直表头

Name
autumn
Age
30
Gender
famale

无垠框报表

假如在界定报表时,沒有特定border特性,那末报表就沒有边框

<table>
    <tr><td>zdd</td><td>30</td></tr>
    <tr><td>ddz</td><td>27</td></tr>
</table>

实际效果图

zdd
30
ddz
27

空模块格

假如沒有为模块格特定內容,那末模块格将是空的,且沒有边框,以下,这样很不美观大方。

zdd
30
 
27

假如处理呢?方式是给空的模块格再加空格,因为html忽视过剩的空格,因此大家不可以立即加空格,而要加 &nbsp; nbsp表明空格。

<table border="1">
    <tr><td>zdd</td><td>30</td></tr>
    <tr><td>&nbsp;</td>20</tr>
</table>

实际效果图

zdd
30
 
20

带题目的报表

应用caption特性,可是仿佛题目中不可以有时间格,不然显示信息的情况下会换行!

<table border="1">
<caption>我的报表</caption>
    <tr><td>zdd</td><td>30</td></tr>
    <tr><td>&nbsp;</td><td>20</td></tr>
</table>

我的报表

zdd
30
 
20

转账或跨列的报表

用colspan转账

<table border="1">
<tr><th>名字</th><th colspan="2">电話</th></tr>
<tr><td>Bill Gates</td><td>555 77 854</td><td>555 77 855</td></tr>
</table>

名字
电話
Bill Gates
555 77 854
555 77 855

用rowspan跨列

<table border="1">
<tr><th>名字</th><td>Bill Gates</td></tr>
<tr><th rowspan="2">电話</th><td>555 77 854</td></tr>
<tr><td>555 77 855</td></tr>
</table>

嵌套循环的报表

table标识是能够嵌套循环的,也便是说在tr或td标识中添加table标识便可建立报表中的报表。