表格内部的对齐和跨度

  • 来源: 学赛网 作者: 若水   2008-04-25/16:43
  •    默认情况下,放在表格单元格中的内容将水平左对齐,并垂直居中。可用样式属性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。


    评论 {{userinfo.comments}}

    {{money}}

    {{question.question}}

    A {{question.A}}
    B {{question.B}}
    C {{question.C}}
    D {{question.D}}
    提交

    驱动号 更多