以“第十八届中国国际广告节会议注册表”页面为例，其页面效果如图所示。采用11行9列的表格布局来完成页面设计，注册界面使用表单和表单控件来实现。

实现的代码如下图所示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>第十八届中国国际广告节会议注册表</title>
    <style type="text/css">
        body{text-align:center;}
        h1{font-size: 25px;}
        .zhuce{font-size: 14px;text-align: center;width: 840px;margin: 0 auto;background: #f7f7f7;}
        .zhuce td{border: 1px solid #3300cc;padding: 2px 3px;}
        .zhuce .ibg{text-align: left;}
        .zhuce .bbg{padding: 10px 0; font-size: 13px;}
        #bt{width: 100px;height: 35px;background: #99ffcc;} */
    </style>
</head>
<body>
    <h1>第十八届中国国际广告节会议注册表</h1>
    <form>
        <table class="zhuce">
        <tr>
            <td width="100px">参会者姓名</td>
            <td colspan="4" class="ibg" >
                <input name="txtName" type="text">
            </td>
            <td>职务</td>
            <td colspan="3" class="ibg">
                <input name="txtZhiwu" type="text">
            </td>
        </tr>
        <tr>
            <td>工作单位</td>
            <td colspan="8" class="ibg">
                <input name="txtDanwei" type="text" style="width: 500px;">
            </td>
        </tr>
        <tr>
            <td>电话</td>
            <td colspan="2" class="ibg">
                <input name="txtTel" type="text">
            </td>
            <td>传真</td>
            <td colspan="2">
                <input name="txtFax" type="text">
            </td>
            <td cilspan="手机"></td>
            <td class="ibg">
                <input name="txtMobil" type="text">
            </td>
        </tr>
        <tr>
            <td>通讯地址</td>
            <td colspan="6" class="ibg">
                <input name="txtAddress" type="text" style="width: 400px;">
            </td>
            <td>邮编</td>
            <td class="ibg">
                <input name="txtPostCode" type="tetx">
            </td>
        </tr>
        <tr>
            <td>E-mail</td>
            <td colspan="6" class="ibg">
                <input name="txtEmail" type="text" style="width: 180px;">
            </td>
            <td>国家</td>
            <td class="ibg">
                <select name="ddlCountry" id="ddlCountry" style="width: 180px;">
                    <option value="中国" selected>中国</option>
                    <option value="美国">美国</option>
                    <option value="瑞士">瑞士</option>
                    <option value="印度">印度</option>
                    <option value="巴西">巴西</option>
            </td>
        </tr>
        <tr>
            <td>省份</td>
            <td colspan="6" class="ibg">
                <select name="ddlProvice" style="width: 180px;">
                    <option value="请选择">请选择</option>
                    <option value="广东省">广东省</option>
                    <option value="上海市">上海市</option>
                    <option value="北京市">北京市</option>
                    <option value="湖南省">湖南省</option>
            </td>
            <td>城市</td>
            <td class="ibg">
                <input name="txtCity" type="text" style="width: 180px;">
            </td>
        </tr>
        <tr>
            <td colspan="9"><p>会议费标准（人民币）</p></td>
        </tr>
        <tr>
            <td colspan="2">身份 / 时间</td>
            <td colspan="4">2011年9月20日之前注册</td>
            <td colspan="3">2011年9月20日之后注册</td>
        </tr>
        <tr>
            <td colspan="2">中广协会员</td>
            <td colspan="4">
                <input type="radio" name="rbMem" value="rbMem1">1500元
            </td>
            <td colspan="3">
                <input type="radio" name="rbMem" value="rbMem2">1800元
            </td>
        </tr>
        <tr>
            <td colspan="2">非会员</td>
            <td colspan="4">
                <input type="radio" name="rbMem" value="rbMem1">1800元
            </td>
            <td colspan="3">
                <input type="radio" name="rbMem" value="rbMem2">2000元
            </td>
        </tr>
        <tr>
            <td colspan="9" class="bbg">
                <input id="bt" type="submit" name="btnOk" value="提交">
                <input id="bt" type="reset"><br><br>
                <a href="邀请函和注册表2011.doc">第十八届中国国际广告节会议注册表下载</a>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>
``

更多推荐

Web前端开发技术（第3版）储久良 12.6综合实例