html4.0 table,使用HTML 4.0制作表格(上)

最新推荐文章于 2022-09-19 16:43:54 发布

祝祝祝莺时

最新推荐文章于 2022-09-19 16:43:54 发布

阅读量231

点赞数

文章标签： html4.0 table

指导你如何在建设网站时制作表格。

现在，全世界的人都把自己标榜为“网页设计师”，之所以这样讲是因为他们掌握了你所陌生的工具——HTML(又称为“超文本标记语言”)。学习HTML的一种方法就是使用浏览器“查看源文件”的功能来查看所访问的网页的源文件。通过在源代码中查找网页中出现的单词或短语，你将会获取许多精彩设计背后的技巧。

为什么使用表格?

表格是一种在网页上组织和显示信息的强大的工具。通过使用表格，你可以用简洁明了的格式显示详细数据、排列表单元素、放置图片并显示链接列表。你可以使用层叠样式表(CSS)来对照表格，该工具提供了元素和图片的绝对位置。CSS在排版上提供了表格所不具有的一些功能。但是只要你能够熟练的使用表格，你将会发现表格使网页的信息组织变的非常轻松。同时，CSS提供的样式属性使你能够更为快捷的创建漂亮的表格。

首先，我们先要向大家讲述一些表格基础，以及HTML 4.0的表格功能是如何与样式表一同工作的。最后，我们会告诉一些在网页中应用表格的小窍门。

创建表格

在网页中我们使用< TABLE>< /TABLE>标签来创建表格元素。在一个表格中，你可以使用< TR>< /TR>标签来创建行，或使用< TD>< /TD>来创建单元格。让我们先来看一下表格A中显示的基于Web的表格。列表A中列出了图A中表格的源代码。

图A: 我们讲告诉你如何使用HTML 来创建表格这一格式化元素。

表A: 以下是样例表格的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*">

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