css设置表格样式的方法

 

表格常见的应用

 

表格的颜色

 

例如

 

.datalist {   
  color: #0046a6;   
  background-color: #d2e8ff;   
  font-family: Arial;   
 
}   
.datalist th {   
  color: #003e7e;   
  background-color: #7bb3ff;   
}  

表格的边框

例如

.datalist {   
  border: 1px solid #007eff;   
  font-family: Arial;   
  border-collapse: collapse;   
}   
.datalist th, .datalist td {   
  border: 1px solid #429fff;   
}   

 

一个CSS表格的很常用的表格样式实例

 

<style type="text/css">
table.gridtable {}{
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
}
table.gridtable th {}{
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
}
table.gridtable td {}{
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
}
</style>

<!-- Table goes in the document BODY -->
<table class="gridtable">
<tr>
    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
    <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
    <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>

 

效果图：

 

 

文章转载自：    css如何设置表格样式    http://www.studyofnet.com/news/227.html