实用的 Table CSS 样式

搞过了很多前端,用过不少的表格优化代码,今天整理的这段代码可以说是最实用的一段,喜欢的可以拿去用。本文代码可以实现效果如下:

如果你喜欢上面的样式,就可以动手复制下面的代码了。

<!– 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”;
}else{
rows[i].className = “oddrowcolor”;
}
}
}
}

window.onload=function(){
altRows(‘alternatecolor’);
}
</script>
<!– CSS goes in the document HEAD or added to your external stylesheet –>
<style type=”text/css”>
.altrowstable table {
width:96%;
text-align:center;
}
.altrowstable table th {
border-width: 1px;
text-align:center;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
.altrowstable table td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
.oddrowcolor{
background-color:#fff;
}
.evenrowcolor{
background-color:#e2efda;
}
</style>
<!– Table goes in the document BODY –>
<div class=”altrowstable” id=”alternatecolor”>
<table>
<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>
</tr>
<tr>
<td>Text 3A</td>
<td>Text 3B</td>
<td>Text 3C</td>
</tr>
<tr>
<td>Text 4A</td>
<td>Text 4B</td>
<td>Text 4C</td>
</tr>
<tr>
<td>Text 5A</td>
<td>Text 5B</td>
<td>Text 5C</td>
</tr>
</table>
</div>

落花生

认准了方向,就要勇敢地走下去,十年磨一剑,我相信,只要坚持,一切都有可能。

相关日志

  1. 没有图片

    2010.02.05

    设计师必备的网页素材在线生成器

    背景生成器 我们都知道,背景设置在设计中起着…

  2. 没有图片

    2011.10.11

    WordPress防垃圾评论插件: WP Anti Spam

    这几年来,花生一直在使用着防垃圾评论插件bl…

  3. 没有图片

    2010.09.27

    Excel 2010 的功能和优点

    使用 Microsoft Excel 201…

  4. 没有图片

    2010.06.13

    Windows7开启administrator管理员帐号

    Windows 7 的安全系统很高级,安装完…

  5. 没有图片

    2010.09.18

    Internet Explorer 9 新特性

    Internet Explorer 9 新特…

  6. 没有图片

    2012.12.13

    免费WordPress自适应主题:Lola

    刚给大家分享了一款免费的WordPress杂…

评论

  1. 企业咨询 2017.02.06 3:40下午

    谢谢分享

About

马拉松运动员,沉迷于跑步;关注科技前沿,关注互联网!与跑者、程序员、设计师为伍,一起跑步健身,一起编写程序,为自由而战!