3.5 表格标签小案例：制作一张财务季度报表
虽然列表看上去功能已经很强大了，但是为了更加清晰地展示内容，有时还需要用到表格，它可以用于一些数据和文字内容的表格化呈现。因此，本节我们来领略一下表格标签的基本用法。
3.5.1 表格的使用
任务描述：制作一张公司季度财务报表，效果如图3.8所示
图3.8
事前分析：
你可能觉得表格还不简单，不就是行和列。你说得对，我们就是要用行标签和列标签来制作表格。但有时关于单元格的合并，可不能像在Excel中那样拖动点击合并就能完成，HTML还需要做一些简单的计算。
操作步骤：在test文件夹下，打开Notepad++，新建03_table.html，在＜body＞元素内部输入如图3.9所示的代码。
图3.9
思考时间
请先找找又学到了什么新的标记，它们的含义是什么？请尝试写出来。
我们来看一下图3.9中每一行代码的具体含义。
代码行8：表格标签是＜table＞，给它添加一些属性，align=“center”，让整个表格位于页面居中对齐；width=“600px”是宽度为600像素；border=“1”指边框宽度为1像素，cellspacing=“0”表示相邻单元格之间的间距为零，即没有间距。
代码行9：＜!-- --＞是HTML的注释符，它里面的内容不会在网页中最终显示，只是方便程序员后续审查代码用的。
代码行10：这是一张5×4的表格，即5行4列，首先输入5行＜tr＞＜/tr＞，在每一行内部输入4个单元格＜td＞＜/td＞，即代表列。
代码行11-13：表格的第一行，修改＜td＞为＜th＞，让这一行的内容成为表头，即table head的缩写，效果是文字加粗显示。由于第一行的“公司季度财务表”需要横跨4列，所以用属性colspan=“4”，并删除其余3行＜td＞。
代码行14-19：表格的第二行，修改＜td＞为＜th＞，让第一个单元格为表头，效果是文字加粗。由于第一个单元格需要跨4行，因此添加属性rowspan=“4”。
代码行20-24：表格的第三行，原来是4列，由于第一列被第二行的表头占据，因此，删除第一个＜td＞＜/td＞，其余三个单元格输入内容。
代码行25-29：表格的第四行，同第三行，不再赘述。
代码行30-33：表格的第五行，原来是4列，由于第一列被第二行的表头占据，因此，删除第一个＜td＞＜/td＞。又由于第3个单元格横跨2列，所以删除第一个＜td＞＜/td＞，并添加属性colspan=“2”。
代码行34：＜table＞标签是双标记，千万记得还有最后一行结束标记＜/table＞。
我们来总结一下表格的实现顺序。
（1）先准备好＜table＞＜/table＞元素，添加属性。然后在它的内部添加多行＜tr＞和多列＜td＞。由于是5行4列，因此就是5个＜tr＞＜/tr＞，在每一行内部，就是4个＜td＞＜/td＞。
（2）接着就开始根据需要合并或删除单元格，并随时在网页中看效果，随时调整。其中，跨列的属性是colspan，跨行的属性是rowspan。
请按照以上说明，给自己15分钟再做一遍这个表格的网页。
3.5.2 表格跨行跨列的秘诀
表格中的跨行和跨列的用法是很常见的，这里再告诉你一个好用的口诀。
（1）跨n列（colspan=“n”），就在自己所在行的内部删除其余n-1列＜td＞＜/td＞元素；
（2）跨n行（rows=“n”），就在接下来的n-1行删除对应的单元格＜td＞＜/td＞元素，比如由于第二行的第一个单元格要跨4行，那么在第三、四、五行就应该删除第一个＜td＞＜/td＞。
单元格的合并还是不对？
如果你的表格合并还是出了问题，请这样做：以单元格的跨行为例：
首先，确定目标表格需要合并是n行，rowspan的值应该是n-1；
其次，合并之后多余的n-1行＜tr＞一定要删除。如果都做到了，问题应该就能得到解决。类似地，单元格的跨列是依靠colspan并删除＜td＞。