您的位置：首页 > Web前端 > css > 正文

css如何设置表格样式

更多时间：2013-11-24 类别：Web前端浏览量：28975

css如何设置表格样式

css如何设置表格样式

WEB2.0提倡使用li开布局，但不是要完全放弃使用表格，表格在数据展现方面还是不错的选择。

表格常见的应用

表格的颜色

例如

.datalist {...}{   
  color: #0046a6;   
  background-color: #d2e8ff;   
  font-family: Arial;   
 
}   
.datalist caption {...}{   
  font-size: 18px;   
  font-weight: bold;   
}   
.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;   
}

隔行变色

当表格的行列都很多、数据量很大的时候，单元格如果采用相同的背景色，用户在实际使用时会感到凌乱。通常的解决办法就是采用隔行变色，使得奇数行和偶数行的背景颜色不一样，达到数据一目了然的目的。

例如


.datalist tr.altrow {...}{   
  background-color: #c7e5ff;   
 
}

鼠标经过变色

对于长时间审核大量数据、浏览表格的用户来说，即使是隔行变色的表格，阅读时间长了仍然会感到疲劳。如果数据行能够动态的根据鼠标来变色，就使得页面充满了生机，最大程度的减少用户疲倦。

例如


.datalist tr:hover {...}{   
  background-color: #c4e4ff;   
}   
.datalist tr:hover {...}{ background-color: #c4e4ff; }

下面介绍几个CSS表格的实例

一、单像素边框CSS表格

这是一个很常用的表格样式。

css样式、HTML代码

HTML 代码复制


<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样式表格

和上面差不多，不过每个格子里多了背景图。

cell-blue。jpg

cell-grey。jpg

1. 下载上面两张图，命名为cell-blue。jpg和cell-grey。jpg

2. 拷贝下面的代码到你想要的地方，记得修改图片url

3、css样式、HTML代码

HTML 代码复制


<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">...
table.imagetable {...}{
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #999999;
    border-collapse: collapse;
}
table.imagetable th {...}{
    background:#b5cfd2 url('cell-blue。jpg');
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #999999;
}
table.imagetable td {...}{
    background:#dcddc0 url('cell-grey。jpg');
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #999999;
}
</style>

<!-- Table goes in the document BODY -->
<table class="imagetable">
<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样式表格

这个CSS样式表格自动切换每一行的颜色，在我们需要频繁更新一个大表格的时候很有用。

代码：

HTML 代码复制


<!-- Javascript goes in the document HEAD -->
<script type="text/javascript">...
function altRows(id)...{
    if(document.getElementsByTagName)...{  
        
        var table = document.getElementById(id);  
        var rows = table.getElementsByTagName("tr"); 
         
        for(i = 0; i < rows.length; i++)...{          
            if(i % 2 == 0)...{
                rows[i].className = "evenrowcolor";

  标签：css 表格样式

上一篇：如何处理textarea换行

下一篇：event.preventDefault方法的使用

您可能感兴趣

css如何设置表格样式

css如何设置表格样式

热门推荐

排行榜