viernes, 21 de septiembre de 2012

Tutorial crear tabla dinámica HTML+PHP y colorear

Buenos días!
         El post de hoy no se podría decir que es un tutorial, es un simple código HTML con PHP que te genera una tabla dándole unos valores de filas y columnas. Estos valores podrían crearse a partir de un formulario (mirar ejemplo), a través de una base de datos, de un contador de imágenes, etc...
También colorea la tabla un cuadro si otro no (par e impar).

         El código es bastante simple y muy útil en muchas ocasiones para ahorrar tiempo. A parte está totalmente comentado para aprender y poder hacer las modificaciones oportunas o incluso ampliarlo a tu antojo.
   
        A continuación os presento el resultado junto al código. Al final veréis un link para probar la demo y verlo en tiempo real. Aquí va:





El código:

 <html>
 <head>
 <?php
  //Creamos los parametros iniciales
  //estos podrían proceder de un formulario, sql, etc...
  $filas = 10;
  $columnas = 15;
  $texto = 0;
  $grey = true;
  ?>                                                   
 </head>                                                                 
 <body>      
 
<!-- Creamos el inicio de la tabla manualmente-->
<table border="1">
 <?php
 //Iniciamos el bucle de las filas
 for($t=0;$t<$filas;$t++){
  echo "<tr>";
  //Iniciamos el bucle de las columnas
  for($y=0;$y<$columnas;$y++){
   if($grey){
    //Pintamos el cuadro
    echo "<td style=padding:3px;
        background-color:#F5D0A9;>".$texto."</td>";
    //El próximo no será pintado
    $grey=false;
    $texto++;
   }else{
    //Dejamos cuadro en blanco
    echo "<td style=padding:3px;>".$texto."</td>";
    //El próximo será pintado
    $grey=true;
    $texto++;
    }
   }
   //Cerramos columna
   echo "</tr>";
  }
 ?>
 <!-- Cerramos tabla -->
 </table>
 </body>                                                                 
 </html>



Muchas gracias! No olviden escribir su comentario!


39 comentarios:

  1. muchas gracias me fue de gran ayuda lo modificare para manejar arreglos dinámicamente e ir lo mostrando en la tabla gracias amigo!!!

    ResponderEliminar
  2. Muy buen código gracias :), estaba pensando hacerlo de esa forma, pero como tenía tiempo sin ver php no recordaba algunos detalles

    ResponderEliminar
  3. Muchas gracias, me va a servir de mucho

    ResponderEliminar
  4. que aporte !!!! muchas gracias

    ResponderEliminar
  5. Buen dia alguien puede ayudar necesito un codigo en html para dibujat dos matirces de 3*3 y el resultado pintarlo en php
    saludos

    ResponderEliminar
  6. Me has salvado la vida, la verdad con esto soluciones miles de problemas :D aunque ahora estoy pensando implementarlo con th para ponerle titulos

    ResponderEliminar
  7. Disculpa si tengo un array que quiero cargar en la tabla donde lo tendria que poner para que me rellenara la tabl

    ResponderEliminar
  8. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  9. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  10. hola muy buen ejercicio, queria preguntarte cuando ejecuto el ejemplo y damos clic en el boton dibujar, como hacs para que la tabla se muestre en la misma pagina, pus tngo entndido que ese boton submit me lleva a otra pagina o como es ese manejo? te lo agradezco mucho.

    ResponderEliminar
    Respuestas
    1. Muchas gracias por el comentario, simplemente en el campo acction="" del Form e puesto el nombre del mismo archivo demo.php ;)

      +1 !

      Eliminar
  11. hola victor mil gracias por tu rspuesta lo tngo ahora claro, sin embargo acudo nuevamente a tu ayuda para preguntarte el porque no me sale los estilos de color en las celdas respectivas.
    yo hago tal cual tienes en tu explicacion del codigo pero a mi no me salen las casillas correspondientes con color a que se debe, que me falta en el codigo,
    por tu ayuda mil bendiciones

    ResponderEliminar
    Respuestas
    1. Tendría que ver tu código para poder ayudarte, entra a esta web http://www.heypasteit.com/ pega el código le das al botón y me pegas aquí el enlace. Gracias!

      Eliminar
  12. Hola me gustó mucho tu post y quería ver si podrías ayudarme con un problema que tengo. Mira lo que pasa es que yo tengo unos "tableros" o boletas de calificaciones las cuales tienen 4 columnas divididos por semanas (semana 1, semana 2, semana 3, semana 4) y lo que quiero es pintar la columna que está siendo evaluada en ese instante. Por ejemplo si yo estoy evaluando la semana 3 que esa semana se pinte de algún color por ejemplo azul y que las demás semanas se queden sin color, y cuando pase a evaluar la semana 4 que esa semana sea la que se pinte de color azul y las demás semanas(1,2,3) se queden sin color.
    Por favor ayúdame...!!!!

    ResponderEliminar
    Respuestas
    1. Necesito algunos datos más ya que abría que "sincronizarla con un calendario" las 4 semanas coincide con inicio y fin de mes? o la primera semana puede empezar a mediados de mes?

      Pon me algunos ejemplos con días, muchas gracias!

      Eliminar
    2. Pero abra que escribir dentro de las celdas? Porque si se tiene que guasrdar ará falta una base de datos también.

      Eliminar
    3. Este comentario ha sido eliminado por el autor.

      Eliminar
    4. Al hacerlo con Jquery calendar, yo buscaría a través del Jquery como colorear esa semana ya que al tratarse de una librería bastante completa debe tener funciones para eso. Espero que lo consigas :D. y espero un +1 si te gustó el Blog. Gracias!

      Eliminar
    5. Hola si muchas gracias por responder, lo intentaré y claro q va un +1 me gustó mucho tu post :)

      Eliminar
  13. hola, y como tendría que hacer para que la tabla se llene con información de una base de datos.?

    ResponderEliminar
    Respuestas
    1. Buenas tardes, te recomiendo que leas uno de los últimos tutoriales que hemos publicado http://www.tutorialeshtml5.com/2013/11/tutorial-crear-formulario-html-guardar.html que trata de cómo sacar información de la base de datos. Simplemente tendrías que unir estos dos tutoriales para obtener lo que necesitas.

      Tan solo deberás saber que la variable del resultado de la base de datos (se eplica en el tutorial que te he citado) abra que sustituirlo por la variable $texto de este tutorial.

      Espero que te sirva! cualquier cosa aquí estamos. Recuerda un +1 nos ayuda a todos!

      Eliminar
  14. Muchas gracias, si me sirve, solo que soy nueva en estos temas y me cuesta mucho trabajo.!

    ResponderEliminar
  15. Mil gracias amigo, me salvaste de una!! :D

    ResponderEliminar
  16. Gracias por el aporte.
    El ejemplo en vivo no lo he podido ver ya que el archivo ya no está disponible en la página que lo tenía.
    He copiado y pegado el código pero a mi no me ha funcionado.

    ResponderEliminar
  17. Excelente!!! :D me salvaste!!!
    Ya sabia que podía hacerse esto, pero también llevo mucho tiempo sin hacer tablas dinámicas.
    Muchísimas gracias!! me funcionó perfecto...
    jejeje tampoco me corrió a la 1ra, pero en mi caso olvide encender WampServer ;$

    ResponderEliminar
  18. It has turned out perfect

    ResponderEliminar
  19. hermano tengo un problema con el pc ave zi me pues ayuda

    ResponderEliminar
  20. Si quisieremoa llenar los campos con numeros a la zar, como lo tendriamos que hacer

    ResponderEliminar
  21. Hola amigo saludos, quisiera preguntarte porque motivo cuando ingreso trato de visualizar el codigo no se ven los colores, e intentado cambiarlos y no me resulta, muchas gracias por la información saludos

    ResponderEliminar