当前位置： 代码迷 >> HTML/CSS >> css背景色跟table样式，一些参考
  详细解决方案

css背景色跟table样式，一些参考

热度：857   发布时间：2012-08-29 08:40:14.0
css背景色和table样式，一些参考
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"utf-8" /> 
<title>坏狼安全网-漂亮CSS Tables</title> 
</head> 
<style type="text/css"> 
/* CSS Document */ 
 
body { 
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
color: #4f6b72; 
background: #E6EAE9; 
} 
 
a { 
color: #c75f3e; 
} 
 
#mytable { 
width: 700px; 
padding: 0; 
margin: 0; 
} 
 
caption { 
padding: 0 0 5px 0; 
width: 700px; 
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
text-align: right; 
} 
 
th { 
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
color: #4f6b72; 
border-right: 1px solid #C1DAD7; 
border-bottom: 1px solid #C1DAD7; 
border-top: 1px solid #C1DAD7; 
letter-spacing: 2px; 
text-transform: uppercase; 
text-align: left; 
padding: 6px 6px 6px 12px; 
background: #CAE8EA  no-repeat; 
} 
/*power by www.winshell.cn*/ 
th.nobg { 
border-top: 0; 
border-left: 0; 
border-right: 1px solid #C1DAD7; 
background: none; 
} 
 
td { 
border-right: 1px solid #C1DAD7; 
border-bottom: 1px solid #C1DAD7; 
background: #fff; 
font-size:11px; 
padding: 6px 6px 6px 12px; 
color: #4f6b72; 
} 
/*power by www.winshell.cn*/ 
 
td.alt { 
background: #F5FAFA; 
color: #797268; 
} 
 
th.spec { 
border-left: 1px solid #C1DAD7; 
border-top: 0; 
background: #fff no-repeat; 
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
} 
 
th.specalt { 
border-left: 1px solid #C1DAD7; 
border-top: 0; 
background: #f5fafa no-repeat; 
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
color: #797268; 
} 
/*---------for IE 5.x bug*/ 
html>body td{ font-size:11px;} 
body,td,th { 
font-family: 宋体, Arial; 
font-size: 12px; 
} 
</style> 
<body> 
<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple 
 
PowerMac G5 series"> 
<caption> </caption> 
<tr> 
<th scope="col">姓名</th> 
<th scope="col">年龄</th> 
<th scope="col">电话</th> 
<th scope="col">居住地点</th> 
</tr> 
<tr> 
<td class="row">badwolf</td> 
<td class="row">100</td> 
<td class="row">010-110</td> 
<td class="row">中国北京</td> 
</tr> 
</table> 
 
</body> 
</html>

?一些常用的好看的web背景色

<html> 
<head> 
<title>web2.0 color</title> 
<style type="text/css"> 
body{ 
margin:20px; 
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
font-size:12px; 
} 
.style1{ 
width: 800px; 
height: 100px; 
margin: 0px auto; 
margin-bottom:20px; 
border:1px solid #96C2F1; 
background-color: #EFF7FF 
} 
.style1 h5{ 
margin: 1px; 
background-color: #B2D3F5; 
height: 24px; 
} 
 
.style2{ 
width: 800px; 
height: 100px; 
margin: 0px auto; 
margin-bottom:20px; 
border:1px solid #9BDF70; 
background-color: #F0FBEB 
} 
.style2 h5{ 
margin: 1px; 
background-color: #C2ECA7; 
height: 24px; 
} 
 
.style3{ 
width: 800px; 
height: 100px; 
margin: 0px auto; 
margin-bottom:20px; 
border:1px solid #BBE1F1; 
background-color: #EEFAFF 
} 
 
.style4{ 
width: 800px; 
height: 100px; 
margin: 0px auto; 
margin-bottom:20px; 
border:1px solid #CCEFF5; 
background-color: #FAFCFD 
} 
 
.style5{ 
width: 800px; 
height: 100px; 
margin: 0px auto; 
margin-bottom:20px; 
border:1px solid #FFCC00; 
background-color: #FFFFF7 
} 
 
.style6{ 
width: 800px; 
height: 100px; 
margin: 0px auto; 
margin-bottom:20px; 
border:1px solid #92B0DD; 
background-color: #FFFFFf 
} 
.style6 h5{ 
margin: 1px; 
background-color: #E2EAF8; 
height: 24px; 
} 
 
.style7{ 
width: 800px; 
height: 100px; 
margin: 0px auto; 
margin-bottom:20px; 
border:1px solid #A9C9E2; 
background-color: #E8F5FE 
} 
 
.style8{ 
width: 800px; 
height: 100px; 
margin: 0px auto; 
margin-bottom:20px; 
border:1px solid #E3E197; 
background-color: #FFFFDD 
} 
 
.style9{ 
width: 800px; 
height: 100px; 
margin: 0px auto; 
margin-bottom:20px; 
border:1px solid #ADCD3C; 
background-color: #F2FDDB 
} 
 
.style10{ 
width: 800px; 
height: 100px; 
margin: 0px auto; 
margin-bottom:20px; 
border:1px solid #F8B3D0; 
background-color: #FFF5FA 
} 
 
 
 
.style11{ 
width: 800px; 
height: 100px; 
margin: 0px auto; 
margin-bottom:20px; 
border:1px solid #D3D3D3; 
background-color: #F7F7F7 
} 
 
.style12{ 
width: 800px; 
height: 100px; 
margin: 0px auto; 
margin-bottom:20px; 
border:1px solid #BFD1EB; 
background-color: #F3FAFF 
} 
 
.style13{ 
width: 800px; 
height: 100px; 
margin: 0px auto; 
margin-bottom:20px; 
border:1px solid #FFDD99; 
background-color: #FFF9ED 
} 
 
.style14{ 
width: 800px; 
height: 100px; 
margin: 0px auto; 
margin-bottom:20px; 
border:1px solid #CACAFF; 
background-color: #F7F7FF 
} 
 
.style15{ 
width: 800px; 
height: 100px; 
margin: 0px auto; 
margin-bottom:20px; 
border:1px solid #A5B6C8; 
background-color: #EEF3F7 
} 
.style16{ 
width: 800px; 
height: 100px; 
margin: 0px auto; 
margin-bottom:20px; 
border:1px solid #CEE3E9; 
background-color: #F1F7F9 
} 
 
.style17{ 
width: 800px; 
height: 100px; 
margin: 0px auto; 
margin-bottom:20px; 
border:1px solid #CAE3FF; 
background-color: #F4F9FF 
} 
 
.style18{ 
width: 800px; 
height: 100px; 
margin: 0px auto; 
margin-bottom:20px; 
border:1px solid #C9D9EE; 
background-color: #ECF8FF 
} 
 
.style19{ 
width: 800px; 
height: 100px; 
margin: 0px auto; 
margin-bottom:20px; 
border:1px solid #5C9CC0; 
background-color: #F2FAFF 
} 
 
h5{color:#CCCCCC;margin-left:680px} 
a{color:#CCCCCC;text-decoration:none} 
a:hover{color:#666666;text-decoration:underline} 
</style> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> 
 
<body> 
 
<div class="style2"><h5></h5></div> 
<div class="style6"><h5></h5></div> 
<div class="style3"></div> 
<div class="style4"></div> 
<div class="style5"></div> 
<div class="style7"></div> 
<div class="style8"></div> 
<div class="style9"></div> 
<div class="style10"></div> 
<div class="style11"></div> 
<div class="style12"></div> 
<div class="style13"></div> 
<div class="style14"></div> 
<div class="style15"></div> 
<div class="style16"></div> 
<div class="style17"></div> 
<div class="style18"></div> 
<div class="style19"></div> 
</body> 
</html>

?

?

一些表格样式：

table1.html

<head>
<title></title>
<link rel="stylesheet" href="table.css" type="text/css" media="screen" />
</head>
<body>
<table class="admintable" width="100%">
   <tr>
     <th class="adminth">标题&lt;th&gt;</th>
     <th class="adminth">标题&lt;th&gt;</th>
     <th class="adminth">标题&lt;th&gt;</th>
     <th class="adminth">标题&lt;th&gt;</th>
   </tr>
   <tr>
     <td class="admincls0">内容1</td>
     <td class="admincls0">内容1</td>
     <td class="admincls0">内容1</td>
     <td class="admincls0">内容1</td>
   </tr>
   <tr>
     <td class="admincls1">内容1</td>
     <td class="admincls1">内容1</td>
     <td class="admincls1">内容1</td>
     <td class="admincls1">内容1</td>
   </tr>
   <tr>
     <td class="admincls0">内容1</td>
     <td class="admincls0">内容1</td>
     <td class="admincls0">内容1</td>
     <td class="admincls0">内容1</td>
   </tr>
   <tr>
     <td class="admincls1">内容1</td>
     <td class="admincls1">内容1</td>
     <td class="admincls1">内容1</td>
     <td class="admincls1">内容1</td>
   </tr>
</table>
<p>&nbsp;</p>
<table width="245" height="241" border="1" cellspacing="0" bordercolor="#99BCFC">
   <tr>
     <th class="adminth_s2" width="57" scope="row">标题</th>
     <td width="178" bgcolor="#EAEAEA"><p>
       <input name="textfield" type="text" id="textfield" size="25" />
     </p>     </td>
   </tr>
   <tr>
     <th class="adminth_s2" scope="row">标题</th>
     <td bgcolor="#EAEAEA"><p>
       <input name="textfield2" type="text" id="textfield2" size="25" />
     </p>     </td>
   </tr>
   <tr>
     <th class="adminth_s2" scope="row">标题</th>
     <td bgcolor="#EAEAEA"><p>
       <input name="textfield3" type="text" id="textfield3" size="25" />
     </p>     </td>
   </tr>
   <tr>
     <th class="adminth_s2" scope="row">标题</th>
     <td bgcolor="#EAEAEA"><p>
       <input name="fileField" type="file" id="fileField" size="15" />
     </p>     </td>
   </tr>
   <tr>
     <th class="adminth_s2" scope="row">标题</th>
     <td bgcolor="#EAEAEA"> <p>
       <textarea name="textarea" id="textarea" cols="23" rows="6"></textarea>
     </p>     </td>
   </tr>
</table>
<p>&nbsp;</p>
<table width="200" class="admintable_s2"   cellspacing="0">
   <tr>
     <td class="admintd">标题</td>
     <td>内容</td>
   </tr>
   <tr>
     <td class="admintd">标题</td>
     <td>内容</td>
   </tr>
   <tr>
     <td class="admintd">标题</td>
     <td>内容</td>
   </tr>
</table>
<p>&nbsp;</p>
<table width="200" class="stage" cellspacing="0">
   <tr>
     <td colspan="2" class="stagetd">标题内容stagetd</td>
   </tr>
   <tr class="stagetr_tr1">
     <td>内容</td>
     <td>内容</td>
   </tr>
   <tr class="stagetr_tr2">
     <td>内容</td>
     <td>内容</td>
   </tr>
   <tr class="stagetr_tr1">
     <td>内容</td>
     <td>内容</td>
   </tr>
   <tr class="stagetr_tr2">
     <td>内容</td>
     <td>内容</td>
   </tr>
</table>
<p>&nbsp;</p>
</body>
</html>

?

?

table2.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>Top 10 Express Table Designs - Smashing Magazine Source</title>
<style type="text/css"> 
<!--
@import url("style.css");
-->
</style>
</head>
<body>
<table id="hor-minimalist-a" summary="Employee Pay Sheet">
    <thead>
    	<tr>
        	<th scope="col">Employee</th>
            <th scope="col">Salary</th>
            <th scope="col">Bonus</th>
            <th scope="col">Supervisor</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>Stephen C. Cox</td>
            <td>$300</td>
            <td>$50</td>
            <td>Bob</td>
        </tr>
        <tr>
        	<td>Josephin Tan</td>
            <td>$150</td>
            <td>-</td>
            <td>Annie</td>
        </tr>
        <tr>
        	<td>Joyce Ming</td>
            <td>$200</td>
            <td>$35</td>
            <td>Andy</td>
        </tr>
        <tr>
        	<td>James A. Pentel</td>
            <td>$175</td>
            <td>$25</td>
            <td>Annie</td>
        </tr>
    </tbody>
</table>
 
<table id="hor-minimalist-b" summary="Employee Pay Sheet">
    <thead>
    	<tr>
        	<th scope="col">Employee</th>
            <th scope="col">Salary</th>
            <th scope="col">Bonus</th>
            <th scope="col">Supervisor</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>Stephen C. Cox</td>
            <td>$300</td>
            <td>$50</td>
            <td>Bob</td>
        </tr>
        <tr>
        	<td>Josephin Tan</td>
            <td>$150</td>
            <td>-</td>
            <td>Annie</td>
        </tr>
        <tr>
        	<td>Joyce Ming</td>
            <td>$200</td>
            <td>$35</td>
            <td>Andy</td>
        </tr>
        <tr>
        	<td>James A. Pentel</td>
            <td>$175</td>
            <td>$25</td>
            <td>Annie</td>
        </tr>
    </tbody>
</table>
 
 
<table id="ver-minimalist" summary="Most Favorite Movies">
    <thead>
    	<tr>
        	<th scope="col">Comedy</th>
            <th scope="col">Adventure</th>
            <th scope="col">Action</th>
            <th scope="col">Children</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>Scary Movie</td>
            <td>Indiana Jones</td>
            <td>The Punisher</td>
            <td>Wall-E</td>
        </tr>
        <tr>
        	<td>Epic Movie</td>
            <td>Star Wars</td>
            <td>Bad Boys</td>
            <td>Madagascar</td>
        </tr>
        <tr>
        	<td>Spartan</td>
            <td>LOTR</td>
            <td>Die Hard</td>
            <td>Finding Nemo</td>
        </tr>
        <tr>
        	<td>Dr. Dolittle</td>
            <td>The Mummy</td>
            <td>300</td>
            <td>A Bug's Life</td>
        </tr>
    </tbody>
</table>
 
<table id="box-table-a" summary="Employee Pay Sheet">
    <thead>
    	<tr>
        	<th scope="col">Employee</th>
            <th scope="col">Salary</th>
            <th scope="col">Bonus</th>
            <th scope="col">Supervisor</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>Stephen C. Cox</td>
            <td>$300</td>
            <td>$50</td>
            <td>Bob</td>
        </tr>
        <tr>
        	<td>Josephin Tan</td>
            <td>$150</td>
            <td>-</td>
            <td>Annie</td>
        </tr>
        <tr>
        	<td>Joyce Ming</td>
            <td>$200</td>
            <td>$35</td>
            <td>Andy</td>
        </tr>
        <tr>
        	<td>James A. Pentel</td>
            <td>$175</td>
            <td>$25</td>
            <td>Annie</td>
        </tr>
    </tbody>
</table>
 
 
<table id="box-table-b" summary="Most Favorit Movies">
    <thead>
    	<tr>
        	<th scope="col">Comedy</th>
            <th scope="col">Adventure</th>
            <th scope="col">Action</th>
            <th scope="col">Children</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>Scary Movie</td>
            <td>Indiana Jones</td>
            <td>The Punisher</td>
            <td>Wall-E</td>
        </tr>
        <tr>
        	<td>Epic Movie</td>
            <td>Star Wars</td>
            <td>Bad Boys</td>
            <td>Madagascar</td>
        </tr>
        <tr>
        	<td>Spartan</td>
            <td>LOTR</td>
            <td>Die Hard</td>
            <td>Finding Nemo</td>
        </tr>
        <tr>
        	<td>Dr. Dolittle</td>
            <td>The Mummy</td>
            <td>300</td>
            <td>A Bug's Life</td>
        </tr>
    </tbody>
</table>
 
 
<table id="hor-zebra" summary="Employee Pay Sheet">
    <thead>
    	<tr>
        	<th scope="col">Employee</th>
            <th scope="col">Salary</th>
            <th scope="col">Bonus</th>
            <th scope="col">Supervisor</th>
        </tr>
    </thead>
    <tbody>
    	<tr class="odd">
        	<td>Stephen C. Cox</td>
            <td>$300</td>
            <td>$50</td>
            <td>Bob</td>
        </tr>
        <tr>
        	<td>Josephin Tan</td>
            <td>$150</td>
            <td>-</td>
            <td>Annie</td>
        </tr>
        <tr class="odd">
        	<td>Joyce Ming</td>
            <td>$200</td>
            <td>$35</td>
            <td>Andy</td>
        </tr>
        <tr>
        	<td>James A. Pentel</td>
            <td>$175</td>
            <td>$25</td>
            <td>Annie</td>
        </tr>
    </tbody>
</table>
 
 
<table id="ver-zebra" summary="Most Favorite Movies">
    <colgroup>
    	<col class="vzebra-odd" />
    	<col class="vzebra-even" />
    	<col class="vzebra-odd" />
        <col class="vzebra-even" />
    </colgroup>
    <thead>
    	<tr>
        	<th scope="col" id="vzebra-comedy">Comedy</th>
            <th scope="col" id="vzebra-adventure">Adventure</th>
            <th scope="col" id="vzebra-action">Action</th>
            <th scope="col" id="vzebra-children">Children</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>Scary Movie</td>
            <td>Indiana Jones</td>
            <td>The Punisher</td>
            <td>Wall-E</td>
        </tr>
        <tr>
        	<td>Epic Movie</td>
            <td>Star Wars</td>
            <td>Bad Boys</td>
            <td>Madagascar</td>
        </tr>
        <tr>
        	<td>Spartan</td>
            <td>LOTR</td>
            <td>Die Hard</td>
            <td>Finding Nemo</td>
        </tr>
        <tr>
        	<td>Dr. Dolittle</td>
            <td>The Mummy</td>
            <td>300</td>
            <td>A Bug's Life</td>
        </tr>
    </tbody>
</table>
 
<table id="one-column-emphasis" summary="2007 Major IT Companies' Profit">
    <colgroup>
    	<col class="oce-first" />
    </colgroup>
    <thead>
    	<tr>
        	<th scope="col">Company</th>
            <th scope="col">Q1</th>
            <th scope="col">Q2</th>
            <th scope="col">Q3</th>
            <th scope="col">Q4</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>Microsoft</td>
            <td>20.3</td>
            <td>30.5</td>
            <td>23.5</td>
            <td>40.3</td>
        </tr>
        <tr>
        	<td>Google</td>
            <td>50.2</td>
            <td>40.63</td>
            <td>45.23</td>
            <td>39.3</td>
        </tr>
        <tr>
        	<td>Apple</td>
            <td>25.4</td>
            <td>30.2</td>
            <td>33.3</td>
            <td>36.7</td>
        </tr>
        <tr>
        	<td>IBM</td>
            <td>20.4</td>
            <td>15.6</td>
            <td>22.3</td>
            <td>29.3</td>
        </tr>
    </tbody>
</table>
 
 
<table id="newspaper-a" summary="2007 Major IT Companies' Profit">
    <thead>
    	<tr>
        	<th scope="col">Company</th>
            <th scope="col">Q1</th>
            <th scope="col">Q2</th>
            <th scope="col">Q3</th>
            <th scope="col">Q4</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>Microsoft</td>
            <td>20.3</td>
            <td>30.5</td>
            <td>23.5</td>
            <td>40.3</td>
        </tr>
        <tr>
        	<td>Google</td>
            <td>50.2</td>
            <td>40.63</td>
            <td>45.23</td>
            <td>39.3</td>
        </tr>
        <tr>
        	<td>Apple</td>
            <td>25.4</td>
            <td>30.2</td>
            <td>33.3</td>
            <td>36.7</td>
        </tr>
        <tr>
        	<td>IBM</td>
            <td>20.4</td>
            <td>15.6</td>
            <td>22.3</td>
            <td>29.3</td>
        </tr>
    </tbody>
</table>
 
 
<table id="newspaper-b" summary="2007 Major IT Companies' Profit">
    <thead>
    	<tr>
        	<th scope="col">Company</th>
            <th scope="col">Q1</th>
            <th scope="col">Q2</th>
            <th scope="col">Q3</th>
            <th scope="col">Q4</th>
        </tr>
    </thead>
        <tfoot>
    	<tr>
        	<td colspan="5"><em>The above data were fictional and made up, please do not sue me</em></td>
        </tr>
    </tfoot>
    <tbody>
    	<tr>
        	<td>Microsoft</td>
            <td>20.3</td>
            <td>30.5</td>
            <td>23.5</td>
            <td>40.3</td>
        </tr>
        <tr>
        	<td>Google</td>
            <td>50.2</td>
            <td>40.63</td>
            <td>45.23</td>
            <td>39.3</td>
        </tr>
        <tr>
        	<td>Apple</td>
            <td>25.4</td>
            <td>30.2</td>
            <td>33.3</td>
            <td>36.7</td>
        </tr>
        <tr>
        	<td>IBM</td>
            <td>20.4</td>
            <td>15.6</td>
            <td>22.3</td>
            <td>29.3</td>
        </tr>
    </tbody>
</table>
 
<table id="newspaper-c" summary="Personal Movie Rating">
    <thead>
    	<tr>
        	<th scope="col">Favorite</th>
            <th scope="col">Great</th>
            <th scope="col">Nice</th>
            <th scope="col">Bad</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>Passion of the Christ</td>
            <td>Bourne Ultimatum</td>
            <td>Shoot 'Em Up</td>
            <td>Ali</td>
        </tr>
        <tr>
        	<td>The Big Fish</td>
            <td>The Mummy</td>
            <td>Apocalypto</td>
            <td>Monster</td>
        </tr>
        <tr>
        	<td>Shawshank Redemption</td>
            <td>Cold Mountain</td>
            <td>Indiana Jones</td>
            <td>Dead or Alive</td>
        </tr>
        <tr>
        	<td>Greatest Story Ever Told</td>
            <td>I Am Legend</td>
            <td>Star Wars</td>
            <td>Saw 3</td>
        </tr>
    </tbody>
</table>
 
 
<table id="rounded-corner" summary="2007 Major IT Companies' Profit">
    <thead>
    	<tr>
        	<th scope="col" class="rounded-company">Company</th>
            <th scope="col" class="rounded-q1">Q1</th>
            <th scope="col" class="rounded-q2">Q2</th>
            <th scope="col" class="rounded-q3">Q3</th>
            <th scope="col" class="rounded-q4">Q4</th>
        </tr>
    </thead>
        <tfoot>
    	<tr>
        	<td colspan="4" class="rounded-foot-left"><em>The above data were fictional and made up, please do not sue me</em></td>
        	<td class="rounded-foot-right">&nbsp;</td>
        </tr>
    </tfoot>
    <tbody>
    	<tr>
        	<td>Microsoft</td>
            <td>20.3</td>
            <td>30.5</td>
            <td>23.5</td>
            <td>40.3</td>
        </tr>
        <tr>
        	<td>Google</td>
            <td>50.2</td>
            <td>40.63</td>
            <td>45.23</td>
            <td>39.3</td>
        </tr>
        <tr>
        	<td>Apple</td>
            <td>25.4</td>
            <td>30.2</td>
            <td>33.3</td>
            <td>36.7</td>
        </tr>
        <tr>
        	<td>IBM</td>
            <td>20.4</td>
            <td>15.6</td>
            <td>22.3</td>
            <td>29.3</td>
        </tr>
    </tbody>
</table>
 
<table id="background-image" summary="Meeting Results">
    <thead>
    	<tr>
        	<th scope="col">Employee</th>
            <th scope="col">Division</th>
            <th scope="col">Suggestions</th>
        </tr>
    </thead>
    <tfoot>
    	<tr>
        	<td colspan="4">IE 6 users won't see the transparent background if the hack is not applied</td>
        </tr>
    </tfoot>
    <tbody>
    	<tr>
        	<td>Stephen C. Cox</td>
            <td>Marketing</td>
            <td>Make discount offers</td>
        </tr>
        <tr>
        	<td>Josephin Tan</td>
            <td>Advertising</td>
            <td>Give bonuses</td>
        </tr>
        <tr>
        	<td>Joyce Ming</td>
            <td>Marketing</td>
            <td>New designs</td>
        </tr>
        <tr>
        	<td>James A. Pentel</td>
            <td>Marketing</td>
            <td>Better Packaging</td>
        </tr>
    </tbody>
</table>
 
 
<table id="gradient-style" summary="Meeting Results">
    <thead>
    	<tr>
        	<th scope="col">Employee</th>
            <th scope="col">Division</th>
            <th scope="col">Suggestions</th>
            <th scope="col">Rating</th>
        </tr>
    </thead>
    <tfoot>
    	<tr>
        	<td colspan="4">Give background color to the table cells to achieve seamless transition</td>
        </tr>
    </tfoot>
    <tbody>
    	<tr>
        	<td>Stephen C. Cox</td>
            <td>Marketing</td>
            <td>Make discount offers</td>
            <td>3/10</td>
        </tr>
        <tr>
        	<td>Josephin Tan</td>
            <td>Advertising</td>
            <td>Give bonuses</td>
        	<td>5/10</td>
        </tr>
        <tr>
        	<td>Joyce Ming</td>
            <td>Marketing</td>
            <td>New designs</td>
        	<td>8/10</td>
        </tr>
        <tr>
        	<td>James A. Pentel</td>
            <td>Marketing</td>
            <td>Better Packaging</td>
            <td>8/10</td>
        </tr>
    </tbody>
</table>
 
 
<table id="pattern-style-a" summary="Meeting Results">
   <thead>
    	<tr>
        	<th scope="col">Employee</th>
            <th scope="col">Salary</th>
            <th scope="col">Bonus</th>
            <th scope="col">Supervisor</th>
        </tr>
  </thead>
    <tbody>
    	<tr>
        	<td>Stephen C. Cox</td>
            <td>$300</td>
            <td>$50</td>
            <td>Bob</td>
        </tr>
        <tr>
        	<td>Josephin Tan</td>
            <td>$150</td>
            <td>-</td>
            <td>Annie</td>
        </tr>
        <tr>
        	<td>Joyce Ming</td>
            <td>$200</td>
            <td>$35</td>
            <td>Andy</td>
        </tr>
        <tr>
        	<td>James A. Pentel</td>
            <td>$175</td>
            <td>$25</td>
            <td>Annie</td>
        </tr>
    </tbody>
</table>
 
<table id="pattern-style-b" summary="Meeting Results">
    <thead>
    	<tr>
        	<th scope="col">Nation</th>
            <th scope="col">Capital</th>
            <th scope="col">Language</th>
            <th scope="col">Unique</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>Japan</td>
            <td>Tokyo</td>
            <td>Japanese</td>
            <td>Karate</td>
        </tr>
        <tr>
        	<td>South Korea</td>
            <td>Seoul</td>
            <td>Korean</td>
            <td>Ginseng</td>
        </tr>
        <tr>
        	<td>China</td>
            <td>Beijing</td>
            <td>Mandarin</td>
            <td>Kung-Fu</td>
        </tr>
        <tr>
        	<td>Indonesia</td>
            <td>Jakarta</td>
            <td>Indonesian</td>
            <td>Batik</td>
        </tr>
    </tbody>
</table>
 
</body>
</html>

?

?

table3.html

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"utf-8" /> 
<title>坏狼安全网-漂亮CSS Tables</title> 
</head> 
<style type="text/css"> 
/* CSS Document */ 
 
body { 
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
color: #4f6b72; 
background: #E6EAE9; 
} 
 
a { 
color: #c75f3e; 
} 
 
#mytable { 
width: 700px; 
padding: 0; 
margin: 0; 
} 
 
caption { 
padding: 0 0 5px 0; 
width: 700px; 
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
text-align: right; 
} 
 
th { 
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
color: #4f6b72; 
border-right: 1px solid #C1DAD7; 
border-bottom: 1px solid #C1DAD7; 
border-top: 1px solid #C1DAD7; 
letter-spacing: 2px; 
text-transform: uppercase; 
text-align: left; 
padding: 6px 6px 6px 12px; 
background: #CAE8EA  no-repeat; 
} 
/*power by www.winshell.cn*/ 
th.nobg { 
border-top: 0; 
border-left: 0; 
border-right: 1px solid #C1DAD7; 
background: none; 
} 
 
td { 
border-right: 1px solid #C1DAD7; 
border-bottom: 1px solid #C1DAD7; 
background: #fff; 
font-size:11px; 
padding: 6px 6px 6px 12px; 
color: #4f6b72; 
} 
/*power by www.winshell.cn*/ 
 
td.alt { 
background: #F5FAFA; 
color: #797268; 
} 
 
th.spec { 
border-left: 1px solid #C1DAD7; 
border-top: 0; 
background: #fff no-repeat; 
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
} 
 
th.specalt { 
border-left: 1px solid #C1DAD7; 
border-top: 0; 
background: #f5fafa no-repeat; 
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
color: #797268; 
} 
/*---------for IE 5.x bug*/ 
html>body td{ font-size:11px;} 
body,td,th { 
font-family: 宋体, Arial; 
font-size: 12px; 
} 
</style> 
<body> 
<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple 
 
PowerMac G5 series"> 
<caption> </caption> 
<tr> 
<th scope="col">姓名</th> 
<th scope="col">年龄</th> 
<th scope="col">电话</th> 
<th scope="col">居住地点</th> 
</tr> 
<tr> 
<td class="row">badwolf</td> 
<td class="row">100</td> 
<td class="row">010-110</td> 
<td class="row">中国北京</td> 
</tr> 
</table> 
 
</body> 
</html>

?

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.