分享
 
 
 

使用HTML 4.0制作表格(下)

王朝html/css/js·作者佚名  2006-01-08
窄屏简体版  字體: |||超大  

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有