Foros del Web » Creando para Internet » CSS »

Estilo a GRID en HTML y PHP

Estas en el tema de Estilo a GRID en HTML y PHP en el foro de CSS en Foros del Web. 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"> ...
  #1 (permalink)  
Antiguo 22/02/2011, 08:47
 
Fecha de Ingreso: enero-2011
Ubicación: Maracaibo
Mensajes: 179
Antigüedad: 6 años, 10 meses
Puntos: 2
Pregunta Estilo a GRID en HTML y PHP

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($resultado00); 
    
    
?>
    
    <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 || $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
  #2 (permalink)  
Antiguo 22/02/2011, 09:19
 
Fecha de Ingreso: febrero-2011
Ubicación: Evolandia
Mensajes: 103
Antigüedad: 6 años, 10 meses
Puntos: 10
Respuesta: Estilo a GRID en HTML y PHP

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!
  #3 (permalink)  
Antiguo 22/02/2011, 09:23
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Estilo a GRID en HTML y PHP

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
  1. <table id="ejemplo">
  2.   <tr>
  3.     <th>encabezado</th>
  4.     <th>encabezado2</th>
  5.   </tr>
  6.   <tr>
  7.     <td>linea normal </td>
  8.     <td>linea normal 2 </td>
  9.   </tr>
  10.   <tr class="gris">
  11.     <td>linea gris</td>
  12.     <td>linea gris2</td>
  13.   </tr>
Código CSS:
Ver original
  1. #ejemplo th {
  2.    /*estilos para el encabezado*/
  3. }
  4. #ejemplo tr {
  5.   /* estilo para celdas de fondo blanco */
  6.   background:white;
  7. }
  8. #ejemplo tr.gris {
  9.   /*estilo para celdas de fondo gris */
  10.   background:grey;
  11. }
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.
  #4 (permalink)  
Antiguo 22/02/2011, 09:34
 
Fecha de Ingreso: febrero-2011
Ubicación: Evolandia
Mensajes: 103
Antigüedad: 6 años, 10 meses
Puntos: 10
Respuesta: Estilo a GRID en HTML y PHP

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

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

Saludos!
  #5 (permalink)  
Antiguo 22/02/2011, 10:09
 
Fecha de Ingreso: enero-2011
Ubicación: Maracaibo
Mensajes: 179
Antigüedad: 6 años, 10 meses
Puntos: 2
Respuesta: Estilo a GRID en HTML y PHP

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
  1. .blanco {
  2.  
  3.       background:white;
  4.      }
  5. .gris {
  6.      
  7.       background:grey;
  8.     }

Y en mi PHP modifique lo siguientes:

Código PHP:
$i 0;
            while (
$row mysql_fetch_array($resultado))
            {
             
             
$class = ($i %== 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

Etiquetas: estilo, grid, html, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:49.