使用HTML 4.0制作表格

现在，全世界的人都把自己标榜为“网页设计师”，之所以这样讲是因为他们掌握了你所陌生的工具——HTML(又称为“超文本标记语言”)。学习HTML的一种方法就是使用浏览器“查看源文件”的功能来查看所访问的网页的源文件。通过在源代码中查找网页中出现的单词或短语，你将会获取许多精彩设计背后的技巧。
　　 为什么使用表格?
　　 表格是一种在网页上组织和显示信息的强大的工具。通过使用表格，你可以用简洁明了的格式显示详细数据、排列表单元素、放置图片并显示链接列表。你可以使用层叠样式表(CSS)来对照表格，该工具提供了元素和图片的绝对位置。CSS在排版上提供了表格所不具有的一些功能。但是只要你能够熟练的使用表格，你将会发现表格使网页的信息组织变的非常轻松。同时，CSS提供的样式属性使你能够更为快捷的创建漂亮的表格。
　　 首先，我们先要向大家讲述一些表格基础，以及HTML 4.0的表格功能是如何与样式表一同工作的。最后，我们会告诉一些在网页中应用表格的小窍门。
　　 创建表格
　　 在网页中我们使用＜TABLE＞＜/TABLE＞标签来创建表格元素。在一个表格中，你可以使用＜TR＞＜/TR＞标签来创建
行，或使用＜TD＞＜/TD＞来创建单元格。让我们先来看一下表格A中显示的基于Web的表格。列表A中列出了图A中表格的源代码。
　　 我们讲告诉你如何使用HTML 来创建表格这一格式化元素。
　　 以下是样例表格的HTML源代码。
　　 ＜HTML＞
　　 ＜HEAD＞＜TITLE＞Using the CSS position attributes＜/TITLE＞
　　 ＜STYLE＞
　　 THEAD {background-color: yellow}
　　 TBODY {background-color: white}
　　 TFOOT {background-color: pink}
　　 COL {background-color: blue}
　　 TABLE {width:75%;border-style:groove;
　　 border-width:8;padding:3}
　　 ＜/STYLE＞
　　 ＜/HEAD＞
　　 ＜BODY＞
　　 ＜TABLE cols = 3 rules = groups cellspacing = 3 ＞
　　 ＜CAPTION align = top＞ Temp and Rainfall in Selected US cities.* ＜/CAPTION＞
　　 ＜CAPTION align = bottom＞ *Data courtesy of WorldClimate at www.worldclimate.com ＜/CAPTION＞
　　 ＜COLGROUP span = 3 style= "text-align:center"＞
　　 ＜COL style = "text-align:left"＞
　　 ＜COL width = "100*"＞
　　 ＜COL width = "100*"＞
　　 ＜THEAD＞
　　 ＜TH＞ City ＜/TH＞
　　 ＜TH＞ Average Temperature ＜/TH＞
　　 ＜TH＞ Average ＜BR＞ Rainfall ＜/TH＞＜/THEAD＞
　　 ＜TFOOT＞＜/TFOOT＞
　　 ＜TBODY＞
　　 ＜TR＞
　　 ＜TD＞ New York City ＜/TD＞
　　 ＜TD＞ 55.6 degrees＜/TD＞
　　 ＜TD＞ 48.8 inches ＜/TD＞ ＜/TR＞
　　 ＜TR＞
　　 ＜TD＞ Anchorage ＜/TD＞
　　 ＜TD＞ 35.4 degrees＜/TD＞
　　 ＜TD＞ 18.2 inches ＜/TD＞ ＜/TR＞
　　 ＜/TBODY＞
　　 ＜TFOOT＞
　　 ＜TD＞ Average for Northern Cities ＜/TD＞
　　 ＜TD＞ 45.5 ＜/TD＞
　　 ＜TD＞ 33.5 ＜/TD＞ ＜/TFOOT＞
　　 ＜TBODY＞
　　 ＜TR＞
　　 ＜TD ＞ Miami ＜/TD＞
　　 ＜TD＞ 75.4 degrees＜/TD＞
　　 ＜TD＞ 56.4 inches ＜/TD＞ ＜/TR＞
　　 ＜TR＞
　　 ＜TD ＞ Emerald City＜/TD＞
　　 ＜TD colspan = 2＞ No data available＜/TD＞ ＜/TR＞
　　 ＜/TBODY＞
　　 ＜TFOOT＞
　　 ＜TD＞ Average for Southern Cities ＜/TD＞
　　 ＜TD＞ 75.4 ＜/TD＞
　　 ＜TD＞ 56.4 ＜/TD＞ ＜/TFOOT＞
　　 ＜THEAD style="color:blue;background-color:white"＞
　　 ＜TR＞ ＜TD rowspan = 2 ＞ Weather Extremes ＜/TD＞
　　 ＜TD＞ High: 75.4 degrees＜/TD＞
　　 ＜TD＞ High: 56.4 inches ＜/TD＞ ＜/TR＞
　　 ＜TR＞ ＜TD ＞ Low: 35.4 degrees＜/TD＞
　　 ＜TD＞ Low: 18.2 inches ＜/TD＞ ＜/TR＞ ＜/THEAD＞
　　 ＜/BODY＞
　　 ＜/HTML＞
　　 代码是如何工作的
　 要了解如何制作表格，首先需要了解＜TABLE＞标签。
　　 ＜TABLE cols = 3 rules = groups cellspacing = 3＞
　　 以上命令创建的表格具有三列，每行的单元格跨度为3个像素并且只能沿行画图。表格的其他样式决定于网页的样式
表，该部分在＜STYLE＞＜/STYLE＞标签之间插入。
　　 TABLE {width:75%;border-style:groove; border-width:8;padding:3}
　　 样式表定义了表格的高度和宽度，表格边界的样式和宽度以及单元格的垂直跨度。两个CAPTION元素在表格的上方和下方创建了标题。跳过COLGROUP和THEAD元素(我们稍后会讲到)，找到TR元素。每个＜TR＞标签都会创建一行，在每一行?lt;TD＞标签都会创建一个单元格。请注意Emerald City单元格的气候数据使用了colspan = 2，从而占据了两列的宽度。并且Average Rainfall单元格使用rowspan = 2特征跨越了两行。
表格分组
　　 图A中的表格还应用了HTML4.0最新的一些表格特征，特别是新的列和行分组功能。你可以使用COLGROUP元素将样式应用到一组列中，这样便无须重复的设置单个列。在范例中，我们在＜COLGROUP＞标签中定义了span = 3，这标明我们将使用COLGROUP将样式应用到3列中。COL元素使我们能够为列分组中的单个列应用样式信息。在范例中，我们使用COLGROUP使除第一列外，所有列中的文字都居中显示，且应用方向为从右至左。我们还规定了第2列和第3列的宽度。这些值后的*号标
明我们希望列的宽度尽可能接近120像素。
　　 我们还可以在一组列中应用样式特征。可以使用THEAD元素对组成表格标题的行进行分组，可以使用TFOOT元素对组成页脚的行进行分组，同时可以使用TBODY对表格正文的行进行分组。正如你在样式表中所看到的，我们使用了以上几种元素对每一组行设置样式。你可能还注意到了我们在＜/THEAD＞标签后创建的空的TFOOT元素。缺省情况下，第一个TFOOT元素将特定的行放置到表格的下方。但是我们希望将第一个TFOOT行放置到第一个TBODY后。为了完成以上目标，我们创建了一
个空的TFOOT元素，从而下一个TFOOT元素可以
　　 ＜TFOOT ＞ ＜TD＞ Average for Northern Cities ＜/TD＞
　　 ＜TD＞ 45.5 ＜/TD＞
　　 ＜TD＞ 33.5 ＜/TD＞ ＜/TFOOT＞
　　 在正确的位置显示。
　　 网页排版技巧
　　 在了解了表格设计的一些基本知识后，以下将讲述在网页排版中使用的一些技巧。
　　 1.在表单中排列元素
　　 当你在表单中使用表格来排列元素时，试着在一行的第一列中放置标志，居右放置，同时在同一行的第二列放置文本框，居左放置，这样标志就能够紧挨文本框显示了。表B中显示了这部分的源代码：
　　 表B: 在表单中排列元素的源代码。
　　 ＜HTML＞
　　 ＜HEAD＞
　　 ＜TITLE＞New Page＜/TITLE＞
　　 ＜STYLE＞
　　 TD.right {text-align:right}
　　 TD.left {text-align:left}
　　 ＜/STYLE＞
　　 ＜BODY＞
　　 ＜TABLE cols= 2 cellspacing = 2＞
　　 ＜TR＞
　　 ＜TD class = right＞ First name ＜/TD＞
　　 ＜TD class = left＞ ＜input type = text＞＜/TD＞
　　 ＜/TR＞
　　 ＜TR＞
　　 ＜TD class=right＞ Last Name ＜/TD＞
　　 ＜TD class = left＞ ＜input type = text＞＜/TD＞
　　 ＜/TR＞
　　 ＜TR＞
　　 ＜TD class=right＞ Address ＜/TD＞
　　 ＜TD class = left＞ ＜input type = text＞ ＜/TD＞
　　 ＜/TR＞
　　 ＜/TABLE＞
　　 ＜/BODY＞
　　 ＜/HTML＞
　　 2. 创建多列
　　 如果网页上的文字很多，那么可以试着使用多列来分割文字，以使显示效果更好。你所需要做的就是使用TD元素，如表C所示：
　　 表C: 在多列中放置文本的源代码。
　　 ＜HTML＞
　　 ＜HEAD＞
　　 ＜TITLE＞New Page＜/TITLE＞
　　 ＜STYLE＞
　　 TD {vertical-align:top}
　　 ＜/STYLE＞
　　 ＜BODY＞
　　 ＜TABLE cols = 3 cellspacing = 2＞
　　 ＜COLGROUP span = 3＞
　　 ＜COL width = "30%"＞
　　 ＜COL width = "30%"＞
　　 ＜COL width = "30%"＞
　　 ＜/COLGROUP＞
　　 ＜TD＞Your text here...＜/TD＞
　　 ＜TD＞Your text here...＜/TD＞
　　 ＜TD＞Your text here...＜/TD＞
　　 ＜/TABLE＞
　　 ＜/BODY＞
　　 ＜/HTML＞
　　 通过使用样式特征vertical-align:top使三列中的文字都居上显示。当然，你也可以单独调整每一列的排列和宽度，以及每列的间隔。