使用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 |
