搜索|收藏|地图|订阅|图片|论坛|商城
  当前位置 :| 首页>软件>软件学院>CSS>应用技巧>

表格内部的对齐和跨度

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

最新评论共有 0 位网友发表了评论
发表评论
评论内容:不能超过250字,需审核,请自觉遵守互联网相关政策法规。
用户名: 密码:
匿名?