`
szqfsx123
  • 浏览: 43748 次
  • 性别: 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快速开发指南
评论
发表评论

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

相关推荐

    改变选择table行的背景色

    - **CSS样式**：除了JavaScript逻辑外，还定义了一些基本的CSS样式，例如`.light`类设置了基本的字体大小、颜色、背景色等。这有助于保持页面的基本风格一致。 - **交互逻辑**：通过监听不同的事件（如鼠标悬停、...

    漂亮的table样式（内附css）

    "漂亮的table样式（内附css）"这个主题就是围绕如何使用CSS为HTML表格添加吸引力，使其更加美观和专业。 首先，我们需要了解HTML表格的基本结构，它由`&lt;table&gt;`元素开始，然后包含`&lt;tr&gt;`（行）元素，每个`&lt;tr&gt;`中...

    CSS样式TABLE的一些特效

    在这个主题“CSS样式TABLE的一些特效”中，我们将深入探讨如何利用CSS来增强表格的视觉吸引力和交互性。 1. **表格边框与填充** - `border-collapse`: 这个属性用于设置表格单元格之间的边框合并方式。默认情况下...

    HTML Table 漂亮的CSS

    2. **背景色与文字颜色**：`background-color`和`color`属性用于设置单元格或表头的背景和文字颜色，以增加对比度和视觉吸引力。 3. **圆角表格**：通过`border-radius`属性实现圆角效果，使表格看起来更柔和。例如...

    纯css table 样式布局制作人口统计table表格样式代码

    在网页设计中，CSS（Cascading Style Sheets）是一种用于控制网页元素呈现样式的语言，而表格（Table）则是组织数据的重要方式。本教程将详细讲解如何使用纯CSS来制作一个人口统计表格的样式布局。 首先，我们需要...

    CSS样式Table[6] - style-table

    3. **背景色与文本样式**: 使用`background-color`可以改变表格或单元格的背景颜色，而`color`属性可以调整文本颜色。例如，`th {background-color: #f2f2f2; color: #333;}`会创建一个浅灰色背景和深灰色文本的表头...

    利用CSS控制表格table的交替颜色

    CSS提供了多种选择器和属性，可以用来针对这些元素进行样式设置。为了实现行的交替着色，我们可以使用`:nth-child(odd)`和`:nth-child(even)`选择器，它们分别用于匹配父元素的奇数和偶数子元素。对于更复杂的样式，...

    好看的css table样式

    在网页设计中，CSS（Cascading Style Sheets）是一种...文件"好看的css_table1"可能包含了这些样式的实例代码，供开发者参考和学习。通过不断实践和创新，你可以打造出更加个性化的表格样式，满足各类网页设计需求。

    漂亮的Table CSS

    以下是一些关于Table CSS的重要知识点： 1. **基础样式**：首先，可以使用`border-collapse`属性合并单元格边框，创建更整洁的外观。例如，`border-collapse: collapse;`将消除边框之间的间距。 2. **背景色与边框...

    Table常用的几种CSS样式

    在网页设计中，表格（Table）是展示数据的重要方式，而使用CSS（Cascading Style Sheets）对表格进行样式化可以提升页面的视觉效果和用户体验。以下是对"Table常用的几种CSS样式"的详细阐述。 1. **边框样式**： -...

    CSS JS实现表格背景变色.rar

    通过CSS，我们能设定表格的基础样式和背景色；借助JavaScript，我们可以实现动态交互，如鼠标悬停时改变颜色，从而提高用户与表格的互动体验。理解并熟练运用这些技术对于提升网页设计的专业性和用户体验至关重要。

    纯CSS3漂亮表格（圆角、渐变、多背景色）.rar

    总之，“纯CSS3漂亮表格（圆角、渐变、多背景色）”是一个很好的示例，它展示了如何利用CSS3的新特性提升网页设计的美感和交互性。通过学习和应用这些技巧，开发者可以创建出更具吸引力和现代感的网页应用。在压缩包...

    CSS+JS实现table隔行变色

    在网页设计中，为了提升...综上所述，通过CSS和JavaScript的结合，我们可以轻松实现table隔行变色的效果，无论是静态页面还是动态内容，都能提供良好的阅读体验。在实际开发中，可以根据项目需求灵活选择合适的方法。

    bootstrap设置某列背景色和前景色

    综上所述，通过结合Bootstrap的栅格系统和CSS样式，我们可以轻松地为列设置背景色和前景色。在实际操作时，应根据具体需求选择最适合的方法，以确保良好的用户体验和视觉效果。在提供的压缩包文件中，可能包含了示例...

    css+js+table效果代码

    对于表格，CSS可以用来改变边框样式、单元格间距、字体颜色和大小，以及背景色等，使得表格更加符合网站的整体风格。例如，可以使用`border-collapse`属性合并单元格边框，`cellspacing`和`cellpadding`来调整内部...

    bootstrap-table-fixed-columns(css,js)

    CSS（层叠样式表）是用于描述网页及应用程序界面外观和表现的样式语言，通过修改这个文件，开发者可以自定义固定列的视觉效果，如边框、背景色、字体样式等。 `bootstrap-table-fixed-columns.js`则是JavaScript...

    CSS样式Table[7] - table_zebra

    在网页设计中，CSS（Cascading Style Sheets）是一种用于控制网页元素呈现样式的语言，它使得我们可以将结构与表现分离，让网页设计更加灵活和易于维护。在本主题"CSS样式Table[7] - table_zebra"中，我们重点关注的...

    CSS.table.rar_Table_css table_table css_表格css

    以下是一些关于"CSS.table.rar_Table_css table_table css_表格css"中涉及的关键知识点： 1. **表格元素基础**： - `&lt;table&gt;`：这是HTML中创建表格的基本标签，用于定义表格的结构。 - `&lt;tr&gt;`：表示表格行（Table...

    elementUI给table表头行设置背景颜色样式.pdf

    例如，以下代码展示了如何使用`header-cell-style`属性来设置表头背景色： ```html &lt;el-table :data="paperList" :header-cell-style="getRowClass"&gt; &lt;/el-table&gt; ``` 这里的`:header-cell-style="getRowClass...

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