• HTML基础第五讲---控制表格及其表项的对齐方式


    转自:https://i.cnblogs.com/posts?categoryid=1121494

    缺省情况下,表格在浏览器屏幕上左对齐,你可以使用<TABLE>的ALIGN属性来指定表格的对齐方式。ALIGN属性可以取值left、center和right。例如,让一个表格在屏幕中央显示可以使用: 
     
    <TABLE ALIGN=CENTER>
    注意
    使用<TABLE>的ALIGN属性要小心,不是所有的浏览器都能识别它。如果你要让表格显示在屏幕中央,使用<CENTER>标识符来包含表格会更安全些。
    你可以使用<TR>的ALIGN属性来设置表格中每行元素的水平对齐方式,这个属性也可以取值left、center和right。要设置某一行中所有元素的竖直对齐方式,可以使用<TR>的VALIGN属性,它可以取值top、middle和botton(缺省情况下取值middle)。
    要更好地控制表格中某个表头或元素的排列方式,可以使用<TH>和<TD>标识符的ALIGN和VALIGN属性,这两个属性的取值范围与<TR>相同,然而<TH>的<TD>ALIGN和VALIGN属性将会覆盖任何为整个一行指定的排列方式。
    控制表项的空间
    当浏览器显示一个表格时,它将每一列的宽度设置为这一列中最长表项的宽度。浏览器尽可能地占用较小的屏幕空间来紧密地排列表格中的每一项。你可以使用<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>
    控制表格和表项的大小
    某些时候你可能想让表格显示出来大一些,你可以用<TABLE>的WIDTH属性来控制表格的宽度,你可以为WIDTH属性提供宽度的绝对值或相对值。
    当为WIDTH属性提供宽度的绝对值时,你用象素来表示。例如,要建立一个宽为100个象素的表格,可以用<TABLE WIDTH=100>。当然,并不能保证表格显示出来恰好是你指定的宽度,表项中的内容可能会迫使表格显示出来比WIDTH属性指定的值要宽。
    另外,你也可以用相对值来指定表格的宽度,例如,如果你想让表格占有整个浏览器屏幕那么宽,你可以用<TABLE WIDTH=100%>,同样地,如果你在WIDTH属性中指定的百分数太小的话,浏览器显示出来的表格就不是那个宽度。
    <HEIGHT>属性可以用来指定表格的整体高度,同样这个属性可取绝对值和相对值。但使用这个属性时要小心,即使Microsoft和Netscape的浏览器都能正确解释它,但它并不是HTML 3.2规范中的一部分。
    你也可以用<TD>和<TH>标识符的WIDTH和HEIGHT属性来控制表格中某一表项的大小,你必须用绝对象素值来指定这些属性的值。你要知道当你设置这些值时,只不过是在为浏览器提供建议,浏览器尽量按你的意愿去做,但也有可能不能完全按你指定的方式来显示一个表格。
    在表格中加入颜色和图象
    根据HTML 3.2规范,表格不具有任何颜色属性。然而,值得庆幸的是Netscape和Microsoft都扩展了HTML来让表格具有自己的背景色,两种浏览器都能识别<TABLE>标识符的BGCOLOR属性。
    你可以使用颜色名或RGB值来设定BGCOLOR的值,下面的例子说明了这个属性的用法:
    <HTML>
    <HEAD> <TITLE> Table Color </TITLE> </HEAD>
    <BODY BGCOLOR=white>
    <CENTER>
    <TABLE BGCOLOR=lightblue CELLPADDING=10>
    <TR>
    <TD> I have a blue background </TD>
    </TR>
    </TABLE>
    </CENTER>
    </BODY>
    </HTML>
    当这个例子中的文字在浏览器上显示时,它处于一个浅蓝色的框中,这对于突出主页上主体文字中某些特定的文本是很有用的。例如,你可以使用这种方法来突出一个引用、标题或是网页上一个简短的注释。
    你也可以为表格中某一行甚至是某一个表项使用BGCOLOR属性。例如,可以用不同的颜色来区分表格中不同列的数据。
    BGCOLOR属性的一个更令人兴奋的用处可能是设置你网页的整体颜色,如果你将表格的宽度设为屏幕的宽度,你可以建立一个具有多列的网页,而每一列都具有不同的颜色。下面的例子建立了一个有两列不同颜色的网页:
    <HTML>
    <HEAD> <TITLE> Two Color Columns </TITLE> </HEAD>
    <BODY BGCOLOR=white>
    <CENTER>
    <TABLE WIDTH=100% HEIGHT=100%>
    <TR>
    <TD BGCOLOR=Olive ALIGN=center> I have a olive background </TD>
    <TD BGCOLOR=Aqua ALIGN=center> I have a aqua background </TD>
    </TR>
    </TABLE>
    </CENTER>
    </BODY>
    </HTML>
    Netscape和Microsoft的浏览器都允许你为表格设定背景图片(见图6.21),你可以通过<TABLE>标识符的BACKGROUND属性来指定一幅图象:
    <HTML>
    <HEAD> <TITLE> Two Color Columns </TITLE> </HEAD>
    <BODY BGCOLOR=white>
    <CENTER>
    <TABLE WIDTH=50% HEIGHT=100% BACKGROUND=myimage.gif>
    <TR>
    <TD ALIGN=center> I have a checkered background </TD>
    </TR>
    </TABLE>
    </CENTER>
    </BODY>
    </HTML>
    Netscape Navigator 4.0和Internet Explorer 3.0及4.0还允许你在表格的某一行或某个表项使用BACKGROUND属性,通过为不同的表项使用不同的背景图象,你可以建立一个可视性非常强的网页。
    表格作为子页
    <TABLE>标识符最初被引入HTML是用来格式化地显示信息。然而,随着时间的推移,这个标识符的属性被大大地扩充了,现在可以将<TABLE>看成是用来在网页中建立一个子页的标识符。这个标识符被扩展出了那么多的属性,以致于现在它很象<BODY>标识符了。在Netscape 和Microsoft的浏览器上,<TABLE>具有许多和<BODY>相同的属性,你可以为表格指定它自己的背景色和图象。另外<TABLE>标识符还能包含所有能在<BODY>中包含的HTML标识符。
    然而,<TABLE>具有一个比<BODY>更大的优势,每一个HTML文件必须有且只有一个<BODY>标识符,但对于<TABLE>来说,则没有这种限制,你可以在HTML文件中包含任意数目的<TABLE>。
    当你设计网页时,不要让<TABLE>这个名字愚弄了你。<TABLE>不仅仅用于建立表格,还可以在你的网页上建立子页,当你想把单个网页分成多个部分时,就用<TABLE>标识符。
    小结
    本章讲述了一些重要的HTML标识符。例如,你现在知道了如何建立HTML窗体来让你的网页具有交互性。你还学习了一些对信息进行列表的有用的HTML标识符。最后,你学习了怎样用表格来组织信息,以及怎样用表格来为你的网点进行高级网页布局。
    下一章将介绍一些HTML中高级的标识符,你将学习怎样使用image map、框架及cascading style sheets。在学完下一章后,你就可以设计出任何你曾经看过,甚至想过的。

  • 相关阅读:
    购买成熟软件产品后的二次开发的问题
    outlook2010如何导入csv的通讯录?
    导入Excel数据时对数据校验提示方法
    系统开发中存储过程使用的优势和劣势
    FCKeditor.Net_2.5的使用
    [正则表达式]如何高亮显示搜索关键字
    国外网站模板网址集锦
    _NET 下 FCKeditor_2_5_1上传图片的配置
    用属性模拟多继承机制
    FCKeditor 2.6在ASP.NET中的配置方法
  • 原文地址:https://www.cnblogs.com/sharpest/p/7902994.html
Copyright © 2020-2023  润新知