mar
20
2012

Alternar colores en tablas con PHP y CSS

Alternar colores en tablas

Para darle un formato de salida mejor a nuestras consultas a la base de datos, podemos crear una tabla en la que cada fila tendrá un color alterno.

Con este código mostraremos la salida de una select hecha con php y mysql en una tabla donde cada fila será de un Color.
Para realizarlo utilizaremos una select y las filas que devuelva la select las iremos alternando a una clase de propiedad u otra.

Primero creamos el css con las clases a las que vamos a referenciar nuestras filas, en este caso solo cambia los colores del borde y el background:

archivo.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.operario_par {
  position: relative;
  left: 16px;
  top: 0px;
  width: 170px;
  background-color:#CCD1D7;
  border: solid 1px #CCD1D7;  
}
 
.operario_impar {
  position: relative;
  left: 16px;
  top: 0px;
  width: 170px;
  background-color:#E8EBED;
  border: solid 1px #E8EBED;  
}

Después crearemos el php que nos devolverá las filas.
Este es el código dónde iremos añadiendo las clases “operario_par” y “operario_impar”, dependiendo del Color que queremos asignarle.

archivo.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 $cont_registro=0;
 
                         echo "<table style=\"border-collapse: separate; border-spacing: 1px;\">";
                         while ($result_select = mysql_fetch_row($resSqlSelect)) {
       $cont_registro++;                                
                        if ($cont_registro%2 == 0){  
                           $color_fondo="operario_par";
                         }   
                         else{   
                           $color_fondo="operario_impar";
                         }
                                echo "<tr>";
                                printf("<td class=%s>",$color_fondo);
                                printf("<font class=%s>%s</font>",$color_fondo, $result_select["0"]);
                                echo "</td>";
                                printf("<td class=%s>",$color_fondo);
                                printf("<font class=%s>%s</font>",$color_fondo,  $result_select["1"]);
                                echo "</td>";
                                printf("<td class=%s>",$color_fondo);
                                printf("<font class=%s>%s</font>",$color_fondo,  $result_select["2"]);
                                echo "</td>";
                                printf("<td class=%s style=\"width:30px\">",$color_fondo);
                                printf("<div align=\"center\"><input type=\"radio\" name=\"bidoperario\" value=%s ></div>",$result_select["3"]);
                                echo "</td>";
                                echo "</tr>";      
       }         
       echo "</table>";

Así es como quedaría la tabla con las filas con los colores que le hemos asignado en el css.

Sharing our website, you will help us with the maintenance. Thank you!

 

Click on any of these buttons to help us to maintain this website.



          
 
Han llegado aquí buscando:
Ningún usuario a búscado algo parecido en nuestra website

Leave a comment


siete + = 16

Ayudas!

Recientes

  • Ber: Pongo los que voy utilizando, si te animas y tienes alguno, enviamelo y lo publicamos. Un saludo,
  • luis enrique: estimado tienes batcheros para validar reglas de tipo numéricos, fecha y letras, asi como retirar...
  • Ber: Hola, No se muy bien a que te refieres, si me das más detalles. Saludos
  • Myri: hola me puedes ayudar me sale una cxudricula en el emulador pero en el telefono me sale q la plicacion no se...
  • Ber: Hola, No lo tengo en java no, :( . Si lo haces envíamelo please y lo subo si quieres. Un saludo,
Google+