现在的位置: 首页 > 综合 > 正文

《HTML5 从入门到精通–7.7.3 表格的表尾标记——tfoot》

2013年09月26日 ⁄ 综合 ⁄ 共 1381字 ⁄ 字号 评论关闭

<tfoot>标记用于定义表尾样式。

语法

<tfoot bgcolor="颜色代码" align="水平对齐方式" valign="垂直对齐方式">

语法解释

  在该语法中,bgcolor、align和valign参数的取值范围与<thead>标记中的相同。一个表元素中只能有一个<tfoot>标记。

例7.22  实例代码

<html>
<head>
<title>设置表尾的样式</title>
</head>
<body> 
 <table align="center" border="1" bordercolor="#ffcc99" cellpaddng="3"  width="550"

height="180">
 <caption>某单位物品管理表</caption>
        <thead bgcolor="#ff0000" align="center" valign="middle">
        <tr>
         <th>物品名</th>
         <th>类型</th>
         <th>领取人</th>
         <th>领取人所属部门</th>
         <th>数量</th>
           </tr>
         </thead>
         <tbody bgcolor="#cc99cc" align="left" valign="bottom">
           <tr>
               <td>圆珠笔</td>
               <td>文具</td>
               <td>李小米</td>
               <td>PHP</td>
               <td>1</td>
          </tr>
           <tr>
               <td>鼠标</td>
               <td>电脑配件</td>
               <td>樊晓东</td>
               <td>ASP.NET</td>
               <td>1</td>
          </tr>
           <tr>
               <td>打印纸</td>
               <td>办公耗材</td>
               <td>刘小新</td>
               <td>JAVA</td>
               <td>30</td>
          </tr>
       </tbody>
       <tfoot bgcolor="#00ccff" align="right" valign="middle">
            <tr>
              <td colspan="5">表格创建日期:2013-9-28</td>
            </tr>
       </tfoot>
    </table>
</body>
</html>

 

运行这段代码,效果如图7.31所示。

HTML5

                                                                   图7.31  设计表尾样式

 

本文由
http://www.91duofanli.com
提供技术支持~

【上篇】
【下篇】

抱歉!评论已关闭.