第8章　表格

表格的用途很广，可以用来显示表格型数据、图片等，也可以用来布局。在前面讲述的布局中常会用到表格，现在的网页更趋向W3C标准方向发展，用DIV+CSS布局可取代表格。但表格不仅可以用来布局，还有其他功能，所以学习表格很重要，虽然不常用于表格布局，但表格的其他用法是不能用DIV+CSS取代的。学完本章后，读者会掌握以下内容：

❑标记table及tr、td用法；

❑跨多行、多列的表格；

❑表格内文字对齐；

❑表格在网页中对齐；

❑表格间隔。

8.1　表格基本语法

表格在网页中可以表现出Word中的表格效果，即在Word中要表现的表格效果可以在网页中显示，但需要使用HTML中的表格标记。表格标记不仅用于表现表格中的效果，还可以用表格来给网页布局，布局中的表格是不需要表格中的边框的，故需要对表格进行设置。

表格是HTML常用的标记，代表在网页中插入一张表格。表格是用table标记对表示的标记对，其语法形式如下。

＜！—设置表格标记—＞

＜table＞＜/table＞

这只是表示一张表格而已，但表格常常是有行和列的，那么，如何在表格内表示行和列呢？这又需要另外两个代码，＜tr＞标记对表示表行，每出现一个＜tr＞＜/tr＞代表表格的一行；＜th＞标记对表示表头，表头是在表格上显示下面列的；＜td＞标记对表示表元，表元就是在表格中显示的每一个方格。代码8.1说明表格的基本语法。

代码8.1　源代码\第8章\表格的基本语法.html

—————————————-文件名：表格的基本语法.html—————————————-

01 ＜html＞

02 ＜head＞

03 ＜title＞表格的基本语法＜/title＞

04 ＜/head＞

05 ＜body＞

06 ＜！—设置表格和边框—＞

07 ＜table border="1"＞

08 ＜！—设置表格中的表头—＞

09 ＜tr＞

10 ＜！—设置表格中的表项—＞

11 ＜th＞表头一＜/th＞

12 ＜th＞表头二＜/th＞

13 ＜/tr＞

14 ＜tr＞

15 ＜td＞表元二＜/td＞

16 ＜td＞表元二＜/td＞

17 ＜/tr＞

18 ＜/table＞

19 ＜/body＞

20 ＜/html＞

【代码解析】代码第7～18行中的＜table＞标签对中包括两个行表示符：代码第9、14行的＜tr＞标签对表示两行。在第一个行标识符中包括了表头符，在第二个行标识符中包括了表元标识符，为了显示出效果，在表格属性中加入了border边框，效果如图8.1所示。

图　8.1　表格的基本语法

注意　在＜table＞中的＜tr＞、＜th＞、＜td＞是常用的，＜th＞可以省略，三者都在＜table＞＜/table＞中，不能交叉。