[SOLUCIONADO] Problema para mostrar las noticias en el index

[cdisenia]

Hola a todos necesitaría si alguien me puede ayudar con este problema, estoy aprendiendo a programar con php y mysql, y estoy realizando un sistema de noticia ya he realizado el administrador de noticia, con las funciones de agregar, modificar y eliminar noticias, toda esa parte funciona perfectamente, pero me quede estancado en el index donde quiero que me muestre 21 noticias en 7 filas con columnas de a 3, pero me salen todas en filas y sin formato lo estoy diseñando con tabla, pero me gustaría usar div. Le voy pasando los datos, así me pueden guiar, muchas gracias.

Esta es la tabla noticia:

Código:

  `id` int(1) NOT NULL auto_increment,
  `titulo` varchar(255) NOT NULL default '',
  `subtitulo` text NOT NULL,
  `detalle` text NOT NULL,
  `fuente` varchar(255) NOT NULL default '',
  `categoria_id` int(1) NOT NULL,
  `subcategoria` varchar(140) NOT NULL default '',
  `foto` varchar(140) NOT NULL default '',
  `fecha` timestamp NOT NULL default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=7 ;

Este es el index.php

Código PHP:

  <?php 
        $sql="select * FROM noticia, categoria WHERE noticia.categoria_id =  categoria.categoria_id ORDER BY id DESC LIMIT 21"; 
        $res=mysql_query($sql,$con); 
        ?> 
        <div class="noticia"> 
        <table width="100%" cellspacing="5" > 
        <?php 
        $i=0; 
        while($mostrador = mysql_fetch_array($res)) 
        { 
        $i++; 
?> 
<tr id="<?php echo "id_$i";?>"> 
<td width="33%" align="center" valign="top"> 
<div align="justify"> 
<p>Fecha: <?php echo $mostrador["fecha"];?></p> 
<table width="auto" cellspacing="1" cellpadding="3" border="0" bgcolor="#<?php echo $mostrador["categoria_color"];?>"><tr>  
   <td valign="top"><font color="#FFFFFF" face="arial, verdana, helvetica">  
<b><?php echo $mostrador["categoria_nombre"];?>: <?php echo $mostrador["subcategoria"];?></b>  
   </font></td>  
</tr></table> 
        <?php 
        echo "<a href=administrador/ver-noticias.php?id=$mostrador[id]>"; ?> <h1><?php echo $mostrador["titulo"];?></h1></a> 
        <img src="imagenes/<?php echo $mostrador["foto"];?>" /> 
        <p><?php echo $mostrador["subtitulo"];?></p> 
</div> 
</tr> 
<?php 
} 
?> 
        </table> 
        </div>  

Acá es el problema que me muestra todas las noticias en fila, pero si le cambio a la tabla para que se vea en columnas se van agregando una al lado de la otra. Estoy tratando de hacerla con div, pero no me sale. Por favor agradecería si me pudieran dar una mano con esto. Desde ya muchas gracias.

[Artificium]

Bueno, tienes que desarrollar la parte de tu cerebro que se encarga del ingenio. Pero viendo tu código creo que lo que no dominas es HTML, veo que has copiado HTMLs antiguos, con etiquetas que ya no se usan, como font. Primer consejo, estudia un poco de HTML, sobre todo el HTML5 y también estudia CSS, sospecho que no tienes muchos conocimientos en eso. Segundo consejo, la idea es esta: Veo que tienes un contador ($i) y no estoy seguro para qué lo usas. Bien, lo podrás usar para lo siguiente:

Si quieres imprimir las noticias en 3 columnas, entonces deberías crear una tabla en la que cada fila contenga 3 celdas, correcto? Bien, cómo hacer eso? pues usando el contador, el contador $i comienza en cero, cero es multiplo de 3? cómo saberlo? usando el módulo de la división? qué es eso? es el residuo de una división, cómo? digamos si tenemos 5 entre 2, es igual a 2 y el residuo es 1, matemática de primaria, para obtener el modulo se usa este operador: "%", así por ejemplo si imprimimos 7 % 2 obtenemos 1, si imprimimos 9 % 3 obtenemos cero, porque el residuo de la división es igual a cero, si no lo entiendes bien, investiga al respecto.

Ahora hacemos lo siguiente, si obtenemos el residuo de la división del contador entre 3 entonces en la primera vuelta del bucle obtenemos: 0 % 3 = 0. Si es cero es divisible entre 3, luego las siguientes vueltas:

1 % 3 = 1
2 % 3 = 2
3 % 3 = 0
4 % 3 = 1
5 % 3 = 2
6 % 3 = 0

Y así sucevivamente, entonces vemos que cada 3 vueltas del while obtenemos el modulo de la división del contador entre 3 igual a 0, y entonces es cuando debemos imprimir la etiqueta tr que haga el saldo de linea. Esa es la idea. Talvez no lo entiendas bien, pero yo espero que no me pidas el código, que lo trates de hacer tú mismo para que así se desarrolle tu ingenio. Preguntame lo que no entiendes.

[cdisenia]

Muchas gracias Artificium por tu respuesta, me hiciste acordar a un profesor que tuve en la secundaria, que primero te llamaba la atención y después te explicaba como resolver los problemas, ya se que el contador $i comienza en cero, ahora como tendría que hacer la división, me podría pasar algún tutorial o como lo tendría que buscar desde ya muchas gracias.

[Artificium]

El meollo no es la división sino el residuo de la división para saber que estamos en un número de vuelta que es multiplo de 3, el operador % se encarga de obtener ese residuo llamado también "módulo de la división". De acuerdo, no pensaba darte el código, pero te lo doy, pero, si quieres ser un verdadero programador es necesario que el código, no basta con que funcione, es importante saber por qué funciona. Bueno, esta es la forma.

Código PHP:

 <table width="100%" cellspacing="5" > 
    <tr>
    <?php 
         $i = 0;
        while($mostrador = mysql_fetch_array($res))  {
            $r = $i % 3;
            
        echo '<td>El contenido de tu noticia</td>';
        if ($i > 0 && $r == 2) {
        echo '</tr>';
        echo '<tr>';
        }
            $i++; 
        }
    ?>
</tr>
</table>  

Espero que lo entiendas y lo apliques.

[cdisenia]

Muchisimas gracias Artificium por ayudarme lo he puesto en practica, ahora como me dijiste anteriormente "que tengo que desarrollar la parte de mi cerebro que se encarga del ingenio", ahora lo estoy poniendo en practica pero no con tabla sino con div, me esta haciendo pensar pero lo voy a lograr, y he empezado a leer de nuevo el manual de HTML pero 5 y CSS, así no estoy desactualizado, muchísimas gracias por tu consejo y tu ayuda.