使用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特征跨越了两行。
|
