Html表格效果

2017-01-30 11:45:55  访问(1697) 赞(0) 踩(0)

  • 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        table.gzTableItem
        {
            border-collapse: separate;
            border-spacing: 1px;
            background-color: #CDCDCD;
        }
        tr.gzTrItem
        {
            background-color: #FFFFFF;
        }
        td.gzTdTitleItem
        {
            background-color: #FFFFFF;
            font-size: 14px;
            font-family: 宋体;
            line-height: 20pt;
            vertical-align: middle;
            line-height: 20pt;
        }
        td.gzTdLeftItem
        {
            background-color: #FBFBFB;
            color: #666666;
            font-size: 14px;
            font-family: 宋体;
            line-height: 20pt;
            vertical-align: middle;
            padding-right: 5px;
        }
        td.gzTdRightItem
        {
            /*background-color: #F0F8FB;*/
            background-color: #FFFFFF;
            font-size: 14px;
            font-family: 宋体;
            line-height: 20pt;
            vertical-align: middle;
            line-height: 20pt;
            padding-left: 5px;
        }
        td.gzTdTextItem
        {
            background-color: #FFFFFF;
            font-size: 14px;
            font-family: 宋体;
            margin-top: 0px;
            padding-top: 0px;
            padding-left: 5px;
        }
    </style>
</head>
<body>
    <h1>
        Html表格效果</h1>
    <br />
    <table class="gzTableItem" cellspacing="0" cellpadding="5" border="0" style="width: 99%;
        font-size: 14px;">
        <tbody>
            <tr class="gzTrItem">
                <td class="gzTdLeftItem" align="right" style="height: 30px; width: 100px;">
                    申请单位：
                </td>
                <td class="gzTdRightItem" colspan="5">
                    <span id="txt_TheName" style="display: inline-block; width: 98%;">编程帮手</span>
                </td>
            </tr>
            <tr class="gzTrItem">
                <td class="gzTdLeftItem" align="right" style="height: 30px;">
                    业务范围：
                </td>
                <td class="gzTdRightItem" colspan="5">
                    <span id="txt_YWFW" style="display: inline-block; width: 98%;"></span>
                </td>
            </tr>
            <tr class="gzTrItem">
                <td valign="top" class="gzTdLeftItem" align="right" style="height: 30px;">
                    单位性质：
                </td>
                <td class="gzTdRightItem" style="width: 170px;">
                    <span id="txt_DWXZ" style="display: inline-block; width: 98%;"></span>
                </td>
                <td valign="top" class="gzTdLeftItem" align="right">
                    成立时间：
                </td>
                <td class="gzTdRightItem" style="width: 170px;">
                    <span id="txt_CLSJ" style="display: inline-block; width: 98%;"></span>
                </td>
                <td valign="top" class="gzTdLeftItem" align="right">
                    资质等级：
                </td>
                <td class="gzTdRightItem" style="width: 170px;">
                    <span id="txt_ZZDJ" style="display: inline-block; width: 98%;"></span>
                </td>
            </tr>
            <tr class="gzTrItem">
                <td class="gzTdLeftItem" align="right" style="height: 30px;">
                    地址：
                </td>
                <td class="gzTdRightItem" colspan="5">
                    <span id="txt_Address" style="display: inline-block; width: 98%;">www.slowx.net</span>
                </td>
            </tr>
            <tr class="gzTrItem">
                <td class="gzTdLeftItem" align="right" style="height: 30px;">
                    邮编：
                </td>
                <td class="gzTdRightItem" colspan="1">
                    <span id="txt_Zip" style="display: inline-block; width: 98%;"></span>
                </td>
                <td class="gzTdLeftItem" align="right" style="height: 30px; width: 90px;">
                    传真：
                </td>
                <td class="gzTdRightItem" colspan="3">
                    <span id="txt_Fax" style="display: inline-block; width: 98%;"></span>
                </td>
            </tr>
            <tr class="gzTrItem">
                <td valign="top" class="gzTdLeftItem" align="right" style="height: 30px;">
                    法定代表人：
                </td>
                <td class="gzTdRightItem">
                    <span id="txt_FDDBR" style="display: inline-block; width: 98%;"></span>
                </td>
                <td valign="top" class="gzTdLeftItem" align="right" style="width: 90px;">
                    职务：
                </td>
                <td class="gzTdRightItem">
                    <span id="txt_ZW" style="display: inline-block; width: 98%;"></span>
                </td>
                <td valign="top" class="gzTdLeftItem" align="right" style="width: 90px;">
                    办公电话：
                </td>
                <td class="gzTdRightItem">
                    <span id="txt_OfficeTel" style="display: inline-block; width: 98%;"></span>
                </td>
            </tr>
            <tr class="gzTrItem">
                <td class="gzTdLeftItem" align="right" style="height: 30px;">
                    手机号码：
                </td>
                <td class="gzTdRightItem" colspan="1">
                    <span id="txt_Mobile" style="display: inline-block; width: 98%;"></span>
                </td>
                <td class="gzTdLeftItem" align="right" style="height: 30px;">
                    电子邮箱：
                </td>
                <td class="gzTdRightItem" colspan="3">
                    <span id="txt_Email" style="display: inline-block; width: 98%;"></span>
                </td>
            </tr>
            <tr class="gzTrItem">
                <td valign="top" class="gzTdLeftItem" align="right" style="height: 30px;">
                    联系人：
                </td>
                <td class="gzTdRightItem">
                    <span id="txt_LXR" style="display: inline-block; width: 98%;"></span>
                </td>
                <td valign="top" class="gzTdLeftItem" align="right">
                    职务：
                </td>
                <td class="gzTdRightItem">
                    <span id="txt_LXRZW" style="display: inline-block; width: 98%;"></span>
                </td>
                <td valign="top" class="gzTdLeftItem" align="right">
                    办公电话：
                </td>
                <td class="gzTdRightItem">
                    <span id="txt_LXROfficeTel" style="display: inline-block; width: 98%;"></span>
                </td>
            </tr>
            <tr class="gzTrItem">
                <td valign="top" class="gzTdLeftItem" align="right" style="height: 30px;">
                    手机号码：
                </td>
                <td class="gzTdRightItem">
                    <span id="txt_LXRMobile" style="display: inline-block; width: 98%;"></span>
                </td>
                <td valign="top" class="gzTdLeftItem" align="right">
                    电子邮箱：
                </td>
                <td class="gzTdRightItem">
                    <span id="txt_LXREmail" style="display: inline-block; width: 98%;"></span>
                </td>
                <td valign="top" class="gzTdLeftItem" align="right">
                    QQ：
                </td>
                <td class="gzTdRightItem">
                    <span id="txt_LXRQQ" style="display: inline-block; width: 98%;"></span>
                </td>
            </tr>
            <tr class="gzTrItem">
                <td class="gzTdLeftItem" align="right" style="height: 30px;">
                    单位简介：
                </td>
                <td class="gzTdRightItem" colspan="5">
                    <span id="txt_DWJJ" style="display: inline-block; width: 98%;">www.slowx.net</span>
                </td>
            </tr>
            <!-- 下面信息不显示 -->
        </tbody>
    </table>
</body>
</html>


标签：Html表格效果 

上一条：

下一条：


 

相关评论

评论加载中……
 

发表评论

类型：
内容：
  (Alt+Enter)
 
  ┈全部┈  
 
（显示全部分类）