摒弃table,不是指单纯的使用div+css,而是使用语义化的Xhtml页面结构+与结构隔离的css样式:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html语义化-form表单</title>
<style type="text/css">
form{
background-color:#ccc;
}
fieldset{
border:none;
padding:0;
margin:0;
}
legend{
display:none;
}
p{
margin:0;
padding:0;
}
</style>
</head>
<body>
<!-- 语义化表单 -->
<form action="" target="_self" method="post">
<fieldset>
<legend>登陆表单</legend>
<p>
<label for="userName">用户名</label>:<input type="text" id="userName"/>
</p>
<p>
<label for="password">密 码</label>:<input type="text" id="password"/>
</p>
<input type="submit" value="登陆"/>
</fieldset>
</form>
<br /><br />
<!-- 非语义化表单 -->
<form action="" target="_self" method="post">
<div>
用户名:<input type="text" id="userName"/>
</div>
<div>
密 码:<input type="text" id="password"/>
</div>
<input type="submit" value="登陆"/>
</form>
</body>
</html>
两个表单,一样的表现,不一样的结构,不一样的制作水准;
如果你不是搜索引擎或者万众瞩目的网站,请不要吝啬有助于语义化的代码。