统计表格 - 网络统计学

统计表是由纵横交叉线条所绘制的表格，它是一种常用的数据展示形式。统计表用数量把研究对象之间的差别显著地表示出来，便于人们分析和研究问题。

一、统计表的含义及设计要求

统计表把大量的统计数字资料，按一定顺序和格式列在表上就形成了统计表。包括调查表、汇总表、计算表以及各种各样容纳资料的统计表。

常见的统计表结构一般包括四个主要部分：

• 总标题
• 横行标题
• 纵栏标题
• 数字资料

如下表所示，

从统计表的内容看，包括主词和宾词两部分，主词是统计表所要说明的总体及其主要分组情况，通常列在横行标题的位置，所以该栏也叫主栏。宾词用以说明主词各组的其他标志或综合特征的具体表现，通常列在纵标题的位置，所以该栏也叫宾栏。但有时为了编制和阅读方便，也可以互换。

在编制统计表时应注意遵循下列几项规则：

• I、统计表的各种标题应简明、确切地表达其内容，特别是总标题，应十分简要地概括出统计表的基本内容和表中资料所属的时间地点。
• II、表中主栏各行和宾栏各列，一般是按先局部后整体的原则排列，即排列出项目后再列总计，在没有必要列出所有项目时，应先列总计后列出其中部分重要项目。
• III、如栏次较多，通常要加以编号。主栏和计量单位栏用(甲)、(乙)等文字标明，宾栏常用⑴⑵⑶等数字或变量字母来标明。表中有关栏次如有计算上的钩稽关系可同时标明，如⑸=⑴/⑶或c=b+a等。
• IV、表中数字应对准位数，填写整齐。当数字为0或不足单位起点时，应写上0；当缺乏某项数字时，用“……”表示；无法计算或没有数字时用“－”表示。
• V、统计表中必须注明计量单位。若横行有不同的计量单位，可专设计量单位一栏，纵列的计量单位，可写在指标名称下(后)面，如果各纵栏的计量单位一样，可以将它标在表的右上方。
• VI、统计表的表式，通常是左右开口的，即左右两端不画纵线封闭。
• VII、一般应在统计表下方注明表中某些资料的来源或对某些数据的计算方法、计算口径作出说明。

二、用HTML的表格标签（table）制作统计表

HTML（HyperText Markup Language），超文本标记语言，是为“网页创建和其他人可在网页浏览器中看到的信息”设计的一种标记语言。网页的本质就是超级文本标记语言，HTML透过标记式的指令(Tag，标签)，将影像、声音、图片、文字、动画、影视和表格等内容显示出来，可以创造出功能强大的网页。

HTML的表格标签（table）可以描述和显示各种统计表格，并且可以进行复杂的统计分析和计算。本教程中选择超文本标记语言的表格标签处理统计表格。

1、HTML表格文本标记

I、定义3行2列HTML表格文档代码如下，

<table border=1 cellspacing=0 cellpadding=5 width="50%">
    <tr><th>姓名</th><th>民族</th></tr>
    <tr><td>张三</td><td>汉族</td></tr>
    <tr><td>李四</td><td>回族</td></tr>
</table>

显示效果如下，

II、定义3行3列HTML表格文档代码如下，

<table border=1 cellspacing=0 cellpadding=5 width="60%">
    <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>

显示效果如下，

III、定义带标题的HTML表格文档代码如下，

<table border=1 width="60%">
    <caption><i>这是我的标题</i></caption>
    <tr><td>100</td><td>200</td><td>300</td></tr>
    <tr><td>400</td><td>500</td><td>600</td></tr>
</table>

显示效果，

IV、定义加宽边框带标题的HTML表格文档代码如下，

<table border=5>
    <caption>我的标题</caption>
    <tr>
    		<td>100</td><td>200</td><td>300</td>
    </tr>
    <tr>
    		<td>400</td><td>500</td><td>600</td>
    </tr>
</table>

显示效果，

2、HTML表格基本框架

• 表格标签：<table> ... </table>
• 行标签：<tr> ... </tr>
• 列标签：<td> ... </td>
• 嵌套规则：表格标签嵌套行标签，行标签嵌套列标签。任何标签必须成对出现。

3、HTML表格修饰

• 标题标签：<caption> ... </caption>，标题标签应紧随表格开始标签。
• 标题行标签：<th> ... </th>，表格第一行为标题行，将列标签<td> ... </td>改为<th> ... ，该行文字变为加粗黑体显示。

4、表格属性

• border：表格边框宽度，取值为正整数，数值越大表格4边框越宽。
• width：表格宽度。有相对和绝对值两种表示方法。“width=100%”- 取相对值，表示表格占页面宽度的100%；“width=300px”- 取绝对值，表示表格宽度为300个像素单位。
• cellpadding：单元格边距，控制表格数据和边框间距，取值为正整数，数值越大表格内数据和边框间空间越大。
• cellspacing：单元格间距，取值为正整数，数值越大表格各单元格之间空白越大。取值为0时单元格间无空白，表格线为实线。

5、CSS表格样式

定义带CSS样式的HTML表格文档如下，

<table border=1 cellspacing=0 cellpadding=5 
style="width:100%; color:#ff6666; text-align:center;">
    <tr style="background-color:#aaaaff;">
    		<th>姓名</th><th>民族</th><th>籍贯</th>
    </tr>
    <tr>
    		<td>张三</td><td>汉族</td><td>长春</td>
    </tr>
    <tr>
    		<td>李四</td><td>回族</td><td>大连</td>
    </tr>
</table>

显示效果，

6、开口式统计表

开口式统计表HTML代码：

<table border=0 cellspacing=0 cellpadding=5 width="100%"
style="border-top:2px solid #000000; border-bottom:2px solid #000000;">
    <tr>
        <th style="border-right:1px solid #000000;">产量</th>
        <th style="border-right:1px solid #000000;">人数</th>
        <th>累计人数</th>
    </tr>
    <tr>
        <td style="border-top:1px solid #000000; border-right:1px solid #000000;">4</td>
        <td style="border-top:1px solid #000000; border-right:1px solid #000000;">8</td>
        <td style="border-top:1px solid #000000;">8</td>
    </tr>
    <tr>
        <td style="border-right:1px solid #000000;">5</td>
        <td style="border-right:1px solid #000000;">22</td>
        <td>30</td>
    </tr>
    <tr>
        <td style="border-right:1px solid #000000;">6</td>
        <td style="border-right:1px solid #000000;">42</td>
        <td>72</td>
    </tr>
    <tr>
        <td style="border-right:1px solid #000000;">7</td>
        <td style="border-right:1px solid #000000;">38</td>
        <td>110</td>
    </tr>
    <tr>
        <td style="border-right:1px solid #000000;">8</td>
        <td style="border-right:1px solid #000000;">17</td>
        <td>127</td></tr>
    <tr>
        <td style="border-right:1px solid #000000;">9</td>
        <td style="border-right:1px solid #000000;">3</td>
        <td>130</td>
    </tr>
    <tr>
        <td style="border-top:1px solid #000000; border-right:1px solid #000000;">合计</td>
        <td style="border-top:1px solid #000000; border-right:1px solid #000000;">130</td>
        <td style="border-top:1px solid #000000;">***</td>
		</tr>
</table>

显示效果，

7、表格单元格跨行、列设计

表格单元格跨行、列代码：

<table border=0 cellspacing=0 cellpadding=5 width="100%"
style="border-top:2px solid #000000; border-bottom:2px solid #000000;">
    <tr>
        <th rowspan=2 style="border-right:1px solid #000000;">产量</th>
        <th colspan=2>人数指标</th>
    </tr>
    <tr>
        <th style="border-right:1px solid #000000; border-top:1px solid #000000;">人数</th>
        <th style="border-top:1px solid #000000;">累计人数</th>
    </tr>
    <tr>
        <td style="border-top:1px solid #000000; border-right:1px solid #000000;">4</td>
        <td style="border-top:1px solid #000000; border-right:1px solid #000000;">8</td>
        <td style="border-top:1px solid #000000;">8</td>
    </tr>
    <tr>
        <td style="border-right:1px solid #000000;">5</td>
        <td style="border-right:1px solid #000000;">22</td>
        <td>30</td>
    </tr>
    <tr>
        <td style="border-right:1px solid #000000;">6</td>
        <td style="border-right:1px solid #000000;">42</td>
        <td>72</td>
    </tr>
    <tr>
        <td style="border-right:1px solid #000000;">7</td>
        <td style="border-right:1px solid #000000;">38</td>
        <td>110</td>
    </tr>
    <tr>
        <td style="border-right:1px solid #000000;">8</td>
        <td style="border-right:1px solid #000000;">17</td>
        <td>127</td>
    </tr>
    <tr>
        <td style="border-right:1px solid #000000;">9</td>
        <td style="border-right:1px solid #000000;">3</td>
        <td>130</td>
    </tr>
    <tr>
        <td style="border-top:1px solid #000000; border-right:1px solid #000000;">合计</td>
        <td style="border-top:1px solid #000000; border-right:1px solid #000000;">130</td>
        <td style="border-top:1px solid #000000;">***</td>
		</tr>
</table>

显示效果，

HTML统计表格设计要点

• 表格边框属性："border = 0"，即先将表格设置为无边框。
• 边框样式："border-top\bottom\left\right:1px solid #000000;"，用于table和td标签，分别设置表格上、下粗横线和单元格横、竖线。
• 单元格跨列：如果某个单元格设置属性"colspan = 2"，表示该单元格跨两列。
• 单元格跨行：如果某个单元格设置属性"rowspan = 2"，表示该单元格跨两行。

本文HTML表格代码和CSS样式在网页中的运用参见：

• HTML文档 - 网络统计学编程
• CSS层叠样式表 - 网络统计学编程

我们知道，运用表格形式处理统计数据常用到EXCEL电子表格。如果能像EXCEL那样统计汇总HTML表格数据，需要通过Javascript编程来实现。Javascript脚本代码不但能处理HTML表格中数据的数据，还能动态生成HTML表格结构及CSS修饰代码。