高端大气简约的表格式样实例_蓝色紫色table css 样式_table style example
table css样式实例代码如下：
index.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>table style css example</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>
</body>
</html>
styles.css内容如下
body
{
line-height: 1.6em;
}
#hor-minimalist-a
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
background: #fff;
margin: 45px;
width: 480px;
border-collapse: collapse;
text-align: left;
}
#hor-minimalist-a th
{
font-size: 14px;
font-weight: normal;
color: #039;
padding: 10px 8px;
border-bottom: 2px solid #6678b1;
}
#hor-minimalist-a td
{
color: #669;
padding: 9px 8px 0px 8px;
}
#hor-minimalist-a tbody tr:hover td
{
color: #009;
}
#hor-minimalist-b
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
background: #fff;
margin: 45px;
width: 480px;
border-collapse: collapse;
text-align: left;
}
#hor-minimalist-b th
{
font-size: 14px;
font-weight: normal;
color: #039;
padding: 10px 8px;
border-bottom: 2px solid #6678b1;
}
#hor-minimalist-b td
{
border-bottom: 1px solid #ccc;
color: #669;
padding: 6px 8px;
}
#hor-minimalist-b tbody tr:hover td
{
color: #009;
}
#ver-minimalist
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 45px;
width: 480px;
text-align: left;
border-collapse: collapse;
}
#ver-minimalist th
{
padding: 8px 2px;
font-weight: normal;
font-size: 14px;
border-bottom: 2px solid #6678b1;
border-right: 30px solid #fff;
border-left: 30px solid #fff;
color: #039;
}
#ver-minimalist td
{
padding: 12px 2px 0px 2px;
border-right: 30px solid #fff;
border-left: 30px solid #fff;
color: #669;
}
#box-table-a
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 45px;
width: 480px;
text-align: left;
border-collapse: collapse;
}
#box-table-a th
{
font-size: 13px;
font-weight: normal;
padding: 8px;
background: #b9c9fe;
border-top: 4px solid #aabcfe;
border-bottom: 1px solid #fff;
color: #039;
}
#box-table-a td
{
padding: 8px;
background: #e8edff;
border-bottom: 1px solid #fff;
color: #669;
border-top: 1px solid transparent;
}
#box-table-a tr:hover td
{
background: #d0dafd;
color: #339;
}
#box-table-b
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 45px;
width: 480px;
text-align: center;
border-collapse: collapse;
border-top: 7px solid #9baff1;
border-bottom: 7px solid #9baff1;
}
#box-table-b th
{
font-size: 13px;
font-weight: normal;
padding: 8px;
background: #e8edff;
border-right: 1px solid #9baff1;
border-left: 1px solid #9baff1;
color: #039;
}
#box-table-b td
{
padding: 8px;
background: #e8edff;
border-right: 1px solid #aabcfe;
border-left: 1px solid #aabcfe;
color: #669;
}
#hor-zebra
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 45px;
width: 480px;
text-align: left;
border-collapse: collapse;
}
#hor-zebra th
{
font-size: 14px;
font-weight: normal;
padding: 10px 8px;
color: #039;
}
#hor-zebra td
{
padding: 8px;
color: #669;
}
#hor-zebra .odd
{
background: #e8edff;
}
#ver-zebra
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 45px;
width: 480px;
text-align: left;
border-collapse: collapse;
}
#ver-zebra th
{
font-size: 14px;
font-weight: normal;
padding: 12px 15px;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
color: #039;
}
#ver-zebra td
{
padding: 8px 15px;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
color: #669;
}
.vzebra-odd
{
background: #eff2ff;
}
.vzebra-even
{
background: #e8edff;
}
#ver-zebra #vzebra-adventure, #ver-zebra #vzebra-children
{
background: #d0dafd;
border-bottom: 1px solid #c8d4fd;
}
#ver-zebra #vzebra-comedy, #ver-zebra #vzebra-action
{
background: #dce4ff;
border-bottom: 1px solid #d6dfff;
}
#one-column-emphasis
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 45px;
width: 480px;
text-align: left;
border-collapse: collapse;
}
#one-column-emphasis th
{
font-size: 14px;
font-weight: normal;
padding: 12px 15px;
color: #039;
}
#one-column-emphasis td
{
padding: 10px 15px;
color: #669;
border-top: 1px solid #e8edff;
}
.oce-first
{
background: #d0dafd;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
#one-column-emphasis tr:hover td
{
color: #339;
background: #eff2ff;
}
#newspaper-a
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 45px;
width: 480px;
text-align: left;
border-collapse: collapse;
border: 1px solid #69c;
}
#newspaper-a th
{
padding: 12px 17px 12px 17px;
font-weight: normal;
font-size: 14px;
color: #039;
border-bottom: 1px dashed #69c;
}
#newspaper-a td
{
padding: 7px 17px 7px 17px;
color: #669;
}
#newspaper-a tbody tr:hover td
{
color: #339;
background: #d0dafd;
}
#newspaper-b
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 45px;
width: 480px;
text-align: left;
border-collapse: collapse;
border: 1px solid #69c;
}
#newspaper-b th
{
padding: 15px 10px 10px 10px;
font-weight: normal;
font-size: 14px;
color: #039;
}
#newspaper-b tbody
{
background: #e8edff;
}
#newspaper-b td
{
padding: 10px;
color: #669;
border-top: 1px dashed #fff;
}
#newspaper-b tbody tr:hover td
{
color: #339;
background: #d0dafd;
}
#newspaper-c
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 45px;
width: 480px;
text-align: left;
border-collapse: collapse;
border: 1px solid #6cf;
}
#newspaper-c th
{
padding: 20px;
font-weight: normal;
font-size: 13px;
color: #039;
text-transform: uppercase;
border-right: 1px solid #0865c2;
border-top: 1px solid #0865c2;
border-left: 1px solid #0865c2;
border-bottom: 1px solid #fff;
}
#newspaper-c td
{
padding: 10px 20px;
color: #669;
border-right: 1px dashed #6cf;
}
好看的table css样式效果图：
来源：smashing//作者：admin/更新时间：2013-11-20
顶
踩
相关文章：
