Estilo a GRID en HTML y PHP

mixzplit · #1 (**permalink**) 22/02/2011, 08:47

Hola compañeros Foreros, les escribo para pedirles ayuda, ahi les va:

Elabore un GRID con HTML y PHP, aqui esta el codigo:

Código PHP:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>Listado de Productos</title> 
        <link rel="stylesheet" type="text/css" href="css/estilos.css" /> 
        <link rel="stylesheet" type="text/css" href="css/paginacion.css" /> 
         
         
    </head> 
    <body> 
    <?php 
    include("conex.php"); 
     
    $cantidad = "SELECT COUNT(*) FROM dpinv"; 
    $resultado = mysql_query($cantidad); 
    $total = mysql_result($resultado, 0, 0);  
     
    ?> 
     
    <div align="center"><strong> RESULTADO DE LA BUSQUEDA</strong> </div> 
    <div align="center"><strong> LISTADO DE PRODUCTOS</strong> </div> 
    <div align="center"> SE ENCONTRARON <strong> <?php echo $total ?> </strong> REGISTROS </div>     
     
      <?php 
        $registros_por_pagina = 30;//Cantidad de registros que se mostraran por pagina 
        $total_paginas = ceil($total / $registros_por_pagina);//Numero total de paginas 
        $pagina = intval($_GET['p']);//Pagina actual 
        if ($pagina < 1 || $pagina > $total_paginas) $pagina = 1; 
        $offset = ($pagina - 1) * $registros_por_pagina;//posicion 
         $limite = " LIMIT $offset, $registros_por_pagina";//sentencia SQL que limita los registros 
         //Aqui termina la paginacion 
        $result=mysql_query("SELECT    inv_filbmp,inv_codigo,inv_descri,inv_fchcre,inv_grupo,inv_estado FROM dpinv $limite");  
        //Quiery de Consulta 
             
        $resultado = $result; 
         
        function detalles () 
        { 
             
             
        } 
         
     ?> 
     
    <div align="center"><p> 
      <table cellpadding="0" cellspacing="0" border = '0' align="center" style="width:85%;border:1px solid white ;font-size:14px"> 
          <tr class="fondo"> 
            <td class="tabla" width="200" align="center">Imagen</td> 
            <td class="tabla" align="center">Codigo</td> 
            <td class="tabla" width="320" align="center">Descripción</td> 
            <td class="tabla" align="center">Fecha de Creación</td> 
            <td class="tabla" align="center">Grupo</td> 
            <td class="tabla" align="center">Estado</td> 
             
          </tr> 
          <?php 
            //Mostramos los registros 
            while ($row = mysql_fetch_array($resultado)) 
            { 
            echo '<tr><td><a href="detalle.php?inv_codigo='.$row['1'].'"><img src = "'.$row['0'].'"width="190" height="150"/></a></td><td align="center">'.$row['1']. 
                 '</td><td>'.$row['2'].'</td><td align="center">'.$row['3'].'</td><td align="center">'.$row['4']. 
                 '</td><td align="center">'.$row['5'].'</td></tr>'; 
            }         
             
            $display_pages=10;//Numero de links para paginas que se mostraran 
  
            echo "<a title='Inicio' id='paginado' href='?p=1'> << Inicio </a> ";//Inicio 
            if ($pagina>1) echo "</a><a title='Anterior' id='paginado' href='?p=".($pagina-1)."'> << Anterior </a> "; //Anterior 
  
            for ($i = $pagina; $i <= $total_paginas && $i <= ($pagina+$display_pages); $i++) { 
              if ($i == $pagina) { 
              echo "<strong id='paginado'>$i   </strong> "; 
              } 
              else { 
              echo "</a><a title='pagina $i' id='paginado' href='?p=$i'>$i</a>  "; 
              } 
            } 
  
            if (($pagina+$display_pages)< $total_paginas) echo "..."; 
            if ($pagina<$total_paginas) echo "<a title='Siguiente' id='paginado' href='?p=".($pagina+1)."'> Siguiente >>  ";//Siguiente 
            echo "<a title='Ultimo' id='paginado' href='?p=$total_paginas'> Ultimo >> </a>";//Ultima pagina 
         
            mysql_free_result($result); 
            ?> 
        </table> 
    <p> 
      <?php 
         
        $display_pages=10;//Numero de links para paginas que se mostraran 
  
            echo "<a title='Inicio' id='paginado' href='?p=1'><< Inicio </a> ";//Inicio 
            if ($pagina>1) echo "</a><a title='Anterior' id='paginado' href='?p=".($pagina-1)."'> << Anterior </a> "; //Anterior 
  
            for ($i = $pagina; $i <= $total_paginas && $i <= ($pagina+$display_pages); $i++) { 
              if ($i == $pagina) { 
              echo "<strong id='paginado'>$i  </strong>"; 
              } 
              else { 
              echo "</a><a title='page $i' id='paginado' href='?p=$i'>$i</a>  "; 
              } 
            } 
  
            if (($pagina+$display_pages)< $total_paginas) echo "...";  
            if ($pagina<$total_paginas) echo "<a title='Siguiente' id='paginado' href='?p=".($pagina+1)."'> Siguiente >>  ";//Siguiente 
            echo "<a title='Ultimo' id='paginado' href='?p=$total_paginas'> Ultimo >> </a>";//Ultima pagina 
         
         
        ?> 
      </p> 
    </div> 
       <div align="center"></div> 
</body> 
</html>

Este GRID se va llenando a medida que se ingresan datos a la aplicacion, ahi tdo bien.

Mi problema es la apariencia, como hago darle un estilo al ecabezado y a la informacion otro estilo, yo quisiera que los datos que me mostrara el GRID me aparezca una linea con color de fondo GRIS y la Siguiente en BLANCO y asi sucesivamente.

He buscado informacion y aun no consigo nada y he intentado por mi mismo y no doy con lo que quiero.

Espero pueda ayudarme y me haya explicado bien

Saludos

omarMusic · #2 (**permalink**) 22/02/2011, 09:19

Bueno para los encabezados utiliza mejor la etiqueta <th>, para lo del cambio de color de fila crea dos clases una para cada color que quieras dar, luego con un contador de php por ej $i preguntas si es par le asignar una clase y cuando sea impar le asignas la otra clase con el otro fondo de otro color, algo asi:

$i = 0;
while ($row = mysql_fetch_array($resultado))
{
$class = ($i \%2 == 0)?"clase1":"clase2";
echo '<tr class="$class"><td><a href="detalle.php?inv_codigo='.$row['1'].'"><img src = "'.$row['0'].'"width="190" height="150"/></a></td><td align="center">'.$row['1'].
'</td><td>'.$row['2'].'</td><td align="center">'.$row['3'].'</td><td align="center">'.$row['4'].
'</td><td align="center">'.$row['5'].'</td></tr>';
$i++;
}

Saludos!

sanxuan · #3 (**permalink**) 22/02/2011, 09:23

Lo habitual es crear una clase específica para las celdas de fondo gris. El fondo blanco de las demás puedes definirlo en la tabla o de manera general para todas las celdas. Igual para el encabezado. Puedes usar la etiqueta específica de encabezados <th> o un <tr> con una clase para definir estilos.
Si tienes más de un tipo de tabla en la misma página puede incluirse un nombre para ella, si no, no sería necesario.

Código HTML:

Ver original<table id="ejemplo">
  <tr>
    <th>encabezado</th>
    <th>encabezado2</th>
  </tr>
  <tr>
    <td>linea normal </td>
    <td>linea normal 2 </td>
  </tr>
  <tr class="gris">
    <td>linea gris</td>
    <td>linea gris2</td>
  </tr>
</table>

Código CSS:

Ver original#ejemplo th {
   /*estilos para el encabezado*/
}
#ejemplo tr {
  /* estilo para celdas de fondo blanco */
  background:white;
}
#ejemplo tr.gris {
  /*estilo para celdas de fondo gris */
  background:grey;
}

Debes usar una variable para ir alternando los <tr> con estilo gris y los que no necesitan estilo cuando el contenido se genera automáticamente.

omarMusic · #4 (**permalink**) 22/02/2011, 09:34

Disculpas puse de mas un \ , pero acotando al anterior comentario podrias cambiarlo algo asi

$class = ($i %2 != 0)?"":"class=\"gris\"";
echo '<tr $class>...

Saludos!

mixzplit · #5 (**permalink**) 22/02/2011, 10:09

Hola compañeros, gracias por sus respuestas,les comentare lo que hice:

Cree las clases que me dijo omarMusic, las hice asi:

Código CSS:

Ver original.blanco {
  
      background:white;
     }
.gris {
     
      background:grey;
    }

Y en mi PHP modifique lo siguientes:

Código PHP:

  $i = 0; 
            while ($row = mysql_fetch_array($resultado)) 
            { 
              
             $class = ($i %2 == 0)?"blanco":"gris"; 
             echo '<tr class="$class"><td><a href="detalle.php?inv_codigo='.$row['1'].'"><img src = "'.$row['0'].'"width="150" height="120"/></a></td><td align="center">'.$row['1']. 
                 '</td><td>'.$row['2'].'</td><td align="center">'.$row['3'].'</td><td align="center">'.$row['4']. 
                 '</td><td align="center">'.$row['5'].'</td></tr>'; 
             
            $i++; 
            }

Con esto me deberia funcionar, pero no me hace nada, tengo el estilo en un archivo llamado estilos.css.

Saludos