使用HTML 4.0制作表格(下)

使用HTML 4.0制作表格(上)
  (01-7-16 74)
 

现在，全世界的人都把自己标榜为“网页设计师”，之所以这样讲是因为他们掌握了你所陌生的工具——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%;height:80;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%;height:80;border-style:groove; border-width:8;padding:3} 　　样式表定义了表格的高度和宽度，表格边界的样式和宽度以及单元格的垂直跨度。两个CAPTION元素在表格的上方和下 方创建了标题。跳过COLGROUP和THEAD元素(我们稍后会讲到)，找到TR元素。每个＜TR＞标签都会创建一行，在每一行? lt;TD＞标签都会创建一个单元格。请注意Emerald City单元格的气候数据使用了colspan = 2，从而占据了两列的宽度。 并且Average Rainfall单元格使用rowspan = 2特征跨越了两行。 >>GO >>GO >>GO >>GO  >>GO >>GO >>GO >>GO  >>GO >>GO 2 >>GO >>GO >>GO >>GO  >>GO >>GO >>GO >>GO  >>GO >>GO