效果图如下：
1、构思：
首先，这事一个表格结构的注册表，总体分为三部分，1.会员登录名和密码，2.姓名和联系方式，3.公司名称和主营业务；我们可以把表格分成表头，表身，表尾；用代码实现为：
先创建一个表格分成三部分：
<table width="1000" align="center" cellpadding="10" cellspacing="0"><!--表格--> <thead> </thead> <tbody> </tbody> <tfoot> </tfoot> </table>
说明：<table></table>标签创建出一个大的表格，其中<table>标签的几个重要的元素，width控制表格的宽度；align控制表格的对齐方式；cellpadding控制行中文字在表格中和表格上下边框的距离，cellpadding控制单元格之间的空白。
2、在表格里面使用几个重要的标签进行表格的分解
<tr> 绘制表格的行
<th>表头单元格，用来绘制表头，显示的字会比较大一点。
<td>绘制表格的列
<input>根据不同type属性，来创建文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
<style>创建CSS样式
3、跨行跨列
如果需要将内容横跨多个行或列，使用 colspan属性来合并行，和 rowspan 属性来合并列。
最后完整代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>day1注册页面</title> <script type="text/javascript"> function msg(){ alert("用户名检测完成"); } </script> <style type="text/css"> /**设置table颜色**/ table,td,th{ border:1px solid #F2F2F2; } /**最后的提交按钮**/ #submitbutton{ height:30px; width:100px; background-color:#00CD00; color:white;/**字体颜色**/ font-size:20px; } </style> </head> <body> <table width="1000" align="center" cellpadding="10" cellspacing="0"><!--表格--> <thead><!-- 表头 --> <tr style="background:#F8F8FF" height="30"><!--tr 为行 --> <th align="left" colspan="3">1.会员登录名和密码</th><!-- th定义表头 --> </tr> <tr> <td width="120" align="right"> 用户名： </td> <td style="color:red"> <input type="text"> * </td> <td width="500" style="color:#1E90FF"> <input type="button" value="用户名检测" onclick="msg()"/> 5-15位，请使用英文(a-z、A-Z)、数字(0-9) </td> </tr> <tr> <td width="120" align="right"> 密码： </td> <td style="color:red"> <input type="text"/>* </td> <td width="500" align="left" style="color:#1E90FF"> 5-15位，请使用英文(a-z)、数字(0-9)注意区分大小写：<br> 密码不能与登录名相同，易记，难猜 </td> </tr> <tr> <td width="120" align="right"> 再次输入密码： </td> <td style="color:red"> <input type="text"/>* </td> <td width="500" style="color:#1E90FF"> 两次输入密码必须一致 </td> </tr> </thead> <tbody><!-- 表身 --> <tr style="background:#F8F8FF"> <th align="left" colspan="3">2.姓名和联系方式</th> </tr> <tr> <td align="right"> 真实姓名： </td> <td style="color:red"> <input type="text"/>* </td> <td> <input type="radio" name="sex" value="先生"/>先生 <input type="radio" name="sex" value="女士"/>女士 </td> </tr> <tr> <td align="right"> 电子邮箱： </td> <td style="color:red"> <input type="email"/>* </td> <td> <h style="color:red">非常重要！</h><br/> <h style="color:#1E90FF">这是客户与您联系的首选方式，请一定填写真实。</h> </td> </tr> <tr> <td align="right"> 固定电话： </td> <td style="color:red"> <input type="text"/>* </td> <td style="color:#1E90FF"> 区号+电话号码 </td> </tr> <tr> <td align="right"> 公司所在地： </td> <td colspan="2"> <select style="width:70px;height:25px"> <option>北京</option> <option>广州</option> <option>湛江</option> <option>长沙</option> </select> <select style="width:70px;height:25px"> <option>北京</option> <option>广州</option> <option>湛江</option> <option>长沙</option> </select> </td> </tr> <tr> <td align="right"> 街道地址： </td> <td colspan="2" style="color:red"> <input type="text" style="height:20px;width:500px"/>* <h style="color:#1E90FF">填写县区门牌号</h> </td> </tr> <tr> <td align="right"> 传真号码： </td> <td colspan="2"> <input type="tel"/> </td> </tr> <tr> <td align="right"> 手机号码： </td> <td colspan="2"> <input type="tel"/> </td> </tr> <tr> <td align="right"> 邮政编码： </td> <td colspan="2"> <input type="text"/> </td> </tr> </tbody> <tfoot><!-- 表尾 --> <tr style="background:#F8F8FF"> <th align="left" colspan="3">3.公司名称和主营业务</th> </tr> <tr> <td align="right"> 贵公司名称： </td> <td style="color:red"> <input type="text"/>* </td> <td style="color:#1E90FF"> 请填写在工商局注册的公司/商号全称；<br/> 无商号的个体经营者填写执照上的姓名，如：张三（个体经营） </td> </tr> <tr> <td align="right"> 你的职位： </td> <td style="color:red"> <input type="text"/>* </td> <td> </td> </tr> <tr> <td align="right"> 主营行业： </td> <td> <select> <option>电子电工</option> <option>学生</option> <option>工程师</option> </select> </td> <td style="color:#1E90FF"> 请正确选择，您会收到该行业、该产品的供求信息 </td> </tr> <tr> <td align="right"> 主营产品/服务： </td> <td colspan="2" style="color:red"> <input type="text"/>* <h style="color:#1E90FF">3个主要相关产品名/服务名，最少要填一个。例如：太阳帽、布料、拉链</h> </td> </tr> <tr> <td align="right"> 公司网址： </td> <td colspan="2"> <input type="url" style="height:18px;width:300px"/> </td> </tr> <tr> <td> </td> <td colspan="2"> <input type="submit" id="submitbutton" value="确认提交"/> </td> </tr> </tfoot>> </table> </body> </html>文章来源: html注册表