设为首页收藏本站 切换到宽版 手机版
搜索
  • 您还未登录，请
    • 时尚酷族»网站主页 › ═☆网络技术发布学习区☆═ › 网站程序源码 › 静态网页HTML基础-第五讲-控制表格及其表项的对齐方式 ...
    返回列表 发新帖
    查看: 1571|回复: 0
    打印 上一主题 下一主题
    收起左侧

    静态网页HTML基础-第五讲-控制表格及其表项的对齐方式 中国酷族独家发布网页基础教程

    [复制链接]
    • 形象
    • 资料
    • 荣誉
    ＣooL．泪猪  男性
    发短消息 加为好友
    QQ查看个人网站
    UID: 1
    帖子: 5112
    精华: 33
       积分: 33240
       威望: 2128
       状态: 0
       积极: 9976
       贡献: 644
       魅力: 499
       活跃: 11205
       人气: 1235
       酷币: 23500
       阅读权限:255
       注册时间:2009-9-1
       在线时长:2830小时
       失踪天数: 0 天
       社区经验: 18级 已经发了5112篇文章咯快19级咯
       在线状态:   
    时尚酷族泪猪
    级别: 酷族管理员
  • TA的每日心情
    开心
    昨天 07:33

    • 签到天数: 299 天

    连续签到: 2 天

    [LV.8]以坛为家I

    荣誉勋章

    社区QQ达人 超级无敌新人奖 优秀成员 最佳成员奖 原创者勋章 沙发王勋章 每日签到奖 推广之星奖 宣传大使 极度诱惑勋章 视觉潮人奖 先锋奖 六星奖 音乐天才奖 空间认证奖 YY认证勋章 在线时间王勋章 红人勋章 爱心勋章 社区活动奖 幸福恋人奖(男) 酷Q帅哥奖 精英会员审核团队标志 最具人气奖 水瓶座
    跳转到指定楼层
    楼主
    ＣooL．泪猪实名认证 发表于 2011-3-3 04:29:40 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式      紫钻仅向指定用户开放  
    +1
    1571°C
    沙发哦 ^ ^ 马上

    马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

    您需要 登录 才可以下载或查看，没有帐号？会员注册

    x
    HTML基础第五讲---控制表格及其表项的对齐方式
    By:泪猪
    缺省情况下，表格在浏览器屏幕上左对齐，你可以使用<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。在学完下一章后，你就可以设计出任何你曾经看过，甚至想过的。
    ＣooL．泪猪说：
    分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    收藏收藏 转播转播 分享分享 分享淘帖 支持支持 反对反对
         时尚酷族社区:www.coqq.net
    回复

    使用道具 举报

    返回列表 发新帖

    发表回复

    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 会员注册

    本版积分规则

    欢迎您的光临，如果您觉得本站做得不错的话，请把本站介绍给您的好友，谢谢大家的支持！
    发布主题 上个主题 下个主题 快速回复 收藏帖子 返回列表
    关于我们
    关于酷族
    免责说明
    版主招聘
    网站地图
    相关娱乐
    音乐上传
    糗事百科
    秘密分享
    社区交流
    联系我们
    在线客服
    官方微博
    意见反馈
    关注微信
    问题帮助
    酷族百科
    如何上传作品
    作者答疑
    会员答疑

    ©2009-2025 时尚酷族社区 http://www.coqq.net/  版权所有 
      

    快速回复 返回顶部 返回列表