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

    Simple Pro V1.0 正式版 又一款WordPress简洁主题

    前几天刚发布了一款 PressWork Fr…

  2. 没有图片

    2013.05.03

    WordPress安全卫士:Wordfence Security

    近来我发现个问题,上传到空间里的主题经常被自…

  3. 没有图片

    2010.03.15

    DEDECMS标题中去掉斜线的办法

    在上一教程中,我通过使用“DedeCMS当前…

  4. 没有图片

    2013.12.31

    MacBook 校准电池方法

    如果您的便携式 Mac 配备有可拆装电池,请…

  5. 没有图片

    2011.05.02

    WordPress提取某分类或者某标签下文章(支持分页)

    其实这篇日志的内容是菜鸟级别的,就是希望对菜…

  6. 没有图片

    2011.11.04

    Windows 8 关机方法

    这几天安装了强大的Windows 8 Dev…

评论

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

    谢谢分享

About

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