表格的高级应用

细线表格

<!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{ 50px; height:50px; background:blue; border:1px solid #fff;}
</style>
</head>

<body>
<table width="600" height="500" border="1" cellpadding="0" >
	<tr>
    	<td>&nbsp; </td>
　　　　　<td>&nbsp; </td>
　　　　　　<td>&nbsp; </td>
    </tr>
    <tr>
    	<td>&nbsp; </td>
　　　　　　<td></td>
　　　　　　<td>&nbsp; </td>
    </tr>
    <tr>
    	<td>&nbsp; </td>
　　　　<td>&nbsp; </td>
　　　　<td style="background:#fff">&nbsp; </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>&nbsp; </td>
　　　　　　<td>&nbsp; </td>
　　　　　　<td>&nbsp; </td>
　　　　　　<td>&nbsp; </td>
    </tr>
    <tr>
    	<td>&nbsp; </td>
　　　　　<td>&nbsp; </td>
　　　　　　<td>&nbsp; </td>
　　　　　　<td>&nbsp; </td>
    </tr>
    <tr>
    	<td>&nbsp; </td>
　　　　　　<td>&nbsp; </td>
　　　　　　<td>&nbsp; </td>
　　　　　　<td>&nbsp; </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{ 300px; height:500px; margin:0 auto;}
.qiu{ 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>

　　

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/mingjixiaohui/p/5436438.html