表格的高级应用
细线表格
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table{ border-spacing:0; border-collapse:collapse;}
</style>
</head>
<body>
<table width="600" height="500" border="1" cellpadding="0" cellspacing="0">
<tr>
<td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td>
</tr>
</table>
</body>
</html>
细线表格
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table{ border-collapse:collapse; border:2px double #F00;}
</style>
</head>
<body>
<table width="600" height="500" border="1" cellpadding="0">
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
</table>
</body>
</html>
双线表格
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table{ border-spacingborder:4px solid #CCC;}
</style>
</head>
<body>
<table width="600" height="500" border="2" cellpadding="0">
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
</table>
</body>
</html>
单元格与单元格之间cellspacing 单元格边沿和内容之间的距离 cellpadding
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table{ border:0;}
</style>
</head>
<body>
<table width="600" height="500" border="1" cellspacing="10" cellpadding="0" >
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
</table>
</body>
</html>
rules=row 只显示行线
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table{ border:0;}
</style>
</head>
<body>
<table width="600" height="500" border="1" cellspacing="0" cellpadding="0" rules="rows">
<tr>
<td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td>
</tr>
</table>
</body>
</html>
empty
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/*empty无内容但与阿哥显示和隐藏 显示：show 隐藏:hide*/
table{ border-spacing:2px; padding:50px; empty-cells:hide;}
tr td{ width:50px; height:50px; background:blue; border:1px solid #fff;}
</style>
</head>
<body>
<table width="600" height="500" border="1" cellpadding="0" >
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td style="background:#fff"> </td>
</tr>
</table>
</body>
</html>
双线表格
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
《
</head>
<body>
<table width="600" height="500" border="1" >
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
fieldset{ border:none; border-top:1px solid #eee;}
.font{ font-weight:600;}
h2{font-size:12px; color:#eee; text-align:right;}
legend{ margin-left:20px;}
.box{ width:300px; height:500px; margin:0 auto;}
.qiu{ width:30px; height:15px;}
</style>
</head>
<body>
<h2>*号搜在项目为必填项目</h2>
<div class="box">
<fieldset style="border:1px solid #eee">
<fieldset>
<legend class="font">个人信息</legend><br /><br />
<form>
<label>姓名<input type="text" /></label><br />
<br />
<label>地址<input type="text" /></label><br /><br />
<label>出生</label>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
<select>
<option>Jan</option>
<option>J</option>
<option>Jan</option>
<option>Jan</option>
<option>Jan</option>
<option>Jan</option>
</select>
<select>
<option>1979</option>
<option>1978</option>
<option>1977</option>
<option>1976</option>
</select>
<label>性别</label>
<select>
<option>男</option>
<option>女</option>
</select><br />
<br />
</fieldset>
<fieldset >
<legend class="font">其他信息</legend>
<form action="" method="get">
<fieldset>
<legend>你稀罕这个表单吗？</legend>
<form>
<input type="radio" id="like1" name="like" /><label for="like1">喜欢</label>
<input type="radio" id="like2"name="like"/><label for="like2">不喜欢</label>
</form>
</fieldset>
<fieldset>
<legend>你喜欢什么运动?</legend>
<form action="" method="get">
<input class="qiu" type="chekbox" id="zuqiu" /><label for="zuqiu">足球</label>
<input class="qiu" type="chekbox" id="lanqiu" /><label for="lanqiu">篮球</label>
<input class="qiu" type="chekbox" id="pingpang" /><label for="pingpang">乒乓球</label>
</form>
</fieldset>
<fieldset>
<legend>请写下你的建议？</legend>
<form>
<textarea cols="30" rows="10"></textarea><br />
<br />
<input type="submit" value="提交个人信息"/>
</form>
</fieldset>
</fieldset>
</div>
</body>
</html>
浙公网安备 33010602011771号