下载掌阅APP，畅读海量书库
立即打开
上一节是用Dreamweaver软件的可视化操作模式（也叫设计模式）创建表格的，这一节我们来了解表格的HTML代码如何编写。
一个标准的数据表格应该包括标题、表头组、表身组和表尾组，其结构如图7.5所示。
（1）标题说明了这个表格是什么内容的数据。
（2）表头组可以包含多个表头<th></th>用以说明每列数据的共性，比如成绩表中的考试科目。
（3）表身组是学习的重点，它包含了具体的数据，并往往以多行多列的形式表现出来。如成绩表中的分数。
（4）表尾组一般对表格进行注解。虽然显示时表尾组显示在表格的最后一行，但在实际编写代码时应该写在表头组和表身组之间。
表身组包含常规行和列，结构如图7.6所示。
图7.5 数据表格的基本组成部分
图7.6 表身的组成
表身是表格最常用的部分，表身往往可以包含多个表格行，而表格行也常常包含多个单元格。
注意 ：在实际使用中数据表格的要求往往没有这么严格及烦琐，请不要被这些结构吓到了。
在制作一般性的显示表格和布局时，标题、表头组、表尾组都可以不需要编写，甚至<tbody></tbody>都不需要编写。简化过后的表格结构如图7.7所示。
表格的结构组成非常清晰。
（1）每一对<table>和</table>代表一个表格。
（2）每一对<tr>和</tr>代表一行。
（3）每一对<td>和</td>代表一个独立的单元格。
图7.7 简化表格的组成
注意 ：单元格也就是填充数据的地方。
接下来读者动手制作一个简化的表格，以熟悉行与单元格的联系。在D:\web\目录下创建网页文件，命名为table3.htm，编写代码如代码7.1所示。
代码7.1 表格编写：table3.htm
在浏览器地址栏输入http://localhost/table3.htm，浏览效果如图7.8所示。
读者可以看到默认情况下表格没有边框也没有背景色，但是从页面上可以看出表格标签已经把数据排列得整整齐齐，并且每个单元格默认为左对齐。
从代码中可以看到两行的单元格数量是一样的，所以每一行的单元格都是互相对应的。
注意 ：每行对应顺序的单元格组成了表格的一列，这样非常有利于数据的排列。
如果单元格数量不一致也没关系，比如小月月不想透露自己的体重，直接把上面表格代码中的<td>80kg</td>删除，浏览table3.htm效果如图7.9所示。
图7.8 编写表格运行结果
图7.9 修改后的表格
注意 ：“48kg”那个单元格里文字内容再多也不会挤到“小月月”那一列中来，默认情况下列与列之间是严格分开的。
其实表尾组只是放一些注释，平常很少用到。表尾组显示时位于整个表格的最后一行，但是在编写代码时表尾组写在表头组和表身组之间。
在表尾组里同样可以放入多个行以填充更多有关表的注释内容。
而表头组是存放每列共性的关键信息，所以叫表头。表头组中的表头单元格<th></th>会自动修饰其中的表头文字并使其居中和加粗。所以使用表头组时不需要加任何修饰，一眼就可以看出表头文字和表身文字的关系。
表头组和表尾组是为数据表格的完整性服务的，在以后学习CSS样式的时候能够非常方便地设置其特殊样式。
注意 ：在布局中并不需要表头组和表尾组。
通过上面的代码学习读者已经能够了解了表格的全部要素，接下来制作一个完整的数据表格，修改table3.htm如代码7.2所示。
代码7.2 完整的数据表格：table3.htm
笔者在这里做了一个灵活的处理，把芙蓉姐姐的资料换成了纵向的表头<th>，这就是一个典型的二维数据表格。在浏览器地址栏输入http://localhost/table3.htm，浏览效果如图7.10所示。
图7.10 表格编写
至此，读者已经了解了表格的完整结构。接下来学习如何改变表格的外观，使表格更加好看。