细线表格
<!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> </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{ 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>