HTML与CSS 表格背景和间距

  ——此文章摘自《HTML与CSS入门经典》定价:39元 特价:29.25元 购买>>

    11.4  表格背景和间距

    程序清单11.2中还有一些技巧我没有介绍。可以指定整个表格——以及表格中的每行或每个单元格——的背景,该背景可能与网页本身使用的背景不同。为此,可在标签<table>、<tr>、<td>和<th>中指定样式 background-color 或background-image,就像在<body>标签中一样(参见第9章)。例如,要使整个表格都使用黄色背景,可用< table style="background- color:yellow">或等价的<table style="background-color:#FFFF00">。

    与background-color类似的是background-image属性,后者用于设置一个图像作为表格背景。要将图像leaves.gif设置为表格背景,可用<table style="background-image:url (leaves.gif)"。注意,图像文件名放在括号中,前面加上前缀url,表明描述的是图像文件位置。

    对表格的设置不仅可以使用style属性。例如,可用cellpadding和cellspacing属性来控制表格边框的间距。cellspacing属性设置表格边框之间和表格单元格之间的间距(以像素为单位);cellpadding属性设置单元格中的信息四周的间距(也是以像素为单位)。如果将cellpadding属性设置为0,将使表格中的所有信息尽量接近表格边框,甚至接触到边框。cellpadding和 cellspacing属性让你能够全面控制表格的外观。

    注意:虽然在XHTML中仍允许使用cellpadding和cellspacing属性,但CSS中存在与这两个属性等价的样式属性padding和 border-spacing。然而,当前的网页浏览器对这些样式属性的支持不一致,因此建议现在仍使用属性cellpadding和 cellspacing来调整表格的间距。

    图11.2显示了背景颜色和间距的影响,图中的表头使用银色背景,表格中每个单元格的文本与图像离边框有一定的间距。


    提示:可以将表格放在另一个表格的单元格中,这样内部的表格将拥有“父”表格的质量。换句话说,可以在表格中嵌套表格。

    使用嵌套表格可以设计许多有创意的网页布局。例如,如果要使一列文本显示在表格的左边,可以创建一个两列的表格,将文本放在一列,子表格放在另一列,如下所示:

    <table>

    <tr>

    <td>To the right, you see all our telephone numbers.</td>
    <td>

    <table border="1">

    <tr>

    <td>voice</td>

    <td>802-888-2828</td>

    </tr>

    <tr>

    <td>fax</td>

    <td>802-888-6634</td>

    </tr>

    <tr>

    <td>data</td>

    <td>802-888-3009</td>

    </tr>

    </td>

    </tr>

    </table>

    </table>

 

    注意到内部表格有边框,而外部表格没有。

    嵌套表格的一个缺点是,如果嵌套太深,浏览器渲染网页时可能很慢。如果没有很好的理由,嵌套的级别不应超过三级,尽量控制在两级以内。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值