表格内部的对齐和跨度

资讯 驱动中国 若水 4,681 次阅读 0 条评论
分享 Q

   默认情况下,放在表格单元格中的内容将水平左对齐,并垂直居中。可用样式属性text-align和vertical-align来控制表格单元格中的内容在水平方向和垂直方向的对齐方式。

    这些属性可用于任何<tr>、<td>或<th>标签。应用于<tr>标签的对齐属性将应用于该行所有的单元格。如果表格很大,应将这些属性应用于<tr>而不是每个<td>或<th>标签,这样可以节省很多时间和精力。程序清单11.2中的HTML代码使用style="vertical-align:top"使文本出现在单元格的顶部。图11.2显示了结果。

    程序清单11.2  表格内的对齐、单元格间距、边框和背景颜色
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
      <head>
        <title>Things to Fear</title>
      </head>
      <body>
        <table border="2" cellpadding="4" cellspacing="2">
          <tr style="background-color:silver">
            <th colspan="2">Description</th>
            <th>Size</th>
            <th>Weight</th>
            <th>Speed</th>
          </tr>
          <tr style="vertical-align:top">
            <td><img src="handgun.gif" alt=".38 Special"/></td>
            <td><h2>.38 Special</h2></td>
            <td>Five-inch barrel.</td>
            <td>Twenty ounces.</td>
            <td>Six rounds in four seconds.</td>
          </tr>
          <tr style="vertical-align:top">
            <td><img src="rhino.gif" alt="Rhinoceros" /></td>
            <td><h2>Rhinoceros</h2></td>
            <td>Twelve feet, horn to tail.</td>
            <td>Up to two tons.</td>
            <td>Thirty-five miles per hour in bursts.</td>
          </tr>
          <tr style="vertical-align:top">
            <td><img src="axeman.gif" alt="Broad Axe " /></td>
            <td><h2>Broad Axe</h2></td>
            <td>Thirty-inch blade.</td>
            <td>Twelve pounds.</td>
            <td>Sixty miles per hour on impact.</td>
          </tr>
        </table> #p#分页标题#e#
      </body>
    </html>


图11.2  程序清单11.2中的colspan属性使左上角的单元格跨越多列     

    提示:下面是最常用的vertical-align样式属性值:top、middle、bottom、text-top、text-bottom和baseline(用于文本)。这些属性值让你能够灵活地控制表格数据的垂直对齐方式。

    在图11.2的顶部,一个单元格(Description)跨越两列。这是因为该单元格的<th>标签指定了属性colspan="2"。也可用rowspan属性来创建跨越多行的单元格。跨越(spanning)是使单元格扩展到占据表格中多行或多列的过程。Colspan属性使单元格跨越多列;rowspan使单元格跨越多行。

    提示:创建含有跨越多行或多列的单元格的表格时,记住行和列的组织结构可能是最困难的事。通常一个很小的错误就能使整个表格排列错误。编写表格的HTML代码前,先在纸上画出表格,可以节省很多时间,避免造成困惑。也可以使用可视化的网页设计软件来排列表格中的行和列。这使表格的创建容易得多,只要选择的软件(如Microsoft FrontPage或Macromedia Dreamweaver)能够创建格式良好、易于编辑的HTML。

版权声明:本文由驱动中国整理发布,转载需注明出处与原文链接。如有疑问请联系 editor@qudong.com
本文价值 成为第一个评分的人
登录后为本文打分
网友评论0 条评论
正在回复 的评论取消
评论加载中…
🔐

登录后参与互动

评论、点赞均可赚积分
连续签到、邀请好友也有奖励 🎁

电脑端: 微信扫码登录 微信内: 一键登录

微信扫一扫

打开微信「扫一扫」,分享本文到朋友圈或好友