使用HTML 4.0制作表格(中)
2001-07-25 15:01
218 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/hxfwsk/article/details/5835
使用HTML 4.0制作表格(上)
(01-7-16 74)
(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特征跨越了两行。 |
相关文章推荐
- 使用table标签制作常用的html表格
- HTML5+CSS3+JS学习笔记-8-使用JS及函数来制作表格
- HTML 使用表格制作简单的个人简历
- html使用表格实现网页制作
- 在使用jQuery+HTML+Javascript的简单例子---很容易的制作双色表格
- HTML5+CSS3+JS学习笔记-12-使用JS及函数来制作表格加上3D透视效果
- html,css使用表格制作课程表
- 使用HTML+Javascript制作代码生成工具
- ---===HTML帮助文件的制作和使用(new)===---
- c#使用 VTemplate模板引擎制作html报表
- 使用HTML 5/CSS3五步快速制作便签贴特效
- 生成PDF文件-使用iText制作复杂表格
- 使用HTML HELP WORKSHOP制作CHM帮助文档
- ---===HTML帮助文件的制作和使用(new)===---
- VS2010使用.net 4.0中的ASP.NET MVC 2 模板建立工程后无法提交HTML代码解决方案一则
- 制作1px表格边框的十种方法(html和css)
- Flex帮助文档(html格式)制作及ASDoc的使用
- 使用ListView制作表格样式以及消息提示小图标的布局
- html,js,css综合练习-2048游戏(使用表格布局)
- html 精通HTML表格的使用