传统的table布局和css布局的比较
来源：互联网 发布：拉萨有4g网络吗 编辑：程序博客网 时间：2024/06/06 03:28
1.table布局
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title></title>
</head>
<form action="#" method="get/post" id="">
<table align="center" border="0"style="width:800px">
<tr style="height:35px;">
<td colspan="2"><img src="dot.png"/><font size="5">基本个人信息（<img src="53.png"/>为必填)</font></td></tr>
<tr style="width:800px; height:35px;">
<td style="width:130px;"><img src="53.png"/>姓 名</td>
<td><input type="text" size="20" id="myinput_1" /></tr>
<tr style=" height:35px;">
<td><img src="53.png"/>性 别</td>
<td>男<input type="radio" id="myinput_2" name="anniu" />
女<input type="radio" id="myinput_3" name="anniu"/></tr>
<tr style=" height:35px;">
<td><img src="53.png"/>出身日期</td>
<td><select name="year"id="year">
<option>1980</option>
</select>年
<select name="month"id="month">
<option>01</option>
</select>月
<select name="day"id="day">
<option>01</option>
</select>日</td></tr>
<tr style=" height:35px;">
<td>国家或地区</td>
<td><select name="guojia"id="guojia"><option>中国大陆</option><option>2</option>
</select></td>
<td style="width:200px;">户口</td>
<td><select style="width:150px;" name="guojia"id="guojia">
<option>北京</option><option>成都</option><option>上海</option><option>天津</option><option>香港</option><option>澳门</option><option>深圳</option>
</select></td></tr>
<tr style=" height:35px">
<td><img src="53.png"/>身份证号</td>
<td><input type="text" id="myinput_4" /></td>
<td><img src="53.png"/>证件类型</td>
<td><select style="width:150px;" name="zhengjianleixing"id="zhengjianleixing">
<option>身份证</option></select></td></tr>
<tr style=" height:35px;">
<td>目前年薪</td>
<td><select style="width:150px;" name="yearyuan"id="yearyuan">
<option>--请输入--</option></select>/年</td>
<td>币种</td>
<td><select style="width:150px;" name="bizhong"id="bizhong">
<option>人民币</option>
</select></td></tr>
<tr style=" height:36px;">
<td><img src="53.png"/>工作年限</td>
<td><select style="width:150px;"name="workyear"id="workyear">
<option>--请选择--</option>
<option>一年以下</option>
<option>一至三年</option>
<option>三年以上</option></select></td></tr>
<tr><tr style=" height:50px;">
<td><img src="53.png"/>居住地</td>
<td><select style="width:100px;"name="ID1"id="ID1">
<option>北京市</option></select>    <select style="width:100px;"name="sheng"id="sheng">
<option>北京市</option></select></td>
<td colspan="2"><font color=#ff9900>这项中没有的城市，选省即可</font></td></tr>
<tr style=" height:35px;">
<td><img src="53.png"/>Email</td>
<td><input type="text" id="myinput_5" /></td></tr>
<tr style=" height:35px;">
<td><img src="53.png"/>首选联系方式</td>
<td colspan="2"><select name="phone"id="phone">
<option>移动电话<option></select>
<lable for="oID"></labie>
<input type="text" id="oID" size="6" value="086" readonly="readonly"/>
<lable for="oID">-</labie>
<input type="text" id="oID_1" size="20" value="手机号码" readonly="readonly"/></td>
<td><a href="#"><font color=#000000>添加联系方式</font></a></td></tr>
<tr style="hegiht:35px">
<td>地址</td>
<td style="width:150px; height:35px;"colspan="2"><input type="text" size="60" name="myinput_7"/></td></tr>
<tr style="hegiht:35">
<td style="width:100">邮编</td>
<td><input type="text"size="6" name="myinput_8"/></td>
<td colspan="2"style="width:300px;"><font color=#ff9900>地址和邮政编码请同时填写（香港：000000)</font></td></tr>
<tr style="hegiht:35">
<td>在线联系</td></tr>
<tr style="hegiht:35">
<td>旺旺（淘宝版）ID</td>
<td style="width:70px;"><input type="text"name="myinput_9"/></td>
<td colspan="2" style="width:300px;height:35px;"><font color=#ff9900>留下旺旺（淘宝版)ID可以方便企业在线联系您</font></td>
</tr></table>
<table align="center" border="0"style="width:800px">
<tr style="height:35px;">
<td colspan="2"><div style="width:740px;height:0px;border-top:1px black dashed;"></td></tr>
<tr style="height:35px;">
<td style="width:200px"><img src="dot.png"/><font size=5>求职意向</font></td></tr>
<tr style="height:35px;">
<td>工作类型</td>
<td><select><option>全职</option> <option>兼职</option></select></td></tr>
<tr style="height:50px;">
<td>地点</td>
<td><input type="button"value="选择/修改"/><td/></tr>
<tr style="height:50px;">
<td>行业</td>
<td><input type="button"value="选择/修改"/><td/></tr>
<tr style="height:50px;">
<td>职能</td>
<td><input type="button"value="选择/修改"/><td/></tr>
<tr style="height:50px;">
<td>工资</td>
<td><select><option>面议</option> <option>10000以上</option></select><td/></tr>
<tr style="height:50px;">
<td colspan="2"><div style="width:740px;height:0px;border-top:1px black dashed;"></td></tr>
</table>
<table align="center" border="7"style="width:800px">
<tr style="hegiht:50px;">
<td><img src="dot.png"/><font size=5>自我评价</font></td></tr>
<tr style="hegiht:50px;">
<td style="width:600px">请在输入框中输入您对自己的简短评价，字数在150字以内。</td></tr>
<tr>
<td colspan="2">请简明扼要的说明您最大的优势是什么，避免使用一些空洞老套的话。范例一：范例二</td></tr>
<tr>
<td><textarea style="width:600px; height:200px;" id="comment"></textarea></td></tr>
<tr style="height:50px;">
<td align="center"><a href="#" style="color:#ffffff;background-color:#ff9900;size=30px">上一步</div></a></font></a> <a href="#" style="color:#ffffff;background-color:#ff9900;size=30px">下一步</a></td>
<td></td></tr>
</table>
</from>
</body>
</html>
2 css布局
<!DOCTYPE html>
<html>
<head>
<title>51表单</title>
<meta content="text/html"charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css1/master.css"/>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="content_1">
<img src="images/dot.png" />基本个人信息（<img src="images/53.png"/>为必填）<br/>
<span><img src="images/53.png"id="xing"/>姓 名</span>
<input type="text" id="myinput_1" /> <br/>
<span><img src="images/53.png"/>性 别</span>
男<input type="radio" id="myinput_2" name="anniu" />女<input type="radio" id="myinput_3" name="anniu"/><br/>
<span><img src="images/53.png"/>出身日期</span>
<select name="year"id="year">
<option>1980</option>
</select>年
<select name="month"id="month">
<option>01</option>
</select>月
<select name="day"id="day">
<option>01</option>
</select>日 <br/>
</div>
<div id="content_2">
<span>国家或地区</span>
<select id="guojia" name="guojia">
<option>中国大陆</option>
</select><br/>
<span><img src="images/53.png"/>身份证号</span><input type="text" id="myinput_4" /><br/>
<span>目前年薪</span>
<select name="yearyuan"id="yearyuan">
<option>--请输入--</option>
</select>/年<br/>
</div>
<div id="content_3">
<span>户口</span>
<select name="diqu" id="diqu"style="width:100px;">
<option>北京</option>
<option>成都</option>
<option>上海</option>
<option>天津</option>
<option>香港</option>
<option>澳门</option>
<option>深圳</option>
</select> <br/>
<span><img src="images/53.png">证件类型</span>
<select name="zhengjianleixing"id="zhengjianleixing" style="width:100px;">
<option>身份证</option>
</select> <br/>
<span>币种</span>
<select name="bizhong"id="bizhong"style="width:100px;">
<option>人民币</option>
</select> <br/>
</div>
<div id="content_"4>
<span><img src="images/53.png"/>工作年限</span>
<select name="workyear"id="workyear">
<option>--请选择--</option>
<option>一年以下</option>
<option>一至三年</option>
<option>三年以上</option></select><br/>
<span><img src="images/53.png"/>居住地</span>
<select name="ID1"id="ID1">
<option>北京市</option>
</select><select name="sheng"id="sheng">
<option>北京市</option>
</select><lable for="zi">这项中没有的城市，选省即可</lable><br/>
<span><img src="images/53.png"/>Email</span>
<input type="text"id="myinput_5" /> <br/>
<span><img src="images/53.png"/>首选联系方式</span>
<select name="phone"id="phone">
<option>移动电话<option>
</select>
<input type="text" id="oID" size="6" value="086" readonly="readonly"/>
<input type="text" id="oID_1" size="21" value="手机号码"/>
<a href="#"id="add_number">添加联系方式</a><br/>
<span>地址</span>
<input type="text" size="48" name="myinput_7"/> <br/>
<span>邮编</span>
<input type="text"size="6" name="myinput_8"/><lable for="zi">地址和邮政编码请同时填写（香港：000000)</lable><br/>
<span>在线联系</span><br/>
<span>旺旺（淘宝版）ID</span>
<input type="text"name="myinput_9"/><lable for="zi">留下旺旺（淘宝版)ID可以方便企业在线联系您</labe><br/>
</div>
<div id="content_5">
<p style="width:700px;height:1px;border-top:1px black dashed;"/>
<div id="content_8">
<img src="images/dot.png"/><font size=5>求职意向</font><br/>
<p>工作类型</p>
<select><option>全职</option> <option>兼职</option></select> <br/>
<p>地点</p>
<input type="button" id="button_1"value="选择/修改"/>（可多选，最多5项）<br/>
<p>行业</p>
<input type="button"id="button_2"value="选择/修改"/>（可多选，最多5项）<br/>
<p>职能</p>
<input type="button"id="button_3"value="选择/修改"/>（可多选，最多5项）<br/>
<p>工资</p><select><option>面议</option> <option>10000以上</option></select>
</div>
<p style="width:700px;height:1px;border-top:1px black dashed;"/>
<div id="content_6">
<img src="images/dot.png"/><font size=5>自我评价</font><br/>
请在输入框中输入您对自己的简短评价，字数在150字以内。<br/>
请简明扼要的说明您最大的优势是什么，避免使用一些空洞老套的话。范例一：范例二：<br/>
<textarea style="width:650px; height:200px;" id="comment">
</textarea><br/>
<div align="center">
<a href="#" id="last_step"align:center;>上一步</a>
<a href="#" id="next_step">下一步</a>
</div>
</div>
</body>
</html>
css部分
#container{ width:700px; margin:auto;}
#header{width:700px;height:100px;}
#content_1 {width:700px;height:140px; float:left;line-height:35px;}
#content_3 {width:350px;height:105px; float:left;line-height:35px;}
#content_2 {width:350px;height:105px; float:left;line-height:35px;}
#content_4 {width:700px;height:400px; float:left;line-height:35px;}
#content_5{width:700px;height:300px; float:left;line-height:50px;}
#content_6 {width:650px;height:250px; float:left;}
#add_number {color:#000000;padding:10px;margin-left:10px;}
#last_step { color:#ffffff;background-color:#ff9900;font-size:20;text-decoration:none;margin:10px;padding:10px;}
#next_step { color:#ffffff;background-color:#ff9900;font-size:20;text-decoration:none;margin:10px;padding:10px;}
span{padding-left:0px;width:9em;display:inline-block;text-align:left;line-height:35px;margin-right:10px;}
#content_5 p {padding-right:50px;width:6em;display:inline-block;text-align:left;line-height:35px;}
#button_1{font-size:20;font-weigh:200;width:200px;color:#000000;background-color:#ffffff;padding:10px;margin:0px;}
#button_2{font-size:20;font-weigh:200;width:200px;color:#000000;background-color:#ffffff;padding:10px;margin:0px;}
#button_3{font-size:20;font-weigh:200;width:200px;color:#000000;background-color:#ffffff;padding:10px;margin:0px;}
lable{padding:0px;margin-left:5px;color:#ff9900;}
- 传统的table布局和css布局的比较
- DIV+CSS布局与table布局的比较 区别
- table和div布局的比较
- DIV+CSS布局和TABLE布局的优缺点讲解
- DIV+CSS布局和Table布局对比
- 基于display:table的CSS布局
- 基于display:table的CSS布局
- css之table布局的优缺点
- 【转】基于display:table的CSS布局
- 基于display:table的CSS布局
- 基于display:table的CSS布局
- 基于display:table的CSS布局
- 基于display:table的CSS布局
- table布局与DIV+CSS布局的区别
- 采用CSS+DIV进行网页重构相对与传统的TABLE网页布局具有的优势
- 传统table开发和当前流行的div+css开发模式的比较
- css传统布局[下]
- css传统布局
- hibernate中lazy的使用
- zoj 3635 Cinema in Akiba（树状数组+二分）
- 微分方程的Matlab解法
- Java多线程之~~~Fork/Join框架的同步和异步
- PLSQL基础知识
- 传统的table布局和css布局的比较
- junit in action读书笔记
- linux守护进程
- 【uva】10494 If We Were a Child Again
- 第八届湖南省赛I题 Collecting Coins(BFS)
- oradebug 推进SCN
- codechef Chef and Left-Right
- JAVAEE基础
- C/C++内存分配
