标题标题  显示论坛会员列表名单  搜索论坛搜索  HelpHelp
  注册注册  登入登入
ASP教学区
 DoReMe : ASP教学区
主题 话题: 第六章 中级HTML 回复发表新主题
作者
贴子内容 << Prev Topic下一个主题 >>
osste
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 29
Posted: 2004/11月/16 1:03下午 | IP记录 引用 osste

建立文本区

以前我们讨论的窗体元素中,用户不能输入超过一行的文本,<TEXTAREA>标识符可以建立一个文本区,在这里你 可提供给用户更大的空间来自由地输入文本(见图6.10)。当你想让用户输入一段文字的时候就使用这个标识符。看下面的例子:

<HTML>

<HEAD>

<TITLE> Text Area </TITLE>

</HEAD>

<BODY >

<FORM ACTION=「somedirectory/mypage.asp」 METHOD=「POST」>

<BR> Please enter your comments below:

<BR> <TEXTAREA NAME=「comments」 COLS=40 ROWS=10></TEXTAREA>

</FORM>

</BODY>

</HTML>

 

图6.10 文本区

你应当立即注意到,在此例中,没有使用<INPUT>标识符来建立文本区,你使用<TEXTAREA> 标识符来建立文本区,这个标识符与其它窗体元素一样,必须在<FORM>标识符中出现。

注意

一些浏览器允许你使用下面的语句:

<INPUT TYPE=TextArea COLS=40 ROWS=10>

不要这样做,在<INPUT>标识符的属性中建立文本区是没什么好处的。如果你想让你的网页与浏览器有最大程度的兼 容性,就使用<TEXTAREA>标识符,不要用TextArea属性。

使用COLS和ROWS属性你可以指定文本区的宽度和高度,COLS属性以列来指定文本区的宽度,ROWS属性以行来指定文本区 的高度。注意这两个属性都是以字符平均宽度来度量的,因为文本区不使用固定字体,因此你在一个50列的文本区内不能刚好输入50 个字符。

你不能给COLS和ROWS属性指定百分数值,这是很不方便的,因为这使得网页在具有不同分辨率的显示器上看起来不一样,这也是 HTML的一个不足。

而且,文本区没有MAXLENGTH属性。没有办法阻止某些用户在文本区内输入大量的文字,对此你一点办法也没有。

注意,<TEXTAREA>标识符是一个容器标识符,如果你想在第一次读入网页时,在文本区显示出文字,那就要将文 字包含在<TEXTAREA>标识符内。如下所示:

<HTML>

<HEAD>

<TITLE> Text Area </TITLE>

</HEAD>

<BODY >

<FORM ACTION=「somedirectory/mypage.asp」 METHOD=「POST」>

<BR> Please enter your comments below:

<BR> <TEXTAREA NAME=「comments」 COLS=40 ROWS=10>

I am the default text!

</TEXTAREA>

</FORM>

</BODY>

</HTML>

当这个HTML文件被网络浏览器解释时,文字I am the default text!将在文本区内显示。注意你只能在文本区内输入文字(包括第五章中讨论的特殊字符──见「加入特殊字符」一节)。任何在 <TEXTAREA>中出现的HTML标识符都将被忽略。

HTML规范中没有定义文本区内的文字怎样换行,当你在Internet Explorer中在文本区中输入一行文字到达右边界时,文本就会自动换到下一行;而使用Netscape Navigator时,文字会向右滚动。

如果你想在Netscape Navigator中控制文本区内的文字怎样换到新的一行,就要使用Netscape特有的属性WRAP。这个属性可接受三个值 :OFF、PHYSICAL和VIRTUAL,缺省值是OFF,即文本不会换到新的一行。另一方面,当WRAP=PHYSICA L时,文本会自动换到下一行。当文本区的内容被提交时,回车键会被添加到文本换行的地方。如果你想让文本区的文字自动换行,但又 不想在提交内容时加入附加的回车键,就可以使用WRAP=VIRTUAL。

当我建立文本区时,我几乎总是使用WRAP=VIRTUAL属性。当文本区内的文字不自动换行,将会造成用户输入信息的混乱,通 过使用这个属性,我可以确保不管在Microsoft还是Netscape的浏览器上文本区的文字都会自动换行,而且我也不想在 解释文本区的内容时处理多余的回车键,因此使用WRAP=VIRTUAL可做到这一点。

Back to Top 查看 osste's 资料 搜索其它贴子 osste 访问 osste's
 
osste
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 29
Posted: 2004/11月/16 1:04下午 | IP记录 引用 osste

建立隐藏区

使用隐藏区,你可以在永远不在屏幕上显示的窗体中加入一些信息。当然,这些信息在窗体提交时也会被包含。

隐藏区对Active Server Pages程序员来说特别有用,你可能会经常使用它们来在网页之间传递隐藏信息。当然只有当你学习了怎样使用Active Server Pages之后,你才能体会到使用隐藏区的好处。

你可以使用隐藏区来建立不依赖于Cookies的变量,这样做既有优点也有缺点,要了解更多信息,可参阅第16章的「不使用Co okies来保留状态」一节中的「使用Active Server Pages Session」。

下面的例子在窗体中建立了一个隐藏区:

<HTML>

<HEAD>

<TITLE> Hidden Field </TITLE>

</HEAD>

<BODY >

<FORM ACTION=「somedirectory/mypage.asp」 METHOD=「POST」>

<INPUT NAME=「secret」 TYPE=HIDDEN VALUE=「You cannot see me!」>

<INPUT TYPE=SUBMIT VALUE=「Submit Me!」>

</FORM>

</BODY>

</HTML>

当这个HTML文件在网络浏览器上显示时,你只能在屏幕上看见一个Submit按钮,名为secret的隐藏区并未显示出来。然 而当窗体按钮被按下时,值You cannot see me!被作为窗体内容的一部分发送了。

警告

你不要在隐藏区内放置你私人的信息,网页浏览者可使用浏览器的View Source命令看到隐藏区的东西。隐藏区这是隐藏起来不可见,但它们并不能躲过聪明用户的眼睛。

Back to Top 查看 osste's 资料 搜索其它贴子 osste 访问 osste's
 
osste
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 29
Posted: 2004/11月/16 1:04下午 | IP记录 引用 osste

建立文件上载按钮

假设你想建立一个让人们做卖房广告的网点,如果人们能上载他们房子的照片,那将是非常有用的;或者你想建立一个收纳短故事的网点 ,那也要让人们能上载他们的故事──例如Microsoft Word格式的文件。

理论上,你可以使用<INPUT>标识符的TYPE=FILE属性来实现这一点,使用这个属性,你可以在窗体上建立 一个文件上载按钮(见图6.11)。当你网点的用户点击这个按钮时,他们可以选择一个本地硬盘上的文件进行上载。下面的例子显示 了怎样去做:

<HTML>

<HEAD>

<TITLE> File Upload </TITLE>

</HEAD>

<BODY >

<FORM ENCTYPE=「multipart/form-data」

ACTION=「somedirectory/mypage.asp」 METHOD=「POST」>

Please choose a picture to upload:

<BR> <INPUT NAME=「picture」 TYPE=FILE ACCEPT=「image/*」>

<BR> <INPUT TYPE=SUBMIT VALUE=「Submit Me!」>

</FORM>

</BODY>

</HTML>

当这个HTML文件在Netscape Navigator(版本3.0或更高)上显示时,一个普通的文本框显示在一个Browse按钮旁,用户可以直接在文本框中输入 文件的名字,或使用Browse按钮来在文件对话框中选择一个文件。当这个窗体被提交后,用户选择的文件也被提交了。

注意这个例子中<FORM>标识符的ENCTYPE属性,它指定了提交时窗体信息的编码方式。通常窗体信息是URL 编码的(空格被+号代替),然而这种编码方法对于非文本的信息是很差的,要想高效地传送一个图象文件,你应当使用ENCTYPE =「multipart/form-data」。

 

图6.11 文件上载按钮

实际的文件上载按钮用下述标识符创建:

<INPUT NAME=「picture」 TYPE=FILE ACCEPT=「image/*」>

由于TYPE属性的值是FILE,浏览器就会建立一个文件上载按钮。ACCEPT属性限制了在文件对话框中出现的文件的类型。在 此例中,文件类型被限制为图象文件,你可以指定MIME类型中的任意一个或几个作为ACCEPT属性的值。

 

 

注意

MIME用于多用途Internet mail扩展。MIME最初被用来作为指定e_mail附属文件类型的的方法,浏览器使用MIME类型来与特定文件相关联。

一些MIME类型的例子是用于GIF图象的image/gif,用于JPEG图象的image/jpeg,用于Microsof t Excel表格的application/x-msexcel,用于Microsoft Word文档的application/msword。

要查看你的计算机支持的MIME类型,可以使用Windows Explorer中的View/Options/File Types命令。

文件上载按钮是非常有用的,然而令人遗憾的是,现在的浏览器软件只支持一部分文件上载按钮,或干脆就不支持。虽然文件上载按钮是 HTML 3.2规范的一部分,但这种情况也是存在的。

例如,Netscape Navigator(版本3.0和4.0)忽略ACCEPT属性,Internet Explorer 3.0更糟糕,它完全拒绝解释文件上载按钮,并用一般的文本框代替,而Internet Explorer 4.0能识别文件上载按钮。在文件上载按钮被更多的浏览器软件支持前,要小心地使用它们。

Back to Top 查看 osste's 资料 搜索其它贴子 osste 访问 osste's
 
osste
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 29
Posted: 2004/11月/16 1:04下午 | IP记录 引用 osste

使用列表

在很多情况下,你想在你的网页上显示一个信息列表。例如,你想显示一个你喜欢的网点的列表,或者你要显示一个参观你网点的10个 理由的列表,或者你非常想列出你喜欢的话语,HTML包含了许多标识符来实现这些目的。

建立无次序列表

最简单类型的列表是无次序列表。当你需要一个简单的方法来列出一些项时,就可以使用这种类型的列表(见图6.12)。例如,你可 以建立一个你喜欢网点的无次序列表,像下面的例子:

<HTML>

<HEAD> <TITLE> Unordered List </TITLE></HEAD>

<BODY>

<UL>

<LI> <A HREF=?/FONT>http://www.hotwired.com?gt; Hotwired </A>

<LI> <A HREF=?/FONT>http://www.byte.com?gt; Byte Magazine </A>

<LI> <A HREF=?/FONT>http://www.microsoft.com?gt; Microsoft </A>

</UL>

</BODY>

</HTML>

 

图6.12 无次序列表

<UL>标识符包含了列表项,每一个列表项用<LI>标识符来定义,你可以根据需要列出任意多的项。

当这个HTML文件显示时,在每一个列表项的前面都显示一个点。缺省状态下这个点是实心圆点。然而,你也可以使用<UL& gt;的TYPE属性来改变这个点的形状。你可以将点的形状设为圆形、方形或圆圈。下列的文件建立了三个只有一个选项的列表,每 个列表都显示了一种点:

<HTML>

<HEAD> <TITLE> Unordered List </TITLE></HEAD>

<BODY>

<UL TYPE=「DISC」>

<LI> I have a disc next to me.

</UL>

<UL TYPE=「SQUARE」>

<LI> I have a square next to me.

</UL>

<UL TYPE=「CIRCLE」>

<LI> I have a empty circle next to me.

</UL>

</BODY>

</HTML>

在Netscape Navigator中,每个列表都显示出一种不同形状的点,而Internet Explorer(包括版本4.0)忽略这个属性,所有点显示出来都是实心圆点。

你可以在一个无次序列表中套入另一个列表,这对于将一个列表分成几个不同部分是很有用的。例如,你可能需要根据不同的类型将你喜 爱的网点进行分类列表:

<HTML>

<BODY>

<UL>

<LI> Magazine Web Sites

<UL>

<LI> <A HREF=「http://www.byte.com」> BYTE </A>

</UL>

<LI> Company Web Sites

<UL>

<LI> <A HREF=「http://www.microsoft.com」> Microsoft </A>

</UL>

</UL>

</BODY>

</HTML>

如果你在Netscape Navigator上显示这个HTML文件,你会注意到在每一级分类的前面都有一个不同类型的点。缺省状态下,最上层的列表显示 一个圆点,下一级显示一个圆圈,而再下面的所有级都使用方块,你可以使用TYPE属性来改变点的形状。

Back to Top 查看 osste's 资料 搜索其它贴子 osste 访问 osste's
 
osste
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 29
Posted: 2004/11月/16 1:04下午 | IP记录 引用 osste

建立有序列表

如果你想建立一个有数字标识的列表,可以使用有序列表(见图6.13)。例如,假设你想列出参观你网点的理由,使用有序列表可以 很好地达到这一点:

<HTML>

<HEAD> <TITLE> Ordered List </TITLE></HEAD>

<BODY>

<OL>

<LI> This web site uses Active Server Pages.

<LI> This web site uses advanced HTML tags.

<LI> This web site contains no <BLINK> blinking </BLINK> text.

</OL>

</BODY>

</HTML>

 

图6.13 有序列表

在有序列表中,<OL>标识符包含了所有列表项,每一个列表项都由<LI>标识符定义,你可以加入任意 多的列表项。

缺省情况下,浏览器上显示的列表项以阿拉伯数字编号(即1、2、3),然而你也可以使用<OL>的TYPE属性改变 这一缺省值。你也可以使用大写的罗马数字(Ⅰ、Ⅱ、Ⅲ)进行编号,或是小写的罗马数字(I、ii、iii),大写字母(A、B、 C),小写字母(a、b、c)。这对于显示一本书的目录表是特别有用的,如图6.14所示:

<HTML>

<HEAD> <TITLE> Ordered List </TITLE></HEAD>

<BODY>

<OL TYPE=I>

<LI> Makeup and Scripting Languages

<OL TYPE=1>

<LI> Basic HTML

<LI> Intermediate HTML

<LI> Advanced HTML

</OL>

</OL>

</BODY>

</HTML>

 

图6.14 目录表

注意此例中TYPE属性是任何设置的,要改变列表项显示的方式,只要将TYPE属性设为你要用的数字系统的第一个数字就行了。T YPE属性可取值1、Ⅰ、i、A或a。

某些情况下,你可能需要在列表的开始或是列表中的某个位置取消某些数字,通过使用<OL>标识符的START属性, 你可以指定列表中的第一个数字;使用<LI>的VALUE属性,你可以忽略一定范围内的数字。下面的例子使用了这两 个标识符:

<HTML>

<HEAD> <TITLE> Ordered List </TITLE></HEAD>

<BODY>

<OL TYPE=A START=3>

<LI> I display the letter『C』.

<LI VALUE=6> I display the letter』F』.

</OL>

</BODY>

</HTML>

在此例中,因为START属性被设为3,因此列表从字母C(字母表中的第三个字母)开始。下一个表项将设为字母F,因为它的VA LUE属性被设为6(字母表中的第六个字母)。使用这两个属性,你完全控制了出现在你的列表中的数字。

Back to Top 查看 osste's 资料 搜索其它贴子 osste 访问 osste's
 
osste
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 29
Posted: 2004/11月/16 1:05下午 | IP记录 引用 osste

建立定义列表

假如你想让你的网页浏览者了解一些新的术语及它们的定义,可以使用定义列表来完成这一功能(见图6.15)。下面是个例子:

<HTML>

<HEAD> <TITLE> Definition List </TITLE></HEAD>

<BODY>

<DL>

<DT> Inveigle

<DD> To entice or lure by artful talk.

<DT> Frisson

<DD> A brief moment of emotional excitement: SHUDDER,THRILL.

</DL>

</BODY>

</HTML>

与其它列表不同,定义列表使用三个标识符:<DL>标识符包含了定义列表,<DT>标识了要被定义的词 ,而<DD>指明了词的定义。

使用定义列表你可以很自由地做许多事。例如,你可以用它来显示一个你喜爱的网站的列表及对这些网点的描述。像下面所示:

<HTML>

<HEAD> <TITLE> Definition List </TITLE></HEAD>

<BODY>

<DL>

<DT> <A HREF=「http://www.hotwired.com」> Hotwired </A>

<DD> A trendy online news source for information on the wired community.

<DT> <A HREF=「http://www.netscape.com」> Netscape </A>

<DD> One of the most visited sites on the Internet.

</DL>

</BODY>

</HTML>

 

图6.15 定义列表

在此例中,使用定义列表而不是无序列表,在你显示的网点间没有圆点出现。

Back to Top 查看 osste's 资料 搜索其它贴子 osste 访问 osste's
 
osste
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 29
Posted: 2004/11月/16 1:05下午 | IP记录 引用 osste

建立表格

表格的用途即是显而易见的,有时却也是不被人注意的。首先,表格最通常的用途是建立一个信息的分类,如果你要将信息按行列来安排 ,就要使用它。例如,你可以用表格来显示一个城市及它们的区域编码的列表。你还可以用表格来组织从数据库中获取的信息。通常,表 格可以用来将那些大量易混淆的信息组织起来,使之易读。

表格另一个不被人注意但很有用的用途是规划网页。使用表格你可以将网页划分成几个不同部分。例如,使用表格你可以在网页上建立多 列,每一列都有自己的背景色。如果你想对你的网页的空间和布局进行控制的话,就可以使用表格。

建立一个简单的信息表格

表格可以是非常复杂的,有许多关于表格的标识符,每种标识符又有许多属性,而且这些属性的大部分在Microsoft和Nets cape上是不同的。然而,表格也可以是非常简单的,下面的例子是一个非常简单的表格(见图6.16):

<HTML>

<HEAD> <TITLE> Table With Border </TITLE></HEAD>

<BODY>

<TABLE BORDER=1>

<TR>

<TD> I am a table and I have a border. </TD>

</TR>

</TABLE>

</BODY>

</HTML>

 

 

图6.16 具有边框的简单表格

 

当这个HTML文件在网络浏览器上显示时,句子I am a table and I have a border.显示在一个具有三维外观边框的表格中,这种效果是由三个标识符共同完成的<TABLE>、<T R>和<TD>。

在此例中,BORDER属性在表格周围显示一个边框,你可以通过为BORDER属性设置不同的值来改变边界的宽度。显然,如果不 使用BORDER属性,显示出来的表格就没有边界。

<TR>标识符为表格添加一行。在此例中,表格只有一行,当然你可以根据需要为表格添加任意多的行。

<TD>标识符用来包含实际的表格数据。你可以将<TD>看作表格的列标识符,表格可以根据需要设置许 多列。<TD>标识符可以包含任意可在HTML文件主体中出现的标识符。例如,<TD>可以包含图象、 超链接和窗体,甚至它还可以包含其它表格。

建立表格时,一般你应当先建立行,然后在行中建立列。你不能在<TD>中包含<TR>,表格是以这种次 序建立行和列的。

上例中的表格非常简单,它只有一行和一列。然而它包括了建立一个非常大的信息表格所需的所有标识符。要建立大的表格,只需用&l t;TR>和<TD>标识符不断地加入更多的行和列就行了。

例如,你要建立一个许多城市及其区域编码的表格,你可以使用下面的方法实现:

<HTML>

<HEAD> <TITLE> Area Codes </TITLE></HEAD>

<BODY>

<TABLE BORDER=1>

<TR>

<TD> Boston </TD>

<TD> 617 </TD>

</TR>

<TR>

<TD> Modesto </TD>

<TD> 209 </TD>

</TR>

<TR>

<TD> San Francisco </TD>

<TD> 415 </TD>

</TR>

</TABLE>

</BODY>

</HTML>

在此例中,<TR>用来建立三个行,每一行对应一个城市(见图6.17);每一行又用<TD>标识符建 立了两列,用来存放城市名及其编码。

 

图6.17 具有多行和多列的表格

Back to Top 查看 osste's 资料 搜索其它贴子 osste 访问 osste's
 
osste
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 29
Posted: 2004/11月/16 1:05下午 | IP记录 引用 osste

 

建立表头及标题

图6.17.所示表格的目的并不明确,如果一个用户在网页上把它显示出来而没有任何说明文字,没有人会知道这个表格是一个城市编 码的列表。你可以通过为表格加上表头和标题来使表格变得清楚明了。

标题标明了整个表格的作用,你可以使用<CAPTION>标识符来为表格加入标题。下面的例子说明了如何使用这一标 识符:

<HTML>

<HEAD> <TITLE> Area Codes </TITLE></HEAD>

<BODY>

<TABLE BORDER=1>

<CAPTION> Area Codes </CAPTION>

<TR>

<TD> Boston </TD>

<TD> 617 </TD>

</TR>

<TR>

<TD> Modesto </TD>

<TD> 209 </TD>

</TR>

<TR>

<TD> San Francisco </TD>

<TD> 415 </TD>

</TR>

</TABLE>

</BODY>

</HTML>

现在,当这个表格在浏览器上显示时,标题Area Codes将会显示在表格的正上方。缺省情况下,标题出现在表格的上方,但是你也可以使用<CAPTION>的AL IGN=「bottom」属性来使标题出现在表格下方。

注意

Internet Explorer还可为<CAPTION>的ALIGN属性设置「left」和「right」值。你可能会认为这两 个值会在表格的右边或左边建立一个标题,但它们只是改变标题在表格上方显示时的对齐方式,即分别使标题在表格上进行左对齐或右对 齐。

这个表格还可以让它变得更明确一些。现在,表格每一列的目的还不很清楚,例如,一些外来的愚蠢的人可能会认为数字415是一个城 市名称,而名字S按Francisco是区域编码,要防止出现这种混乱,你就要为表格加上表头。

你可以用<TH>标识符来为表格加上表头。<TH>用起来与<TD>标识符类似,然而,在 这个标识符间出现的文字显示出来是黑体(见图6.18)。下面的例子显示的表格包含了一个表头:

<HTML>

<HEAD> <TITLE> Area Codes </TITLE></HEAD>

<BODY>

<TABLE BORDER=1>

<CAPTION> Area Codes </CAPTION>

<TR>

<TH> City </TH>

<TH> Area Code </TH>

</TR>

<TR>

<TD> Boston </TD>

<TD> 617 </TD>

</TR>

<TR>

<TD> Modesto </TD>

<TD> 209 </TD>

</TR>

<TR>

<TD> San Francisco </TD>

<TD> 415 </TD>

</TR>

</TABLE>

</BODY>

</HTML>

 

图6.18 具有列表头的表格

使用<TH>标识符不仅可以为列建立表头,还可以为行建立表头,只要把它放置于一行的开头。实际上,你可以把< ;TH>放置于一个表格中任何一个可放置<TD>的位置,这两个标识符之间的区别是<TH>使文 字以黑体显示并将文字显示在中央,而<TD>在缺省情况下并不这样。

Back to Top 查看 osste's 资料 搜索其它贴子 osste 访问 osste's
 
osste
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 29
Posted: 2004/11月/16 1:05下午 | IP记录 引用 osste

合并行或列

假设你想把表格的某些域进行分割,例如,你想让任何一个看你表格的人第一眼就能看出哪里些城市及其编码是属于东海岸的,而哪里些又是 位于西海岸的。

你可以通过将表格分成两部分来实现这一点,每部分分别起名为East Coast和West Coast。East Coast表头将包含那些位于东海岸的城市及其编码,而West Coast表头则包含位于西海岸的。然而,要为表格中多列做一个表头,你必须让这个表头具有多列的宽度。通过<TH> ;标识符的COLSPAN属性你可以做到这一点(见图6.19)。下面的例子说明了如何使用这一属性:

<HTML>

<HEAD> <TITLE> Area Codes </TITLE></HEAD>

<BODY>

<TABLE BORDER=1>

<CAPTION> Area Codes </CAPTION>

<TR>

<TH COLSPAN=2> East Coast </TH>

<TH COLSPAN=2> West Coast </TH>

</TR>

<TR>

<TH> City </TH>

<TH> Area Code </TH>

<TH> City </TH>

<TH> Area Code </TH>

</TR>

<TR>

<TD> Boston </TD>

<TD> 617 </TD>

<TD> Modesto </TD>

<TD> 209 </TD>

</TR>

<TR>

<TD> </TD>

<TD> </TD>

<TD> San Francisco </TD>

<TD> 415 </TD>

</TR>

</TABLE>

</BODY>

</HTML>

 

图6.19 合并列的表格

当这个HTML文件在浏览器上显示时,表头East Coast占有表格的前两列,而West Coast则占有后两列。<TD>标识符也可以使用COLSPAN属性,使用COLSPAN属性,你可以让表头占有 两倍或更多被于正常的宽度。

还有一个属性用于合并行,你可以使用<TH>或<TD>标识符的ROWSPAN属性来合并两个或更多的 行,你可以使用这个属性来为多个行建立卷标,当许多行都用同一个卷标的时候,这是很有用的。

Back to Top 查看 osste's 资料 搜索其它贴子 osste 访问 osste's
 
osste
Newbie
Newbie


加入: 2004/5月/08
Online Status: Offline
回复: 29
Posted: 2004/11月/16 1:06下午 | IP记录 引用 osste

控制表格及其表项的对齐方式

缺省情况下,表格在浏览器屏幕上左对齐,你可以使用<TABLE>的ALIGN属性来指定表格的对齐方式。ALIG N属性可以取值「left」、「center」和「right」。例如,让一个表格在屏幕中央显示可以使用:

<TABLE ALIGN=「CENTER」>

注意

使用<TABLE>的ALIGN属性要小心,不是所有的浏览器都能识别它。如果你要让表格显示在屏幕中央,使用&l t;CENTER>标识符来包含表格会更安全些。

你可以使用<TR>的ALIGN属性来设置表格中每行元素的水平对齐方式,这个属性也可以取值「left」、「ce nter」和「right」。要设置某一行中所有元素的竖直对齐方式,可以使用<TR>的VALIGN属性,它可以 取值「top」、「middle」和「botton」(缺省情况下取值「middle」)。

要更好地控制表格中某个表头或元素的排列方式,可以使用<TH>和<TD>标识符的ALIGN和VAL IGN属性,这两个属性的取值范围与<TR>相同,然而<TH>的<TD>ALIGN和V ALIGN属性将会覆盖任何为整个一行指定的排列方式。

控制表项的空间

当浏览器显示一个表格时,它将每一列的宽度设置为这一列中最长表项的宽度。浏览器尽可能地占用较小的屏幕空间来紧密地排列表格中 的每一项。你可以使用<TABLE>的CELLPADDING和CELLSPACING属性来改变这一缺省值。

通过使用CELLPADDING属性,你可以为表格中的每一项安排一个更大的空间,使用CELLSPACING属性,你可以为表 项之间留出一定的空间。这两个属性的值都以象素来指定。下面的例子说明了如何使用这两个属性(见图6.20):

<HTML>

<HEAD> <TITLE> Cell Spacing </TITLE></HEAD>

<BODY>

<TABLE BORDER=1>

<CAPTION> Normal Table </CAPTION>

<TR>

<TD> First Column </TD>

<TD>Second Column </TD>

</TR>

</TABLE>

<HR>

<TABLE BORDER=1 CELLSPACING=20>

<CAPTION> Table With Cell Spacing </CAPTION>

<TR>

<TD> First Column </TD>

<TD>Second Column </TD>

</TR>

</TABLE>

<HR>

<TABLE BORDER=1 CELLPADDING=20>

<CAPTION> Table With Cell Padding </CAPTION>

<TR>

<TD> First Column </TD>

<TD>Second Column </TD>

</TR>

</TABLE>

</BODY>

</HTML>

 

图6.20 表格空间的安排

Back to Top 查看 osste's 资料 搜索其它贴子 osste 访问 osste's
 

<< 上一页 页 of 3 下一页 >>
  回复发表新主题
显示可打印的页面 显示可打印的页面

论坛跳转
不能 张贴新论题在这个讨论版
不能 回应论题在这个讨论版
不能 删除你的发言在这个讨论版
不能 编辑你的发言在这个讨论版
不能 新增投票标题在这个讨论版
不能 在这个讨论版投票

Edit by doreme Forums version 2004
Welcome ©2001-2004 doreme Guide

This page was generated in 0.1875 seconds.

 
保养品
保养品, Skin Care
www.elady.tw
美材批发
美材, Cosmetic
www.elady.tw/beauty_org
保养品批发
名牌保养品、保养品批发
gb.perfume.com.tw/skincare
饰品批发
饰品、饰品批发
gb.perfume.com.tw/ornament