日期:2014-03-18 浏览次数:20861 次
现在,全世界的人都把自己标榜为“网页设计师”,之所以这样讲是因为他们掌握了你所陌生的工具——HTML(又称为“超文本标记语言”)。学习HTML的一种方法就是使用浏览器“查看源文件”的功能来查看所访问的网页的源文件。通过在源代码中查找网页中出现的单词或短语,你将会获取许多精彩设计背后的技巧。
为什么使用表格?
表格是一种在网页上组织和显示信息的强大的工具。通过使用表格,你可以用简洁明了的格式显示详细数据、排列表单元素、放置图片并显示链接列表。你可以使用层叠样式表(CSS)来对照表格,该工具提供了元素和图片的绝对位置。CSS在排版上提供了表格所不具有的一些功能。但是只要你能够熟练的使用表格,你将会发现表格使网页的信息组织变的非常轻松。同时,CSS提供的样式属性使你能够更为快捷的创建漂亮的表格。
首先,我们先要向大家讲述一些表格基础,以及HTML 4.0的表格功能是如何与样式表一同工作的。最后,我们会告诉一些在网页中应用表格的小窍门。
创建表格
在网页中我们使用<TABLE></TABLE>标签来创建表格元素。在一个表格中,你可以使用<TR></TR>标签来创建
行,或使用<TD></TD>来创建单元格。让我们先来看一下表格A中显示的基于Web的表格。列表A中列出了图A中表格的源代码。
我们讲告诉你如何使用HTML 来创建表格这一格式化元素。
以下是样例表格的HTML源代码。
<HTML>
<HEAD><T99vLE>Using the CSS position attributes</T99vLE>
<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特征跨越了两行。
表格分组
图A中的表格还应用了HTML4.0最新的一些表格特征,特别是新的列和行分组功能。你可以使用COLGROUP元素将样式应用到一组列中,这样便无须重复的设置单个列。在范例中,我们在<COLGROUP>标签中定义了span = 3,这标明我们将使用COLGROUP将样式应用到3列中。COL元素使我们能够为列分组中的单个列应用样式信息。在范例中,我们使用COLGROUP使除第一列外,所有列中的文字都居中显示,且应用方向为从右至左。我们还规定了第2列和第3列的宽度。这些值后的*号标
明我们希望列的宽度尽可能接近120像素。
我们还可以在一组列中应用样式特征。可以使用THEAD元素对组成表格标题的行进行分组,可以使用TFOOT元素对组成页脚的行进行分组,同时可以使用TBODY对表格正文的行进行分组。正如你在样式表中所看到的,我们使用了以上几种元素对每一组行设置样式。你可能还注意到了我们在</THEAD>标签后创建的空的TFOOT元素。缺省情况下,第一个TFOOT元素将特定的行放置到表格的下方。但是我们希望将第一个TFOOT行放置到第一