实用的 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.11.24

    PHP页面之间传递参数简单体验(完整实例)

    菠萝从来没学过PHP,虽然天天在和PHP打交…

  2. 没有图片

    2010.09.27

    OneNote 2010 的功能和优点

    Microsoft OneNote 2010…

  3. 2011.04.02

    博客启用WordPress主题:LSZ Thinky Pro V3.1

    今天博客开启了在 WordPress 原生主…

  4. 没有图片

    2010.03.22

    MSDN Windows 7 专业版 | Windows 7 Professional

    今天我的Windows 7 旗舰版资源管理器…

  5. 没有图片

    2009.09.07

    西班牙 微博客系统 Jisko

    国外最有名的微博客系统莫非就是Twitter…

  6. 没有图片

    2012.02.10

    自定义WordPress上传文件类型

    目前WordPress默认支持大部分图片等文…

评论

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

    谢谢分享

About

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