`
szqfsx123
  • 浏览: 42306 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

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

    博客分类：
  • css
 
阅读更多 
<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>

 

分享到：
| 转appfuse快速开发指南
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    layui的表格table选中数据后更改本行的颜色

    在layui的表格table中，选中某行数据之后更改本行颜色，取消选中后恢复原样式。在layui的表格table中，选中某行数据之后更改本行颜色，取消选中后恢复原样式。

    《CSS全程指南》随书光盘

    本书将最有用的CSS技术汇总在一起，在介绍基本的CSS概念和最佳实践之后，讨论了核心的CSS技术，例如图像、链接、列表操纵、表单设计等。每一章内容由浅入深，直到建立比较复杂的示例。之后本书又着重讨论如何使用DIV...

    H5+CSS3.zip

    css盒模型：块级元素，内联元素，内敛块状元素，none使元素隐身，设置宽度、高度、背景色、边框、圆角，padding内边距，margin外边距； css布局模型：流动模型flow，浮动模型float，层模型layer，层模型的绝对定位、...

    css入门笔记

    背景色 属性：background: 取值：颜色 2.背景图片 属性：background-image：url(); 取值：url() 3.背景图像平铺 属性：background-repeat 取值： 1.repeat 默认值，横向和纵向同时平铺 2..repeat-x ...

    jQuery实现表格奇偶行显示不同背景色 就这么简单

    做表格的时候，经常要让奇偶行显示不同背景色，一来使表格显得更美观，二来使同行数据查找更快捷方便。通常我们是怎么实现的呢？就是在每个tr标签上加css样式。 代码如下所示： &lt;html&gt; &lt;style type=text/...

    最大限度的分离table的样式与结构

    但CSS+XHTML的兴起,使很多人开始妖魔化table这一标签,甚至以页面中是否有table来评判页面质量,这是不对的. table也有它存在的作用,很多页面功能(比如数据表格类,表单对齐等)用...请看下图:这是一个有6种背景色的tab

    JavaScript Table行定位效果

    程序用的方法是，从当前td开始找，如果背景是透明的话，就再从父节点中找，直到找到有背景色为止。 一般来说透明的属性值是"transparent"，但在chrome里却是"rgba(0, 0, 0, 0)"，所以用了一个属性来保存透明值： ...

    CSS Brush - Live CSS编辑器。「CSS Brush - Live CSS editor」-crx插件

    在网页上使用CSS样式。 CSS Brush-Live CSS Editor使您的chrome浏览器成为CSS客厅，可以为您的网站设置样式。 一个强大的工具，可以实时设置您的网站样式。 出于几个原因，编写CSS文件始终是一件乏味的工作。 我们...

    AngularJS表格样式简单设置方法示例

    AngularJS表格table，利用样式设置表格间隔色 2、实现源码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=UTF-8&gt; &lt;title&gt;AngularJS之表格设置样式&lt;/title&gt; &lt;link rel=...

    jQuery 全选/反选以及单击行改变背景色实例

    我先把CSS样式放出来，其实这个可以直接忽略 代码如下: body{margin:0;padding:0;font-size:12px;font-family:微软雅黑;} .datagrid{width:100%;} .datagird tr th{background-color:#191970; font-size:14px;} ....

    JavaScript王者归来part.1 总数2

    　13.6.4 标记行--呈现有别于其他行的背景色　 　13.6.5 小技巧--将代码添加到样式表　 　13.7 总结　 　第14章 级联样式表 　14.1 什么是级联样式表　 　14.1.1 CSS样式和样式表　 　14.1.2 CSS的标准化　 　14.1.3...

    JS固定表头和左边列V2.0（源码）

    修复thead复制时无背景色的问题 增加复选框同步功能（如果是JS代码设置复选框选中，需要调用 .setCheckBoxSync()方法） .setCheckBoxSync 方法参数说明：4种参数 1) 复选框控件（html object）数组 2) 复选框...

    TableBox:表格报告扩展功能，适用于qlik

    以PX 附加样式：可以将标准CSS添加到列单元格页眉对齐：对齐文本（左/中/右） 标头文字颜色：单元格文字颜色标头背景色：单元格背景色标头列跨度：HTML属性colspan 导航类型：URL和工作表导航工作表导航：屁股工作表...

    xheditor-1.1.14

    建议直接设置textarea的css背景 备注：v1.1.1新添加 loadCSS：加载样式 参数值：URL地址、URL数组以及直接内部样式，例如：'1.css'、['1.css','2.css']、'&lt;style&gt;body{font-size:20px;}&lt;/style&gt;' ...

    Web页面中八种创建多列等高(等高列布局)的实现技术

    大家都知道当初Table实现等高列布局是多么的简单，但是我们使用CSS来创建等高列布局并非是那么容易的事情。 如果一个设计是固定宽度（非流体的宽度设计），那么实现多列等高效果是相当的容易。最好的技术就是使用Dan...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    12.4.htm 通过下拉列表框来改变容器的背景色 12.5.htm 实演示如何创建CSS文件 12.6.htm 演示一个在网页中应用投影的范例 12.7.htm 使用Ajax动态改变局部元素样式 CSSmenu ...

Magicbox
Global site tag (gtag.js) - Google Analytics