2.4 HTML的制表_XML程序设计（第二版）-QQ阅读女生青春网

上QQ阅读APP看书，第一时间看更新

2.4　HTML的制表

表格不仅能表示数据，而且在网页的页面元素定位、页面版块设计上有很大用处。本节介绍如何设计表格，表格的组成元素，以及如何合理使用表格来达到优化页面结构的目的。表2.3是一个简单表格，如何在网页中实现？

表2.3　电话号码簿

2.4.1　简单表格

在网页上创建表格，要使用＜table＞元素。表格中的行用＜tr＞，行中的列用＜td＞表示。＜tr＞要用在＜table＞内部，而＜td＞要包含在＜tr＞内部。

例2.5　创建一个表格（ch2-5.htm）。

在浏览器下，显示如图2.11所示。

图2.11　简单表格示例

2.4.2　制表元素

1.＜table＞元素

元素table是建立表格的主要元素，格式为：

＜table＞…＜/table＞

＜table＞表示下面是一个表格的内容的开始，＜/table＞表示表格结束。

＜table＞元素比较重要的属性如下：

（1）border和bordercolor属性

border属性用于设置表格边框的宽度，单位是像素。不希望有表格边框时，将该属性设为0。bordercolor属性设置边框的颜色。要为表格边框设置颜色和宽度，可以通过这两个属性的配合来完成。

如某个表格的边框宽度设置为l，颜色为蓝色，代码如下：

＜table border="1" bordercolor="#0000FF”＞

这样的表格显示的效果就是蓝色边框。

（2）cellpadding和cellspacing属性

cellpadding属性设置单元格边框与内容之间的距离。如果未指定，浏览器将默认为l，即1个像素。cellspacing属性设置单元格之间的距离。如果未指定，浏览器默认为1，即1个像素的距离。

（3）width和height属性

这两个属性用于设置表格的高度和宽度。

（4）bgcolor和background属性

这两个属性的含义与＜body＞的含义一样，用于设置表格的背景颜色和背景图形。

另外，＜table＞还有align属性，与上面元素的align一样。

2.＜caption＞元素

＜caption＞元素用于把一行文本（表格标题）置于表格的上方或者下方，格式为：

＜caption align="" valign=""＞表格标题＜/caption＞

align可选择top（放在表格上面居中）、bottom（放在表格下面居中），缺省时标题放在表格上面居中。

valign设置表格的标题是在表格上方还是下方。取top值时，置于上方；取bottom值时，置于下方。没有此属性时，表格标题默认置于表格上方。

3.＜thead＞元素与＜tbody＞元素

一个表格由表头和表体组成（见图2.12），在HMTL中，表头用＜thead＞，表体用＜tbody＞。

图2.12　表格的结构

＜thead＞元素定义表格中一组表头行，一个表格一般含有一个＜thead＞元素，它必须跟在＜caption＞之后。它可以包含若干个＜tr＞元素。

＜tbody＞定义表格的主体，就是表格除表头外的内容。其中放置若干行，若干列。

在实际设计中，通常没有这么多限制。一个表格包含若干个行（＜tr＞），一行中包含若干个列（＜td＞）就可以实现表格。所以，实际应用中往往不使用＜thead＞与＜tbody＞。在一些动态表格生成的应用中，特别是使用循环指令时，＜thead＞与＜tbody＞就是必须的，如在XSL程序。

4.＜tr＞元素

元素＜tr＞用来定义表格中的一行，在table元素中出现的＜tr＞…＜/tr＞，表示表格一行的开始和结束。一个table中有若干个＜tr＞。

该元素常用的属性有align、bgcolor、border、bordercolor、nowrap、valign。其他属性在前面已讨论过，含义基本一样。后面两个第一次出现，下面讨论它们。

nowrap用于禁止浏览器对单元格之中的内容产生换行。

valign用于设置行内单元格内容垂直方向的对齐方式。

①top：单元格内容与行的顶部对齐。

②middle：单元格内容与行的中间对齐。

③bottom：单元格内容与行的底部对齐。

要想观察valign属性的效果，可以有意把一个行的高度设置为较大的值，然后分别使用这些属性值即可。

5.＜td＞元素与＜th＞元素

元素td用于定义表格中某一行上的列，这些列又叫单元格。格式为：

＜td＞数据＜/td＞

在＜td＞＜/td＞中间加入数据，一般有几列就要加入几个数据标记＜td＞＜/td＞。

＜td＞元素的属性基本与＜tr＞相同，需要特别注意colspan和rowspan两个属性，它们通常用来设置单元格的合并，建立复杂表格。

colspan属性：用来设置单元格横向跨越（或合并）的列数，取值为一个整数。该整数须小于表格的列数。

rowspan属性：用来设置单元格纵向跨越（或合并）的行数，取值为一个整数。该整数须小于表格的行数。

＜th＞的用法与＜td＞相同，不同的地方是＜th＞显示的内容是在单元格中粗体居中，所以专门用＜th＞来设计表格的表头。

2.4.3　表格的高级技巧

1.复杂表格

例2.6　根据图2.13的表格设计网页程序（ch2-6.htm）。

这个表格表头是一个复杂表格，前四列是分别对1、2行进行单元格合并，后三列是对第一行的后三列合并单元格实现的。

图2.13　复杂表格

程序如下：

其中：＜head＞中的＜style＞定义了tr元素的字体，这是CSS（Cascading Style Sheet，级联样式表）的定义。＜thead＞内第一个＜tr＞设置了四个单元格的行表，前三个单元格的rowspan="2"表示它们均跨两行；后一个单元格的colspan="3"表示跨三列。这样第一个＜tr＞就设置了一个2行、4列的表行，其中最后一列设置了跨三列的设置。如果没有后一个＜tr＞，行表只能是一个简单的一行行表头。后一个＜tr＞只设置了三个单元格，自然把上一个＜tr＞的第二行的后三列补齐，从而形成如图2.13所示的表头。＜tbody＞部分构成了表格主体。读者把＜thead＞中的第二个＜tr＞去掉，观察显示效果。

2.规划页面

先看一个使用＜body＞的background属性的网页程序。

例2.7　使用图2.14作为背景图形（文件名为“backgrnd2.gif”）设计程序（ch2-7.htm）。

图2.14　作为背景的图形

程序的结果显示在图2.15中。

显然，部分文字与图形交叠，由于背景图案颜色为黑色，因而文字被遮住，无法显示出来。如果使用风景照片做背景，情况会更糟糕。

图2.15　在背景图形下的文本显示

为了解决这个问题，可以用表格把图形与文本内容分别显示在不同的区域，避免文字和图形交叠。

例2.8　用利用表格规划网页（ch2-8.htm）。

因为该图形85％的内容没有图案，可以用表格把图形和文本内容分开，文本内容正好利用背景图形这85％的空白空间。

运行网页，效果如图2.16所示。

程序说明：在原程序的基础上，从原来的第四行开始加入＜table＞元素。表格边框线为0，浏览器上不显示出表格边框线；然后设计两个＜tr＞，第一个用来显示标题，第二个用来显示文本内容。每个＜tr＞划分为两个部分，用＜td＞来实现，第一个＜td＞为空，正好让出显示背景图形图案的空间，从而实现文本与背景的分离，避免图形和文本的重叠。