统计表格
HTML（HyperText Markup Language），超文本标记语言，是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。
HTML是一种建立网页文件的语言，透过标记式的指令(Tag，标签)，将影像、声音、图片、文字、动画、影视和表格等内容显示出来。HTML的设计目标是显示数据并集中于数据外观，它的各种标签是预定义的，可以在网页中按规定的形式显示出来。HTML标签的语法规则和统计数据中所述可扩展标记语言（XML）一样，也必须成对嵌套出现。
HTML的表格标签（table）可以描述和显示各种统计表格，并且可以进行复杂的统计分析和计算。本教程中选择超文本标记语言的表格标签处理统计表格。
例如，定义3行2列HTML表格文档如下，
<![CDATA[
<table border=1 cellspacing=0
cellpadding=5 width="100%">
<tr><th>姓名</th><th>民族</th></tr>
<tr><td>张三</td><td>汉族</td></tr>
<tr><td>李四</td><td>回族</td></tr>
</table>
]]>
显示效果，
定义3行3列HTML表格文档如下，
<![CDATA[
<table border=1 cellspacing=0
cellpadding=5 width="100%">
<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>
]]>
显示效果，
定义带标题的HTML表格文档如下，
<![CDATA[
<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>]]>
显示效果，
我的标题
| 100 |
200 |
300 |
| 400 |
500 |
600 |
| 700 |
800 |
900 |
- HTML表格基本框架
- 表格标签：<table> ... </table>
- 行标签：<tr> ... </tr>
- 列标签：<td> ... </td>
- 嵌套规则：表格标签嵌套行标签，行标签嵌套列标签。任何标签必须成对出现。
- HTML表格修饰
- 标题标签：<caption> ... </caption>，标题标签应紧随表格开始标签。
- 标题标签：<th> ... </th>，表格第一行为标题行，将列标签<td> ... </td>改为<th> ... </th>，该行文字变为加粗黑体显示。
- 表格属性：
- border：表格边框宽度，取值为正整数，数值越大表格4边框越宽。
- width：表格宽度。有相对和绝对值两种表示方法。“width=100%”- 取相对值，表示表格占页面宽度的100%；“width=300px”- 取绝对值，表示表格宽度为300个像素单位。
- cellpadding：单元格边距，控制表格数据和边框间距，取值为正整数，数值越大表格内数据和边框间空间越大。
- cellspacing：单元格间距，取值为正整数，数值越大表格各单元格之间空白越大。取值为0时单元格间无空白，表格线为实线。
定义带CSS样式的HTML表格文档如下，
<![CDATA[
<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>
]]>
显示效果，
表格HTML文档中，属性“style="..."”为内联式CSS样式，可用于任何HTML标签。
属性名称和属性值列表
- 字体大小：“font-size:12pt;"，字体大小为12磅，就是小4号字。
- 字体样式：“font-style:oblique;(偏斜体)\italic;(斜体)\normal;(正常)”。
- 文字行高：“line-height:12pt;"，或为像素单位“line-height:20px;"。
- 文字粗细：“font-weight: bold;(粗体)\lighter;(细体)\normal;(正常)”。
- 大小写： “text-transform:capitalize;(首字母大写)\uppercase;(大写)\lowercase;(小写)\none;(无)”。
- 文字修饰：“text-decoration:underline;(下划线)\overline;(上划线)\line-through;(删除线)\blink;(闪烁)”。
- 常用字体：“font-family:Courier New;\Courier;\monospace;\Times New Roman;\Times;\serif;\Arial;\Helvetica;\sans-serif;\Verdana;”。
- 背景颜色：“background-color:#00ffff;”。更多代码颜色参考颜色对照表
- 文字间距：“letter-spacing:20px;”。
- 单词间距：“word-spacing:5px”，适用于英文。
- 文字对齐：“text-align: justify;(两端对齐)\left;(左对齐)\right;(右对齐)\center;(居中)”。
- 文字缩进：“text-indent:20px;”。
- 垂直对齐：“vertical-align: baseline;(基线)\sub;(下标)\super;(下标)\top;\text-top;\middle;\bottom;\text-bottom;”。
- 边框样式：“border-style: dotted;(点线)\dashed;(虚线)\solid;\double;(双线)\groove;(槽线)\ridge;(脊状)\inset;(凹陷)\outset;”。
- 边框宽度：“border-width:2px;”。
- 边框颜色：“border-color:#ff6666;”。
- 边框属性：“border:1px solid #ff6666;(四边宽度1像素、实线、颜色代码)\border-left:1px solid #000000;(左边线)\border-right:1px solid #000000;(右边线)\border-top:1px solid #000000;(上边线)\border-bottom:1px solid #000000;(下边线)”。
- 列表属性：“list-style-type:disc;(圆点)\circle;(圆圈)\square;(方块)\decimal;(数字)\lower-roman;(小罗码数字)\upper-roman;\lower-alpha;\upper-alpha;”。
例如，
开口式统计表HTML代码
<![CDATA[
<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>
]]>
显示效果，
| 产量 | 人数 | 累计人数 |
|---|
| 4 | 8 | 8 |
| 5 | 22 | 30 |
| 6 | 42 | 72 |
| 7 | 38 | 110 |
| 8 | 17 | 127 |
| 9 | 3 | 130 |
| 合计 | 130 | *** |
例如，
表格单元格跨行、列代码
<![CDATA[
<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>
]]>
显示效果，
| 产量 |
人数指标 |
| 人数 |
累计人数 |
| 4 | 8 | 8 |
| 5 | 22 | 30 |
| 6 | 42 | 72 |
| 7 | 38 | 110 |
| 8 | 17 | 127 |
| 9 | 3 | 130 |
| 合计 | 130 | *** |
- HTML统计表格设计要点
- 表格边框属性：“border = 0”，即先将表格设置为无边框。
- 边框样式：“border-top\bottom\left\right:1px solid #000000;”，用于“table”和“td”标签，分布设置表格上、下粗横线和单元格横、竖线。
- 单元格跨列：如果某个单元格设置属性“colspan = 2”，表示该单元格跨两列。
- 单元格跨行：如果某个单元格设置属性“rowspan = 2”，表示该单元格跨两行。
- 在线编辑：在下面文本框中修改或输入HTML表格文档，
结果显示如下:
我的标题
| 100 |
200 |
300 |
| 400 |
500 |
600 |
| 700 |
800 |
900 |