阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
表格,让Web看起来更美(1):表格的规划
Web世界中,表格无处不在。但你真正了解它吗?你知道什么是“多重宽度”、“行组”、“列组”以及“thead”、“tfoot”、“tbody”吗?呵呵,请跟我来,让我们上上下下、仔仔细细地打量它一番 ... *g41"Cl -*l[:5m q<uLBaL_]r 概要 *K.7Zf0
?N*@o. 从最初在Netscape 2.0中诞生一直到今天,表格(Table)一直是Web世界HTML语言的绝对主角。千万不要认为表格是一堆令人烦恼的数字与日期布局,只有会计部门的人才会对它感兴趣。事实上,表格有许多潜能值得我们去开发!巧妙地使用它,能让灿烂缤纷的Web世界看起来更美! <\~#\A=; .mrRv8>$ f4I9H0d;! 本文就将全面介绍表格在web世界的十八般武艺,主要包括: fDHISJv >qvD39w SW'KYzn 表格的规划 j77}{5@p 基本表格结构 Q%1;{5 表格和css 4:
PP[2? 表格说明了什么 =F[,-B~ 表格的标题和摘要 \)uad5`N 拆分表格 QaBXzf
表格列 be#"517 行和列的跨单元合并,空单元格 <Pt\)"JA 行组 U7eQ-r 表头 .Awq(
表格中的标题 v>!}cB/6 指定表头信息 'o
L[rO~j 绘制表格 =V
7w CW 单元格间距 ..TjEBp 单元格 'B6H/d> 列宽度 ?.ihWbW_ 表格宽度 #[yl;1) 设置表格 e"/X*xA 使用表格进行页面布局 JCfToFB 表格的规划 kl"Cm`b) !P3|T\|]+ dD<kNa}2 基本表格结构 )yZE>>3- =oDrN7`,B ;gV8f{X{Z 表格的基本结构很简单:使用TABLE元素定义表格。表格包含若干行,每行有若干单元格,行、列分别用TR和TD元素表示。以下是一个关于Acme计算机公司销售部工作情况的基本表格: \ y",Qq? cA2]VL.r>C Y|nTc.A R"([Y#>m <H3>Are Bugs Helping M.O.R.O.N.S. Sales?</H3> O9)8a] tH(#nx8 <P>The table below lists the number of reported bugs per 1000 lines of i(HhL& code in M.O.R.O.N.S. against the product sales.</P> %b6wo?%* 3om-,gfZ <TABLE> j(JI$ <TR> h+(s/o?\ <TD>Year</TD> <TD>Bugs</TD> <TD>Sales</TD> <
*OF </TR> u*`GIRfWT <TR> 74#@F{w <TD>1995</TD> <TD>2.3</TD> <TD>500,000</TD> IRa*}MJe </TR> 8<!9mgh <TR> ERjf.7)d <TD>1996</TD> <TD>3.2</TD> <TD>1,700,000</TD> 5Ncd1 </TR> !
+7ve[z <TR> l/LUwDI{ <TD>1997</TD> <TD>5.6</TD> <TD>8,200,000</TD> r1]^#&V;MC </TR> w"|c;E1;_ <TR> s2WB4Uk <TD>1998</TD> <TD>12.3</TD> <TD>33,000,000</TD> VuW19-G </TR> QCw<* Id+ </TABLE> qFk(UazN L6.R?4B 下面是上面HTML代码的输出结果: NYeg,{q !k63`(Ti /'&LM\ [>86i l-rnDl Are Bugs Helping M.O.R.O.N.S. Sales? @ 2
_&ti The table below lists the number of reported bugs per 1000 lines of code in M.O.R.O.N.S. against the product sales. y6oDbwke iDsjIW\j Year Bugs Sales tJP(eaqZ 1995 2.3 500,000 -E1}mL}I` 1996 3.2 1,700,000 `UR.Rn/x 1997 5.6 8,200,000 ^8iy( 1998 12.3 33,000,000 hGeRM4zVZZ gnGw7V p=zm_+= n|.;g!QDA 从以上的例子里我们可以清楚地看到表格的结构,其中有许多的标记。可喜的是,TR和TD的结束标记是可以隐含不写的,因此,例子可以象下面一样写得更简单些,而同样能够得到相同的效果: Y
S*t7 ?m6E@.{ <TABLE> ?:E;C<Ar <TR><TD>Year<TD>Bugs<TD>Sales
^&}Y>O, <TR><TD>1995<TD>2.3<TD>500,000 3A5" % <TR><TD>1996<TD>3.2<TD>1,700,000 ;#due <TR><TD>1997<TD>5.6<TD>8,200,000 lQzrf"N' <TR><TD>1998<TD>12.3<TD>33,000,000 @."R9s </TABLE> yWuq/J: v:chr$>j5 这看起来是一个好消息,对吧?但是,你却不应该这么做。原因是:对于Navigator,如果在表格元素中忽略了任何一个标记,就会引起一个错误,从而导致整个文档中的CSS格式混乱。丢失结束标记是引发CSS错误的第一个原因,它的确切结果是无法预测的,这和文档以及设置的具体CSS属性有关。实际上,当发现CSS不正常时,尤其是在外观格式不正常时,应该首先检查是否丢掉了表格标记。 -l",!sV 8c9_=8vw 表格和CSS >Ry4Cc F2&KTK 现在我们面临一个有关表格的棘手问题。HTML表格要比CSS出现早得多,所以它们的很多格式可以通过HTML而不是CSS来控制。同样,像我们以后会看到的那样,表格的格式化可能是一件麻烦的事情。CSS 1 没有提供控制表格外观的任何手段。CSS 2 中的确有一系列控制手段,但问题是它们中的大部分都还没有被实现。现在讨论它们,就象讨论如何管理附近恒星系统中的殖民地一样。虽然我希望浏览器支持CSS表格属性能更早成为现实,我们还是从比较实际的角度出发,看看现在如何控制表格外观。 <
5ow81 Wg[`H=)Q Q7C'O @ 在我们讨论的CSS中,还是有一些起作用的东西的。可以在表格、它的单元格和行上设置背景颜色,而且,还可以在它的列上设置。可以在单元格内的元素上设置CSS属性,并且它们会像预期的那样起作用。还可以对表格的单元格本身使用块和布局属性。关于表格和CSS的另一个bug是:无论在Explorer还是Navigator中,大多数属性并不能由表格从它们的上一级中继承,对表格的行和单元格来说也是如此。良好的习惯是显式地设置表格元素的CSS属性以确保它们起作用。
|
|
[楼 主]
|
Posted: 2006-04-04 09:50 |
| |