Como fazer cores alternadas em linhas da tabela - PHP



Cor em linhas da tabela:
Linha: 1 Editar Deletar
Linha: 2 Editar Deletar
Linha: 3 Editar Deletar
Linha: 4 Editar Deletar
Linha: 5 Editar Deletar
Linha: 6 Editar Deletar
Linha: 7 Editar Deletar
Linha: 8 Editar Deletar
Linha: 9 Editar Deletar
Linha: 10 Editar Deletar



Arquivo CSS

<style type="text/css">
.editdel a:link {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #FFF;
    text-decoration: none;
    background-color: #09C;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #FFF;
    margin-top: 2px;
    margin-bottom: 2px;
    padding-right: 5px;
    padding-left: 5px;
}
.editdel a:hover {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #FFF;
    text-decoration: none;
    background-color: #FC0;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #FFF;
    margin-top: 2px;
    margin-bottom: 2px;
    padding-right: 5px;
    padding-left: 5px;
}
.editdel a:active{
        font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #FFF;
    text-decoration: none;
    background-color: #09C;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #FFF;
    margin-top: 2px;
    margin-bottom: 2px;
    padding-right: 5px;
    padding-left: 5px;
}
editdel a:visited{
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #000;
    text-decoration: none;
    background-color: #8AE1E1;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #FFF;
    margin-top: 2px;
    margin-bottom: 2px;
    padding-right: 5px;
    padding-left: 5px;
}
/*Começa a paginação */
/*
Esse exemplo foi baseado no site dos Plugins do  Wordpress
http://wordpress.org/extend/plugins/wp-pagenavi/
*/

.pagenavi {
    clear: both;
}
.pagenavi a, .pagenavi span {
    text-decoration: none;
    border: 1px solid #BFBFBF;
    padding: 3px 5px;
    margin: 2px;
}
.pagenavi a:hover, .pagenavi span.current {
    border-color: #000;
}

.pagenavi span.current {
    font-weight: bold;
}

#paginator{
    width: 400px;
    text-align: center;
    display: block;
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: auto;
}
#paginator a{background:url(../../../inetpub/wwwroot/admin/images/_btn_bg_mini.png) repeat-x #0567ad; border:1px solid #00487a; -moz-border-radius:5px; padding:5px 10px;}
#paginator a{-webkit-border-radius:5px; border-radius:5px; text-shadow:#00487a 1px 1px 0; color:#fff;}
#paginator a{cursor:pointer; text-decoration:none;}
#paginator a:hover, .pages:hover{background:url(../../../inetpub/wwwroot/admin/images/_btn_bg_mini_alt.png) repeat-x #2a2a2a; border-color:#272727;}
#paginator .current{background:url(../../../inetpub/wwwroot/admin/images/_btn_bg_mini_alt.png) repeat-x #2a2a2a; border-color:#272727; -moz-border-radius:5px; padding:5px 10px;}
#paginator .current{-webkit-border-radius:5px; border-radius:5px; text-shadow:#00487a 1px 1px 0; color:#fff;}
#paginator .current{text-decoration:none;}

#single .left{width:670px; float:left;}
#single .left h1{background:none; font:26px Arial, Helvetica, sans-serif; color:#000; margin:0; padding:0;}
#single .left h2{background:none; font:22px Arial, Helvetica, sans-serif; color:#333; margin:0; padding:0;}
#single .left h3{background:none; font:18px Arial, Helvetica, sans-serif; color:#666; margin:0; padding:0;}
#single .left h4{background:none; font:16px Arial, Helvetica, sans-serif; color:#999; margin:0; padding:0;}

#single .left .meta{font:14px Arial, Helvetica, sans-serif; color:#999; text-transform:uppercase; float:left; width:670px; margin-bottom:20px;}
#single .left .meta a{text-decoration:none; color:#999;}
#single .left .meta a:hover{color:#09F;}
#single .left .title{padding:30px 0; border-bottom:1px solid #666; border-top:1px solid #666; float:left; width:670px; margin:5px 0 15px 0;}
#single .left .title img{float:left; border-right:1px solid #CCC; margin-right:15px; padding-right:15px;}

#single .left .title .download{list-style:none; float:left; display:inline; margin:10px 0; font:12px Arial, Helvetica, sans-serif;}
#single .left .title .download li{float:left; margin-right:10px; text-transform:lowercase; color:#999;}

#single .left .seo{padding:5px 0;}
#single .left .seo ul{float:left; list-style:none; display:inline; width:670px;}
#single .left .seo ul li{float:left; margin:5px;}

#single .left .content{float:left; width:670px; font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#333;}

#single .left .syntaxhighlighter{width:670px; display:block; overflow:scroll;}

#single .left .content p{margin:0 0 20px 0;}
#single .left .content strong{font:bold 14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#333;}
#single .left .content h1{background:none; font:26px Arial, Helvetica, sans-serif; color:#000; margin:0 0 20px 0; padding:0;}
#single .left .content h2{background:none; font:22px Arial, Helvetica, sans-serif; color:#333; margin:0 0 20px 0; padding:0;}
#single .left .content h3{background:none; font:18px Arial, Helvetica, sans-serif; color:#666; margin:0 0 20px 0; padding:0;}
#single .left .content h4{background:none; font:16px Arial, Helvetica, sans-serif; color:#999; margin:0 0 20px 0; padding:0;}
#single .left .content a{color:#069; text-decoration:none;}
#single .left .content a:hover{text-decoration:underline;}
#single .left .content ul{margin:5px 25px;}
#single .left .content ol{margin:5px 30px;}

#single .left .tags{font:12px Arial, Helvetica, sans-serif; margin:10px 10px 0 0; float:left;}
#single .left .tags a{color:#999; text-decoration:none;}
#single .left .tags a:hover{color:#000;}

#single #crp_related{float:left; width:670px; border-bottom:1px solid #999; border-top: 1px solid #999; padding:15px 0; margin:15px 0;}
#single #crp_related h3{font:20px Arial, Helvetica, sans-serif; color:#000; margin:0;}
#single #crp_related ul{float:left; margin:5px 15px; list-style:square; color:#999; width:640px;}
#single #crp_related ul li{margin:5px 0;}
#single #crp_related ul li a{font:14px Arial, Helvetica, sans-serif; color:#333; text-decoration:none;}
#single #crp_related ul li a:hover{text-decoration:underline;}

#adsbotcomment{width:670px; float:left; text-align:center; margin-bottom:15px;}

</style>

Exemplo da tabela com laço em PHP.

<div class="editdel">
<table border=0 cellspacing="2" width="" height="8">
<tr>
<td width="450px" align="center" bgcolor=''><strong><h2>Cor em linhas da tabela:</h2></strong></td>
</tr>
  <?php
for ($i = 1; $i <= 10; $i++) {
     if ($cor =="#FFD7AE"){
        $cor = "#C1EBFF";
        }else{ 
        $cor = "#FFD7AE";
        }
    echo '<tr><td bgcolor="'.$cor.'"><font size="3" face="verdana">Linha: '.$i.' </font></td>
<td width="100px" align="center" bgcolor="'.$cor.'"><a href="'.$i.'">Editar</a></td>
<td width="100px" align="center" bgcolor="'.$cor.'"><a href="'.$i.'">Deletar</a></td></tr>  
    
    ';

}
?>
</table></div>

Obs.: Você pode usar o mysql_query  e trazer os resultados montando um while com as linhas do banco de dados. 

Exemplo da paginação html simples.

<div id="paginator">
  <div class="pagenavi">
<!-- <span class="pages">Página 5 de 6</span> -->
<a href="#" class="previouspostslink">Próximo »</a><span class="extend">...</span>
<a href="#" class="page smaller">1</a>
<a href="#" class="page smaller">2</a>
<a href="#" class="page smaller">3</a>
<span class="current">4</span><a href="#" class="page larger">5</a>
<a href="#" class="nextpostslink">« Anterior</a></div>
</div>

Fonte da paginação: Site oficial Wordpress

Comentários

Postar um comentário